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;

上述例子中 a sync的选项如果为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 – 服务不可用

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