Ajax最主要的优势在于页面的请求以异步的方式发送到服务器。
Ajax核心是XMLHttpRequest对象,是浏览器与服务器的中间人。
兼容所有浏览器
<span style="font-size:18px;"> function getHTTPObject(){
if(typeof XMLHttpRequest == 'undefined'){
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
}</span>
- var request = new getHTTPObject();
- request.open("GET","example.txt",true);
- request.onreadystatechange = function(){if(request.readyState==4){........}}
- request.send(null);
0:未初始化,尚未调用open()方法
1:启动。已经调用了open()方法,但是没调用send()方法
2:发送。调用了send()方法但是没接收响应
3:接收。已经接收到了部分响应数据
4:完成。接收完了所有数据,并且可供客户端使用。
在接收响应后,响应的数据会自动填充XHR对象的属性(status),属性简介:
responseText:作为响应主题被返回的文本
responseXML:如果响应的内容类型为text/xml或者application/xml这个属性中将包含着响应数据的XML DOM文档
status:响应的HTTP状态
statusText:HTTP状态的说明
在接收响应后第一步就是检查status属性,以确定响应已经成功返回。
完整过程:
<span style="font-size:18px;">var request = new getHTTPObject();
request.onreadystatechange = function(){
if(request.readyState ==4){
if(request.status>=200&&request.status<300||request.status==304){
alert(request.responseText);
}else{
alert("数据返回成功"+request.status);
}
}
}
request.open("GET",url,true);
request.send(null);
</span>
这里的send()方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,必须传入null,因为这个参数对有些浏览器是必须的(未查到哪些浏览器需要保险起见还是加上null)。调用send()方法之后,请求就会被分派到服务器