Ajax总结

什么是Ajax
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML ），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
传统模式：等待——相应——等待
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
优势：
1：使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
2：AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
执行流程：
1：ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数，对状态的改变事件(readyStatechange)监听)
2：等待用户执行操作(例如点击)
3：触发了事件处理代码
4：调用ajax引擎
5：发送请求，ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求
6：服务器接受到了处理请求--开始处理
7：服务器将处理结果(xml或者文本)返回给了ajax引擎
8：监听相应数据
9：监听器对GUI数据更新
ajax变成
1：
获得引擎XmlHttpRequest对象
注意点:ie与别的浏览器获得方式不同
  function getXmlHttpRequest(){
            var xhr=null;
            if((typeof XMLHttpRequest)!=‘undefined‘){
                xhr=new XMLHttpRequest();
                alert(‘dom‘)
            }else{
                xhr=new ActiveXObject(‘Microsoft.XMLHttp‘);
                alert(‘IE‘)
            }
            return xhr;
        }
或者
function GetXmlHttpObject() {
        var objXMLHttp = null;
        if (window.XMLHttpRequest) {
            objXMLHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return objXMLHttp;
    }

案例1：测试XMLHttpRequest
重要参数：
onreadystatechange——注册一个监听器(绑定时间处理函数)
readyState返回与服务器通讯状态码Number类型
0对象创建，但是没有初始化
1对象建立但是没有调用
2发送数据(send方法被调用)
3数据传送中
4响应结束
responseText——服务器返回的文本
responseXML——服务器返回的xml dom对象
status 获得状态码

案例1使用get方式提交，验证用户姓名
网页：
 <form id="form1" action="http://127.0.0.1:9000" method="post">
        姓名:<input type="text" name="name" id="name" onblur="check_name()"><span id="err"></span><br/>---验证
        密码:<input type="password" name="pwd"><br/>
       <input type="submit" value="提交">
 </form>
js：
 function check_name(){
            var name=document.getElementById("name").value;    
            var xhr=getXmlHttpRequest();
            //注册监听器
            xhr.onreadystatechange=function(){
                //处理服务器返回的数据
                if(xhr.readyState == 4){
                    //xhr的状态值必须是4,才能正确接收
                    //到服务器返回的数据。
                    if(xhr.status == 200){
                        //ok
                        var txt = xhr.responseText;
                        //dom操作：更新页面
                        document.getElementById("err").innerHTML=txt;
                    }else{
                        //error
                        document.getElementById("err").innerHTML = ‘系统出错‘;
                    }
                }
            }
            //step2 发送请求
            xhr.open(‘get‘,‘checkName?name=‘+name,true);
            //发送请求
            xhr.send(null);
}

后台服务器
var express=require(‘express‘);
var app=express();
app.listen(9000,‘localhost‘)
app.get(‘/login.html‘,function(req,res){
    res.sendfile(‘./login.html‘)
})
app.get(‘/checkName?:name‘,function(req,res){
    //console.log(req.query.name)——获得了参数(注意是什么接受的)补充1
    if(req.query.name==‘zhangsan‘){
        res.send(‘已经被使用‘)
    }else{
        res.send(‘已经被使用‘);
    }
})

127.0.0.1:3000/index?id=12，这种情况下，这种方式是获取客户端get方式传递过来的值，通过使用req.query.id就可以获
127.0.0.1：300/index，然后post了一个id=2的值，这种方式是获取客户端post过来的数据，可以通过req.body.id获取


post方式ajax检测用户名
js：
   function check_name(){
            var name=document.getElementById("name").value;
            var xhr=getXmlHttpRequest();
            //step2 发送请求
            xhr.open(‘post‘,‘checkName‘,true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //注册监听器
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt=xhr.responseText;
                        document.getElementById("err").innerHTML=txt;
                    }
                }
            }
            //发送请求
            xhr.send("name="+name);
        }
比较一下有什么不同
nodejs：
var express=require(‘express‘);
var app=express();
var querystring=require(‘querystring‘)
app.listen(9000,‘localhost‘)
app.get(‘/login.html‘,function(req,res){
    res.sendfile(‘./login.html‘)
})
app.post(‘/checkName‘,function(req,res){
    req.on(‘data‘,function(data){
        var obj=querystring.parse(data.toString());
        if(obj.name==‘zhangsan‘){
            res.send(‘名字被占用了‘)
        }else{
            res.send(‘可以使用啊‘)
        }
    })
})