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的效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!