Ajax的XMLHttoRequest对象

前端之家收集整理的这篇文章主要介绍了Ajax的XMLHttoRequest对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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",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",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的两倍。

猜你在找的Ajax相关文章