Ajax 异步加载机制基础

一、认识Ajax

Ajax  一种JavaScript  and XML 快速创建动态网页的技术，通过客户端与后台进行通信，与后台服务器进行少量的数据交互。ajax 实现页面的异步更新，即是说不需要重新加载页面就可以对页面的部分数据进行及时更新。Ajax的主要方式是XMLHttpRequest对象。

二、Ajax的使用

（1）xhr创建

由于ajax是基于XMLHttpRequest对象实现的，所以要创建XMLHttpRequest对象实例，用于和后台服务器交换数据。当然，jQuery已经将此对象及对应方法封装好了，极大的简化了与服务器数据交换的实现，这个jQuery实现ajax后面再说，先了解其原生js的实现机制：

1 <pre name="code" class="javascript">
2 <span style="font-family: Arial, Helvetica, sans-serif;">var xmlhttp;</span>
3 if(window.XMLHttpRequest){ //判断浏览器是否支持ajax
4  xmlhttp = new XMLHttpRequest; //创建XMLHttpRequest对象
5 }else{
6  xmlhttp = new ActiveXObject("Microsoft XMLHTTP");//IE5,IE6下的xhr
7 };

（2）xhr请求</span>

向服务器发送请求需要在创建好xhr对象之后调用其open()方法，打开数据传送并制定参数。再利用send（）方法发送出去。

xmlhttp.open(method,url,async);

规定请求的类型GET 或 POST、URL文件在服务器上的位置，以及是否异步处理请求。true（异步）或 false（同步）

xmlhttp.send();

(3)xhr响应
服务器针对请求作出响应，readyState 存储着XMLHttpRequest状态信息，当readyState改变时，就会触发onreadystatechange事件。

<pre name="code" class="javascript">
xmlhttp.onreadystatechange = function () {//onreadystatechange加载状态变化函数
   if(xmlhttp.readyState==4 && xmlhttp.status==200){
//alert("4-200");
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
};

xmlhttp.responseText;方法获取数据。如果请求的数据格式为XML，则利用xmlhttp.responseXML;方法获取数据集合，然后利用标签名获取文本值

getElementsByTagName("name")[0].firstChild.nodeValue；

还要自定义DOM，将数据显示到指定位置。