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