ajax的原理及使用

ajax并非是一门新的技术，而是现有技术的一种新的组合用法，即是结合异步javascript和XML，它是一种创建快速动态网页的技术。其中，异步javascript是相对于同步而言的，同步模式通常称为阻塞模式，即它会停止浏览器的后续解析，可想而知异步就是在浏览器下载js的同时，继续执行后续页面处理。接下来开始了解一下ajax的原理。

       XMLHttpRequest 

    XMLHttpRequest对象是用于在后台和数据库之间交换数据的，它能够在不重新加载页面的情况下更新页面，页面已经加载之后能够请求和接收服务器的数据，还能够在后台向服务器发送数据。并且它被所有现在浏览器所支持。

    创建XMLHttpRequest的方式也很简单，现在浏览器中：

     

     xmlhttp = new XMLHttpRequest();

    在老版本的浏览器中（IE6/IE5）：

    

     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    ​为了让代码兼容所有的浏览器（包括IE6、IE5），将代码修改如下：

     var xmlhttp;
     if(window.XMLHttpRequest){
         // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp=new XMLHttpRequest();
     }else{
         // code for IE6/IE5
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

     向服务器端发送请求

     发送请求一共有两个方法：open()和send()；

     open()方法一共有三个参数，格式如下：

     xmlhttp.open(method,url,async);

    参数的含义：

    method:发送数据的方式，一共有两种，get
和 post.get速度快，大多数情况之下都选用get,但可传数据有限并且会显示在url之中，安全性能方面不是很好；post相较get方法速度稍慢，但安全性高，且可传的数据量大得多；

    url:发送的目标，即文件在服务器上的位置。该文件可以为任意类型，.txt/.xml或者脚本.php等等；

    async:true（异步）/false（同步）。

    send()方法只有一个参数，且为可选，有参数的情况下必为post的请求方式。

    xmlhttp.send(string);

这里举一个简单的例子：

    xmlhttp.open("GET","demo_get.php?name=admin&name=123",true);
    xmlhttp.send();

    服务器响应

   上一步向服务器发送请求，那么接下来无疑就是服务器的响应了。

    服务器响应需要通过XMLHttpRequest的responseText()或responseXML()来获取。它们都能获取响应数据，只是返回的数据格式不同。responseText()返回的是文本格式的数据，responseXML()返回的是xml格式的数据。如果需要将返回的数据显示到页面上，分别需要如下操作：

responseText()：
    document.getElementById('dataShow').innerHTML=xmlhttp.responseText();
responseXML()：
    xmlDoc=xmlhttp.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("data");
    for (i=0;i<x.length;i++){
        txt=txt + x[i].childNodes[0].nodeValue + "<br />";
    }
    document.getElementById("dataShow").innerHTML=txt;

上述例子中async的选项如果为false,即选择的是同步方式。那么整个的请求与响应以及显示的过程如下：

    xmlhttp.open("GET","demo_get.php?name=admin&name=123",true);
    xmlhttp.send()
    document.getElementById("dataShow").innerHTML=xmlhttp.responseText;

但是上述选项为true,即选择的是异步方式，则整个请求响应过程如下所示：

    xmlhttp.open("GET","demo_get2.php?name=bob&name=456",true);
    xmlhttp.send()
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("dataShow").innerHTML=xmlhttp.responseText;
        }
    }  

    客户端发送了一个请求之后，并不知道服务器端什么时候完成这个请求，所以需要有一个能够捕获该请求的状态，上述代码中的onreadystatechange事件就是能够完成这个功能的一个事件。onreadystatechange事件可以根据readystate的状态来指定一个回调函数，使之在不同的状态有不同的处理。

    readystate一共有5中取值：

    0: 请求未初始化

    1: 服务器连接已建立

    2: 请求已接收

    3: 请求处理中

4: 请求已完成，且响应已就绪  

在判断条件（xmlhttp.readyState==4&&xmlhttp.status==200）中除了readystate之外还有status状态的查询，status又表示什么含义呢？

    status常见的状态码:

    HTTP: Status 200 – 服务器成功返回网页,服务器已成功处理了请求.通常，这表示服务器提供了请求的网页。

    HTTP: Status 404 – 请求的网页不存在

    HTTP: Status 503 – 服务不可用

因此，上述的判断条件是当客户端请求完成且服务器端成功处理了请求并成功返回网页，在这些条件下，将返回的数据显示到页面。