js ajax通用方法,JS—Ajax（初步使用）

Ajax

Asynchronous JavaScript XML

这一技术最早是用来向服务器端请求以xml这种结构表示的数据时，可以不用卸载页面，就能够向服务器端请求额外的数据。

但是现在呢，Ajax已经不局限于传递xml数据。因为xml操作起来太过复杂。

Ajax技术的核心是XMLHttpRequest(XHR)对象。该对象为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息。

新建XHR对象

IE中

IE5是第一款引入XHR对象的浏览器，(我有时候总抱怨IE8之前，后来有一种嫌弃糟糠之妻的罪恶感，我是不是不太适合做程序员？)

像创建XML DOM对象似的，这个也需要为ActiveXObject传递一个版本，来构造相应的对象。

其他浏览器

就是很简单的一句new+构造函数就可以。

偷懒，我就直接写原生js中Ajax XHR对象的跨浏览器创建。

function createXHR(){

var XHR=null;

if(typeof window.XMLHttpRequest !='undefined'){

XHR= new XMLHttpRequest();

}else if(typeof window.ActiveXObject !='undefined'){

if(arguments.callee.activeXString !='string'){

var versions=['MSXML2.XMLHttp.6.0','MSXML.XMLHttp.3.0','MSXML.XMLHttp'];

for(var i=0;i

try{

new ActiveXObject(versions[i]);

arguments.callee.activeXString=versions[i];

break;

}catch(ex){

//跳过

}

}

}

XHR= new ActiveXObject(arguments.callee.activeXString)

}else{

throw new Error('您的浏览器不支持XMLHttRequest!!')

}

return XHR;

}

特点：没啥特点，和创建跨浏览器的xml dom对象类似。

XHR对象的用法

使用XHR对象作为接口向服务器进行异步请求数据需要的步骤：

1、.open()

XHR.open('get','demo.txt?rand='+Math.random(),true);

//准备发送请求，以get方式请求，url是demo.txt,步

特点：该函数接收三个参数(要发送请求的类型，请求的URL，表示是否异步发送请求的布尔值)；注意到，在请求的URL内，向服务端数据传递了一个随机值，是因为，如果不传递，那么在第一次向服务器发出请求后，IE会在第二次请求时直接从缓存中读取。所以采用随机数的方法。

open方法只是准备发送请求，

2、.send()

XHR.send(null);

特点：该方法接收一个参数，表示即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，那么则必须传入null。不能不写这个必填参数。调用send之后，请求就会被分派到浏览器。

这个例子采用的是get方法，他向服务发送的数据，借助url实现，而如果采用post方法，那么就需要借助send方法来传递数据啦。

3、.resdyState

XHR.onreadystatechange=function(){

if(XHR.readyState==4){

}

}

同加载xml文件似的，对于异步请求，都需要为该对象添加一个监听事件，来判断，只有当客户端已经接收到全部响应数据时，才执行对文件的操作。

4、.status

在客户端接收到响应后，响应的数据会自动填充XHR对象的属性。

该属性内容包括

responseTest作为响应主体被返回的文本

responseXML 限制响应类型为text/xml是，才返回的文本

status响应的http状态

statusTextHTTP状态说明。

最经常用的就是第一个与第三个。

在接收到响应后，会先判断status的值，如果值为200，表示responseTest属性已经就绪。如果值为404则表示没有找到对应请求的数据。

if(XHR.status==200){

}else{

alert("获取数据错误！错误代号："+XHR.status+"错误信息："+XHR.statusText)

}

总的来写一下：

EventUtil.addHandler(document,'click',function(){

var XHR=createXHR();

XHR.onreadystatechange=function(){

if(XHR.readyState==4){

if(XHR.status==200){

alert(XHR.responseText)//打印服务器端返回的数据

}else{

alert("获取数据错误！错误代号："+XHR.status+"错误信息："+XHR.statusText)

}

}

}

XHR.open('get','demo.txt?rand='+Math.random(),true);

XHR.send(null);

});

每当用户单击页面便会触发事件，进而从服务器端异步获取数据，无需刷新整个页面。

.abort()取消异步

这个方法如果方法哦send之前会报错，因为已经取消异步啦，就没有要发送的东西啦。可以把他放在send()之后取消异步。