Ajax的初步认识和封装

Ajax=异步JavaScript和XML（标准通用标记语言的子集）,是一种用于创建快速动态的网页技术，实现了局部刷新的功能，毫无疑问，这给用户带来的体验是很棒的，原理采用了异步访问技术，通过在后台与服务器进行少量的数据狡猾，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的部分进行更新。

让我们来理解同步和异步的区别和原理吧，我们都知道，在客户端向服务器传送数据一般用GET或者POST方式，假如同步传送的话，数据要经过序列化-->通讯协定-->实体传送-->同心协定-->序列化到服务器，然后等待服务器返回数据，此过程中客户端在等待服务器的返回数据，而异步访问则是：客户端还是要经过同步传送的几个步骤，但是客户端在等待服务器的数据时候还能做别的处理，当服务器返回数据时候，客户端被告知，然后立马回去处理从服务器返回的信息。这就是同步和异步的差别。

通过Ajax的文档，我们不难得出，使用Ajax的核心是XMLHttpRequest对象。该对象提供了对HTTP协议的完全访问，包括做出POST和HEAD以及普通的GET请求的能力。XMLHttpRequest可以同步或者异步返回Web服务器的响应，并且能以一个文本或者一个DOM文档形式返回内容。

使用步骤：

1：创建XMLHttpRequest实例：

var xmlHttp;
function createXMLHttpRequest() {
   if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
       xmlHttp = new XMLHttpRequest();  // Mozilla、Firefox、Safari 
}
   else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
   }
}

: 2：对外提供的请求方法：

2-1：//对外提供的请求方法:GET
function startRequest(urlString,handleStateChange) {
    createXMLHttpRequest(); // 建立非同步請求物件,建立连接
    xmlHttp.onreadystatechange = handleStateChange;  // 設定callback函式
    xmlHttp.open("GET", urlString);  // 開啟連結
    xmlHttp.send(null);  // 傳送請求
}

2-2：

function startRequestByPost(url,queryString,handleStateChange) {
createXMLHttpRequest(); // 建立非同步請求物件,建立连接
    xmlHttp.onreadystatechange = handleStateChange;  // 設定callback函式
xmlHttp.open("POST", url);
//"application/x-www-form-urlencoded":将请求参数放到http请求的实体部分
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString); 
}

这里稍微的提一下，两个方法的不同点，通过GET方法传送数据，是以明文显示在地址栏上的，而且长度不超过512字节，POST传输方式则是将参数放在http协议的实体中，理论上是没用长度限制的。

3：处理函数

 function handleStateChange()用来对从服务器返回数据的处理

Ajax的效果：