Ajax即异步(Asynchronous)JavaScript And XML。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
Ajax请求原理
Ajax即在浏览器客户端与服务器之间建立了一个引擎。它割断了客户端与服务器之间的直接关系。客户端发送的消息由引擎接收,然后由引擎去和服务器进行交互,直至处理完成。引擎收到结果返回给客户端。在处理期间,客户端可以等待处理,知道处理完成。即同步。也可以不等待处理,进行其他操作。即异步。如右图所示:
Ajax的对象
如果需要提起多个请求,需要创建多个XMLHttpRequest对象,XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。
- 对于Internet Explorer浏览器:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); //5.0以上版本,不包括5.0
- 对于Mozilla﹑Netscape﹑Safari等浏览器
xmlhttp_request = new XMLHttpRequest();
如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
- 创建通用的XMLHttpRequest方法
try{
if( window.ActiveXObject )
{
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
}else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
}
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312");
break;
}
catch(e){
xmlhttp_request = false;
}
}
}else if( window.XMLHttpRequest ){
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
}catch(e){ xmlhttp_request = false; }
引擎的5中状态
readyState的取值如下:
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下:
if (http_request.readyState == 4) {
// 收到完整的服务器响应
} else {
// 没有收到完整的服务器响应
}
使用Ajax技术需要清除缓存
具体有两种方法:
1、采用URl后跟上时间戳来防止浏览器缓存,如user_validate.jsp?userId="+userId+"×tampt="+new Date().getTime()
2、加入清除缓存代码,如:
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store"); //HTTP1.1
response.setHeader("Pragma","no-cache"); //HTTP1.0
response.setDateHeader("Expires",0);
一个完整例子
var req; //定义变量,用来创建xmlhttprequest对象
function creatReq() // 创建xmlhttprequest,ajax开始
{
var url="ajaxServer.aspx"; //要请求的服务端地址
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本),用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
if(req) //成功创建xmlhttprequest
{
req.open("GET",url,true); //与服务端建立连接(请求方式post或get,地址,true表示异步)
req.onreadystatechange = callback; //指定回调函数
req.send(null); //发送请求
}
}
function callback() //回调函数,对服务端的响应处理,监视response状态
{
if(req.readystate==4) //请求状态为4表示成功
{
if(req.status==200) //http状态200表示OK
{
Dispaly(); //所有状态成功,执行此函数,显示数据
}
else //http返回状态失败
{
alert("服务端返回状态" + req.statusText);
}
}
else //请求状态还没有成功,页面等待
{
document .getElementById ("myTime").innerHTML ="数据加载中";
}
}
function Dispaly() //接受服务端返回的数据,对其进行显示
{
document .getElementById ("myTime").innerHTML =req.responseText;
}