注册 登录

清河洛

Ajax的简单介绍和处理

qingheluo2016-12-16清河洛273
一.XMLHttpRequest:Ajax技术核心是XMLHttpRequest对象(简称XHR)这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据虽然Ajax中的x代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术不一定使用XML。IE7+、Firefox、Opera、Chrom...

一.XMLHttpRequest:Ajax技术核心是XMLHttpRequest对象(简称XHR)

这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现

在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架

XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据

虽然Ajax中的x代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术不一定使用XML。

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象,在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可

var xhr = new XMLHttpRequest();

在使用XHR对象时,先必须调用open()方法,它接受三个参数

要发送的请求类型(get、post)
请求的URL(请求文件必须是同一个域名下的)
是否异步
一般情况下URL后面附加一个时间戳(也可以是别的,但是要求每次的请求的参数值都不一样),目的就是每次请求的参数不一样,这样可以避免浏览器缓存

xhr.open('get', 'demo.php', false); //对于demo.php的get请求,false同步

open()方法并不会真正发送请求,而只是启动一个请求以备发送。

通过send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据。如果不需要则,必须填null

执行send()方法之后,请求就会发送到服务器上。

xhr.send(null); //发送请求

当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性。一共有四个属性:

responseText:作为响应主体被返回的文本
responseXML:如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的XML DOM文档
status:响应的HTTP状态
statusText:HTTP状态的说明

接受响应之后,第一步检查status属性,以确定响应已经成功返回。一般会把HTTP状态代码为200或304作为成功的标志

我们判断HTTP状态值即可,不建议使用HTTP状态说明,因为在跨浏览器的时候,可能会不太一致

同步调用虽然简单,但使用异步调用才是我们真正常用的手段

使用异步调用的时候,需要触发readystatechange事件,然后检测readyState属性即可。这个属性有五个值:

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

xhr.send(null);
xhr.onreadystatechange=function(){

if (xhr.readyState==4 && xhr.status==200){}

}

使用abort()方法可以取消异步请求,放在send()方法之前会报错。放在responseText之前会得到一个空值

二.获取响应头信息

使用getResponseHeader()获取单个响应头信息

alert(xhr.getResponseHeader('Content-Type'));

使用getAllResponseHeaders()获取整个响应头信息

alert(xhr.getAllResponseHeaders());

使用setRequestHeader()设置单个请求头信息

xhr.setRequestHeader('MyHeader', 'Lee');//放在open方法之后,send方法之前

我们只可以获取服务器返回回来响应头信息,无法获取向服务器提交的请求头信息,自然自定义的请求头,在JavaScript端是无法获取到的。

三.GET与POST:在提供服务器请求的过程中,有两种方式,分别是:GET和POST。在Ajax使用的过程中,GET的使用频率要比POST高。

GET请求:GET请求是最常见的请求类型,最常用于向服务器查询某些信息。

通过URL后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理,中文字符的返回及传参,可以讲页面保存和设置为utf-8格式即可

当没有encodeURIComponent()方法时,在一些特殊字符比如“&”,会出现错误导致无法获取

POST请求:POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的POST传输方式

发送POST请求的数据,不会跟在URL的尾巴上,而是通过send()方法向服务器提交数据

xhr.send('name=Lee&age=100');

一般来说,向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

从性能上来讲POST请求比GET请求消耗更多一些,用相同数据比较,GET最多比POST快两倍



网址导航