Ajax在我们的网页中无处不在,我们平常开发中也都会使用Ajax,可是我们对它的认识又有多少啦,又有多少人知道它的全名,又有多少人会把它当成阿贾克斯
Ajax的由来
2005年,Jesse James Garrett 介绍了一种技术,用他的话说就叫Ajax,是对Asynchronous JavaScript+XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验。这一技术改变了自WEB诞生以来就一直沿用的"单击“,“等待的交互模式”;
XMLHttpRequest对象
Ajax技术的核心是XMLHttpRequest对象(简称XHR),在IE5中,XHR对象时通过MSXML库中的一个ActiveX对象实现的。因此IE中会有三种不同版本的XHR对象,即MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0;
创建XHR对象
function createXHR(){ if(typeof arguments.callee.activeXString!="string"){ var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i,len; for(i=0,len=versions.length;i<len;i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXString=versions[i]; break; }catch(ex){ } } } return new ActiveXObject(arguments.callee.activeXString); } var xhr=createXHR();
在IE7和火狐谷歌等主流浏览器里可以直接创建
var xhr2=new XMLHttpRequest();
XHR的用法
在使用XHR对象时,要调用的第一个方法是open(),它接受3个参数,要发送的请求类型("get","post"),请求的URL和表示是否异步发送请求的布尔值。
var xhr2=new XMLHttpRequest(); xhr2.open("get","login.do",false);
这段代码会发送一个路径为login.do的get请求,这里的URL可以是相对于执行代码的页面路径,也可以是绝对路径,调用open()方法并不会发送真正的请求,而只是启动一个请求,以备发送,如果要发送请求的话可以调用send()方法。
var xhr2=new XMLHttpRequest(); xhr2.open("get","login.do",false); xhr2.send();
这里send可以传入一个参数,作为我们的请求参数发送过去,当我们请求发送完成后,会填充我们的XHR,得到一些响应,这里介绍几个主要的
responseURL:请求的URL绝对路径地址
Status:返回的响应状态,比较出名的有200成功,400找不到路径,405参数或者类型不匹配,500服务器错误
responseURL:请求的URL绝对路径地址
timout:响应时间
response:响应信息
responseText:响应主体返回的文本内容
如果是发送异步请求的话,我们可以检测XHR对象的readyState属性,该属性表示响应过程中的活动阶段
0:未初始化,尚未调用open()方法。
1:启动。已经调用open()方法,但尚未调用send()方法。
2:发送。已经调用send()方法,但是尚未接收到响应。
3:接收。已经接收到部分响应数据。
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange时间。
HTTP头部信息
每个HTTP请求和响应都会带有对应的头部信息,XHR对象也提供了操作这两种头部(即请求头部和响应头部)信息的方法。
Host 请求的域名
User-Agent 浏览器端浏览器型号和版本
Accept 可接受的内容类型
Accept-Language 语言
Accept-Encoding 可接受的压缩类型 gzip,deflate
Accept-Charset 可接受的内容编码 UTF-8,*
服务器端的响应Header(response header)
Date 服务器端时间
Server 服务器端的服务器软件 Apache/2.2.6
Etag 文件标识符
Content-Encoding传送启用了GZIP压缩 gzip
Content-Length 内容长度
Content-Type 内容类型
GET请求
GET请求和POST的请求的具体区别,我在一篇文章里面已经讲过,这里就不说了,具体说一下对XHR而言,位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。在传入的时候使用decodeURIComponent() 进行编码,在服务器接收的时候再使用这个函数解码。
function get(){ //获取xhr对象 var xhr = getXhr(); //规定请求类型 //url var url=encodeURIComponent("login.do?username=123"); xhr.open("get",url,true); //发送请求 xhr.send(); //处理服务器响应事件 xhr.onreadystatechange = function (){ //判读是否处理完毕 与判读服务器是否处理成功! if(xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText); } } } }
POST请求:
默认情况下,服务器对POST请求和提交Web表单的请求并不会一视同仁。因此,服务器端必须有程序来读取发送过来的原始数据,并从中解析成有用的部分,不过我们可以使用XHR来模仿表单提交。
function post(){ //获取xhr对象 var xhr = getXhr(); //规定请求类型 xhr.open("post","login.do",true); //设置头信息 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //发送参数 xhr.send("username=345&pass=123"); //相应事件处理 xhr.onreadystatechange = function (){ //判读是否处理完毕 与判读服务器是否处理成功! if(xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText); } } }
注意:
设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
与get请求相比,POST请求消耗的资源会多一些,如果发送相同的数据,get的请求速度最多可以达到post的两倍。