js学习笔记:Ajax

2016-11-24 08:27:41来源:CSDN作者:crystal6918人点击

Ajax,(Asynchronous JavaScript + XML),能够向服务器请求额外的数据而无需卸载页面。
Ajax技术的核心是XMLHttpRequest对象(简称XHR)。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以异步方式从服务器取得更多信息,意味着用户单击后可以不必刷新页面也能取得新数据。

XMLHttpRequest对象

大多数现代浏览器都支持原生的XHR对象,在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest构造函数:

var xhr = new XMLHttpRequest();

XHR的用法

open()

在使用XHR对象时,要调用的第一个方法是open(),它接收三个参数:

  • 要发送的请求类型,“get”、“post”等
  • 请求的URL
  • 表示是否异步发送请求的布尔值
xhr.open("get","example.php",false);

这行代码会启动一个针对example.php的GET请求。
要注意,调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。

send()

要发送特定的请求,必须调用send方法:

xhr.send(null);

send()方法接收一个参数,即要作为请求主体发送的数据。
如果不需要通过请求主体发送数据,必须传入null,因为这个参数对有些浏览器来说是必需的。
调用send之后,请求就会被分派到服务器。

由于这次请求是同步的,JavaScript代码会等到服务器响应之后再继续执行。在收到响应后,响应的数据会自动填充XHR对象的属性:

  • responseText:作为响应主体被返回的文本
  • responseXML:如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将保存包含着响应数据的XML DOM文档。
  • status:响应的HTTP状态
  • statusText:HTTP状态的说明

在收到响应后,第一步是检查status属性,以确定响应已经成功返回。一般来说,可以将HTTP状态代码200作为成功的标志。此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也应该能够访问了。
此外,状态代码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本。这也意味着响应是有效的。

为确保接收到适当的响应,应该像下面这样检查上述这两种状态代码:

xhr.open("get","example.php",false);xhr.send(null);if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){    alert(xhr.responseText);}else{    alert("request is unsuccessful:"+xhr.status);}

我们都应该通过检测status来决定下一步的操作。
不要依赖statusText,因为后者在跨浏览器时不太可靠。
另外,无论内容类型是什么,响应主体的内容都会保存到responseText中。而对于非XML数据而言,responseXML值将为null。

readyState

像前面这样发送同步请求当然没有什么问题,但是在多数情况下,我们还是要发送异步请求,才能让js继续执行而不必等待响应。此时,可以检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段:

  • 0:未初始化,尚未调用open()方法
  • 1:启动。已经调用open()方法,但尚未调用send()方法。
  • 2:发送。已经调用send()方法,但尚未接收到响应。
  • 3:接收。已经接收到部分相应数据。
  • 4:完成。已经接受到全部响应数据,而且已经可以在客户端使用了。

只要readyState的值由一个值变成另一个值,就会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。
通常,我们只对readyState值为4的阶段感兴趣,因为这时所有数据都已经就绪。
一般都在调用open()之前指定onreadystatechange事件处理程序:

var xhr = new XMLHttpRequest();xhr.onreadystatechage = function(){    if(xhr.status == 4){        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            alert(xhr.responseText);        }else{            alert("request is unsuccessful:"+xhr.status);        }    }}xhr.open("get","example.php",true);xhr.send(null);

abort()

在接收到响应之前还可以调用abort()方法来取消异步请求:

xhr.abort();

调用这个方法后,XHR对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。
在终止请求之后,还应该对XHR对象进行解引用操作。
由于内存原因,不建议重用XHR对象。

HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息,XHR对象也提供了操作这两种头部(请求头部和响应头部)信息的方法。
默认情况下,在发送XHR请求的同时,还会发送下列头部信息:

  • Accept:浏览器能够处理的内容类型
  • Accept-Charset:浏览器能够显示的字符集
  • Accept-Encoding:浏览器能够处理的压缩编码
  • Accept-Language:浏览器当前设置的语言
  • Connection:浏览器与服务器之间连接的类型
  • Cookie:当前页面设置的任何Cookie
  • Host:发出请求的页面所在的域
  • Referer:发出请求的页面的URI
  • User-Agent:浏览器的用户代理字符串

虽然不同浏览器实际发送的头部信息会有所不同,但以上列出的基本上是所有浏览器都会发送的。
使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接收两个参数:头部字段的名称和头部字段的值。
要成功发送请求头部信息,必须在调用open方法之后且调用send方法之前调用setRequestHeader()

xhr.open("get","example.php",true);xhr.setRequestHeader("myHeader","myValue");xhr.send(null);

服务器在接收到这种自定义的头部信息之后,可以执行相应的后续操作。

调用XHR对象的getResponseHeader()方法并传入头部字段名称,可以取得相应的响应头部信息。
而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。

在服务器端,也可以利用头部信息向浏览器发送额外的、结构化的数据。

GET请求

GET是最常见的请求类型,最常用于向服务器查询某些信息。
必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器。
对XHR而言,位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。

使用GET请求经常会发生的一个错误,就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL末尾;且所有名值对儿都必须由和号&分隔:

xhr.open("get","example.php?name1=value1&name2=value2",true);

POST请求

使用频率仅次于GET的POST请求,通常用于向服务器发送应该被保存的数据。
POST应该把数据作为请求的主体提交,而GET则不是。
POST请求的主体可以包含非常多的数据,而且格式不限。
在open方法的第一个参数位置传入“post”,就可以初始化一个post请求:

xhr.open("post","example.php",true);

发送POST请求的第二步就是向send()方法中传入某些数据。
默认情况下,服务器对POST请求和提交Web表单的请求并不会一视同仁。因此,服务器端必须有程序来读取发送过来的原始数据,并从中解析出有用的部分。
不过可以用XHR来模仿表单提交,这里不展开了。

XMLHttpRequest2级

XMLHttpRequest2级进一步发展了XHR,但并非所有浏览器都实现了。

FormData

现代web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest2为此定义了FormData类型。FormData为序列化表单以及创建于表单格式相同的数据提供了便利。
下面的代码创建了一个FormData对象,并向其中添加了一些数据。

var data = new FormData();data.append("name","nicholas");

这个append方法接收两个参数:键和值,分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。

而通过向FormData构造函数中传入表单元素,也可以用表单元素的数据预先向其中填入键值对:

var data = new FormData(document.forms[0]);

创建了FormData的实例之后,可以将它直接传给XHR的send()方法:

xhr.send(new FormData(form));

使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型时FormData的实例,并配置适当的头部信息。

超时设定

XHR有一个timeout属性,表示请求在等待响应多少毫秒之后就终止。
在给timeout设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件,进而会调用ontimeout事件处理程序。

xhr.open("get","example.php",true);xhr.timeout = 1000;xhr.ontimeout = function(){    alert("request didn't return in a second");}xhr.send(null);

这个例子设置timeout属性为1000毫秒,意味着如果请求在1秒钟内还没有返回,就会自动终止。请求终止时,会调用ontimeout事件处理程序。
而这时候readyState可能已经改变为4了,这意味着会调用onreadystatechange事件处理程序。但是,如果在超时中止请求之后再访问status属性,就会导致错误。
为避免浏览器报告错误,可以将检查status属性的语句封装在一个try-catch中。

overrideMimeType()方法

这个方法用于重写XHR响应的MIME类型。因为返回的MIME类型决定了XHR对象如何处理它,所以提供一种方法能够重写服务器返回的MIME类型是很有用的。
比如服务器返回的MIME类型是text/plain,但数据中实际包含的是XML。根据MIME,即使数据是XML,但是responseXML仍为null。通过调用overrideMimeType()方法,可以保证把响应当做XML而非纯文本来处理:

xhr.open("get","example.php",true);xhr.overrideMimeType("text/xml")xhr.send(null);

这个例子强迫XHR对象将响应当做XML而非纯文本来处理。
调用overrideMimeType()必须在send方法之前,才能保证重写响应的MIME类型。

进度事件

进度事件定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作,但目前也被其他API借鉴。
有以下6个进度事件:

  • loadstart:在接收到响应数据的第一个字节时触发
  • progress:在接收响应期间持续不断的触发
  • error:在请求发生错误时触发
  • abort:在因为调用abort()方法而终止连接时触发
  • load:在接受到完整的响应数据时触发
  • loadend:在通信完成或者触发error、abort或load事件后触发。

每个请求都从触发loadstart开始,接下来是一或多个progress事件,然后触发error、abort或load事件中的一个,最后以触发loadend事件结束。

目前还没有浏览器支持loadend事件。

load事件

响应接收完毕后将触发load事件,因此也没有必要去检查readyState属性了。
onload事件处理程序会接收一个event对象,其target属性就指向XHR对象实例,因而可以访问到XHR对象的所有方法和属性。
然而不是所有浏览器都为这个事件实现了适当的事件对象。结果开发人员还是要使用xhr对象:

xhr.onload = function(){    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            alert(xhr.responseText);        }else{            alert("request is unsuccessful:"+xhr.status);        }}xhr.open("get","example.php",true);xhr.send(null);

只要浏览器接收到服务器的响应,不管其状态如何,都会触发load事件。而这意味着你必须要检查status属性,才能确定数据是否真的已经可用了。

progress事件

progress事件会在浏览器接收新数据期间周期性地触发。
onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,但包含额外3个属性:

  • lengthComputable:表示进度信息是否可用的布尔值
  • position:已经接收的字符数
  • totalSize:根据Content-length响应头部确定的预期字节数。

有了这些信息,我们就可以为用户创建一个进度指示器了:

xhr.onprogress = function(){    var divStatus = document.getElementById("status");    if(event.lengthComputable){        divStatus.innerHTML = "Recieved"+event.position +"of" +event.totalSize +"bytes";    }}xhr.open("get","example.php",true);xhr.send(null);

为确保正常执行,必须在调用open()方法之前添加onprogress事件处理程序。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台