Ajax的初步认识和封装

前端之家收集整理的这篇文章主要介绍了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的效果

猜你在找的Ajax相关文章