zoukankan      html  css  js  c++  java
  • 以留言本的开发打开ajax的世界

      之前就一直听后台人员说了ajax的强大的美丽,现在初步涉及,方才知道世界之大,无奇不有,我永远只是其中的一只菜鸟,现在就一个外表非常丑陋的界面来简单的介绍一下ajax制作的简易的留言本。

      ajax,之前在我的印象中一直就是一个神奇的只可远观不可亵玩的东西,知道今天了解之后,才知道无非就只有一个功能,就是进行扒数据,就是从后台人员所写的文件进行扒数据,至于那文件的书写,就是后台人员的事情了。ajax之需要根据需要传递什么数据,并返回什么值,只要了解这些也就足够了。

      以下就是ajax所要用到的几个文件,首先必不可少的当然就是html和css文件

      html文件的代码

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" style="text/css" href="css.css" />
    <script src="ajax.js"></script>
    <script src="guestbook1.js"></script>
    </head>

    <body>
    <div id="header"></div>

    <div id="container">

    <div id="list">
    <!--<dl>
    <dt>
    <strong>zmouse</strong> 说 :
    </dt>
    <dd>内容</dd>
    <dd class="t">
    <a href="javascript:;" id="support">顶(<span>0</span>)</a>
    |
    <a href="javascript:;" id="oppose">踩(<span>0</span>)</a>
    </dd>
    </dl>-->
    </div>
    <div id="showMore">显示更多...</div>

    <div id="sidebar">

    <div id="user" style="margin-bottom: 10px;">
    <h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
    </div>

    <!-- 注册 -->
    <div id="reg">
    <h4>注册</h4>
    <div>
    <p>用户名:<input type="text" name="username" id="username1"></p>
    <p id="verifyUserNameMsg"></p>
    <p>密码:<input type="password" name="password" id="password1"></p>
    <p><input type="button" value="注册" id="btnReg" /></p>
    </div>
    </div>

    <!-- 登陆 -->
    <div id="login">
    <h4>登陆</h4>
    <div>
    <p>用户名:<input type="text" name="username2" id="username2"></p>
    <p>密码:<input type="password" name="password2" id="password2"></p>
    <p><input type="button" value="登陆" id="btnLogin" /></p>
    </div>
    </div>

    <!-- 留言发表 -->
    <div id="sendBox">
    <h4>发表留言</h4>
    <div>
    <textarea id="content"></textarea>
    <input type="button" value="提交" class="btn1" id="btnPost" />
    </div>
    </div>
    </div>

    </div>

    </body>
    </html>

    然后就是css文件,因为本文章主要介绍的就是其利用ajax的功能,所以对于其中的css美化这一方面知识简单的带过而已。

    @charset "utf-8";

    body {
    margin: 0; padding: 0;
    background: url("images/bg.gif");
    }

    h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}

    a {text-decoration: none; color: #444;}

    .hide {
    display: none;
    }
    .show {
    display: block;
    }

    .btn1 {
    padding: 0 12px; margin-left: 0px;
    display: inline-block;
    height: 28px; line-height: 28px; font-size: 14px;
    border: 1px solid #D9D9D9; background-color: #FAFAFA;
    }

    #header {
    position: relative;
    height: 42px; background-color: #FFF; border-bottom: 1px solid #CCC;
    }
    #wrapper {
    margin: 0 auto; overflow: hidden;
    1000px; height: 42px; border-right: 1px solid #EEE;
    }
    #wrapper a.loginNav {
    padding: 0 10px; float: right;
    100px; height: 42px; border-left: 1px solid #EEE;
    text-align: center; line-height: 42px;
    }
    #wrapper a.loginNav:hover {
    color: #9A0000;
    }

    #container {
    margin: 10px auto; position: relative;
    1000px;
    }

    #sidebar {
    padding: 10px; position: absolute; top: 0px; right: 0px;
    300px; border: 1px solid #CCC; background-color: white;
    }
    #sidebar h4 {
    padding: 5px;
    height: 24px; line-height: 24px; background-color: #CCC;
    }

    #sendBox {
    300px;
    }
    #sendBox div {
    margin: 5px 0;
    }
    #sendBox textarea {
    margin-bottom: 5px;
    294px; height: 140px;
    }

    #list {
    660px;
    }
    #list dl {
    margin: 0 0 10px 0; padding: 10px;
    border: 1px solid #CCC; background-color: white;
    }
    #list dt {
    height: 30px; line-height: 30px;
    }
    #list dd.t {
    text-align: right;
    }

    #list dd.t a {margin: 0 5px;}

    #showMore {
    640px;
    margin: 0 0 10px 0; padding: 10px;
    border: 1px solid #CCC; background-color: white; text-align: center;
    cursor: pointer;
    }

    在进行完html与css的简单布局之后,现在就开始进入ajax的世界了,无非就是分成几部分,1,创建对象;2写open()方法;其中就是传递几个参数,一个是方法,分get与post两种方法,第二个人技术url,就是要请求服务器的链接网址;3无非就是true或false,代表是不是异步,至于异步这个概念,以后有时间再来详细的介绍。为了方便,便将其封装成一个ajax.js文件,直接在html文件中进行调用。

    ajax.js文件内容如下

    function ajax(method, url, data, success) {
    var xhr = null;
    try {
    xhr = new XMLHttpRequest();
    } catch (e) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == 'get' && data) {
    url += '?' + data;
    }

    xhr.open(method,url,true);
    if (method == 'get') {
    xhr.send();
    } else {
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send(data);
    }

    xhr.onreadystatechange = function() {

    if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
    success && success(xhr.responseText);
    } else {
    alert('出错了,Err:' + xhr.status);
    }
    }

    }
    }

    最好就是guestbook.js文件,我的步骤就是在服务器中引进一个guestbook文件,然后里面有一个php文件,提供了每一个功能模块的接口,然后这个guestbook.js文件书写了一些方法来实现具体功能

    guestbook.js文件代码

    window.onload=function(){
    var oUsername=document.getElementById("username1");
    var overifyUserNameMsg=document.getElementById("verifyUserNameMsg");
    var ouser=document.getElementById("user");
    var ouserinfo=document.getElementById("userinfo");
    var oreg=document.getElementById("reg");
    var ologin=document.getElementById("login");
    var olist=document.getElementById("list")
    var oshowList=document.getElementById("showMore");
    var iPage=1;
    oUsername.onblur=function(){
    ajax('get','guestbook/index.php','m=index&a=verifyUserName&&username='+this.value,function(data){
    var d=JSON.parse(data);
    overifyUserNameMsg.innerHTML=d.message;
    if(d.code){
    overifyUserNameMsg.style.color='red';
    }
    else{
    overifyUserNameMsg.style.color='green';
    }
    })
    }
    var oPassword1 = document.getElementById('password1');
    var oRegBtn = document.getElementById('btnReg');
    oRegBtn.onclick=function(){
    ajax('post','guestbook/index.php','m=index&a=reg&username='+encodeURI(oUsername.value)+'&password='+oPassword1.value,function(data){
    var d=JSON.parse(data);
    alert(d.message);
    })
    }
    var oUsername2=document.getElementById("username2");
    var oPassword2 = document.getElementById('password2');
    var obtnLogin = document.getElementById('btnLogin');
    obtnLogin.onclick=function(){
    ajax('post','guestbook/index.php','m=index&a=login&username='+encodeURI(oUsername2.value)+'&password='+oPassword2.value,function(data){
    var d=JSON.parse(data);
    alert(d.message);
    if(!d.code){
    UpDateUsernameStates()
    }
    })
    }
    function getCookie(key) {
    var arr1 = document.cookie.split('; ');
    for (var i=0; i<arr1.length; i++) {
    var arr2 = arr1[i].split('=');
    if (arr2[0]==key) {
    return arr2[1];
    }
    }
    }
    UpDateUsernameStates();
    function UpDateUsernameStates(){
    var uid=getCookie('uid');
    var username=getCookie('username');
    if(uid){
    ouser.style.display="block";
    ouserinfo.innerHTML=username;
    oreg.style.display="none";
    ologin.style.display="none";
    }
    else{
    ouser.style.display="block";
    ouserinfo.innerHTML="";
    oreg.style.display="block";
    ologin.style.display="block";
    }
    }
    var oLogout = document.getElementById('logout');
    oLogout.onclick = function() {

    ajax('get', 'guestbook/index.php', 'm=index&a=logout', function(data) {

    var d = JSON.parse(data);
    alert(d.message);

    if (!d.code) {
    //退出成功
    UpDateUsernameStates();
    }

    });

    return false;

    }
    var ocontent=document.getElementById('content');
    var obtnPost=document.getElementById('btnPost');
    obtnPost.onclick=function(){
    ajax('post','guestbook/index.php','m=index&a=send&content='+ocontent.value,function(data){
    var d=JSON.parse(data);
    alert(d.message);
    if(!d.code){
    createList(d.data,true);
    }
    })
    }
    function createList(data,insert){
    var odl=document.createElement('dl');
    var odt=document.createElement('dt');
    var ostrong=document.createElement('strong');
    ostrong.innerHTML=data.username;
    odt.appendChild(ostrong);
    var odd1=document.createElement('dd');
    odd1.innerHTML=data.content;
    var odd2=document.createElement('dd');
    odd2.className='t';
    var oa1=document.createElement('a');
    var oa2=document.createElement('a');
    oa1.innerHTML = '顶(<span>'+data.support+'</span>)';
    oa2.innerHTML = '踩(<span>'+data.oppose+'</span>)';
    odd2.appendChild(oa1);
    odd2.appendChild(oa2);
    odl.appendChild(odt);
    odl.appendChild(odd1);
    odl.appendChild(odd2);
    if(insert&&olist.children[0]){
    olist.insertBefore(odl,olist.children[0])}
    else{
    olist.appendChild(odl)
    }
    }

    oshowList.onclick=function(){

    showList();
    iPage++;
    }
    function showList(){
    ajax('get', 'guestbook/index.php', 'm=index&a=getList&n=2&page=' + iPage, function(data) {

    var d = JSON.parse(data);

    var data = d.data;

    if (data) {
    for (var i=0; i<data.list.length; i++) {
    createList(data.list[i]);
    }
    }
    else {

    oshowList.style.display ="none";
    }

    });
    }

    }

    关于这个php文件则是后端人员书写,所以对于具体的功能与代码这里不再进行详细的解释。

    二:几个功能模块的解释

    主要就是用户注册,登录,退出,留言,加载更多这五大模块,主要做法基本都是大同小异,都是根据需要传递什么参数就在ajax()中进行传递,并留意返回的数据。

    这个就是刚开始出现的右边关于注册登录的界面

    上面的这个就是登录自己的账号之后出现的界面,之所以自己的名字会出现成这种情况,是因为登录的名字是中文字符,因为来不及进行装换,所以出现上面这种情况,之后有时间就会进行改进。
    上面显示的就是关于留言的界面,第一次只会显示两天留言,因为他默认的留言显示的是n=10,这里为了方便显示看到效果,所以将guestbook.js中的n=2,不断的点击加载更多,便会每次不停的加载两条留言,知道数据库中的留言没有了,显示更多的这个栏便也会消失了。
    最后的这就是整体界面。
    好了,关于ajax的应用就讲述到这里,具体后期的关于制作实例的会等后期再进行介绍。
  • 相关阅读:
    【Codechef】Chef and Bike(二维多项式插值)
    USACO 完结的一些感想
    USACO 6.5 Checker Challenge
    USACO 6.5 The Clocks
    USACO 6.5 Betsy's Tour (插头dp)
    USACO 6.5 Closed Fences
    USACO 6.4 Electric Fences
    USACO 6.5 All Latin Squares
    USACO 6.4 The Primes
    USACO 6.4 Wisconsin Squares
  • 原文地址:https://www.cnblogs.com/jtxn/p/4907486.html
Copyright © 2011-2022 走看看