实例讲解使用原生JavaScript处理AJAX请求的方法
Ajax是异步的JavaScript和XML的简称，是一种更新页面某部分的机制。它赋予了你从服务器获取数据后，更新页面某部分的权力，从而避免了刷新整个页面。另外，以此方式实现页面局部更新，不仅能有效地打造流畅的用户体验，而且减轻了服务器的负载。
下面是对一个基本的Ajax请求进行剖析：
varxhr=newXMLHttpRequest();
xhr.open('GET','send-ajax-data.php');
xhr.send(null);
在这里，我们创建了一个能向服务器发出HTTP请求的类的实例。然后调用其open方法，其中第一个参数是HTTP请求方法，第二个参数是请求页面的URL。最后，我们调用参数为null的send方法。假如使用POST请求方法（这里我们使用了GET），那么send方法的参数应该包含任何你想发送的数据。
下面是我们如何处理服务器的响应：
xhr.onreadystatechange=function(){
varDONE=4;//readyState4代表已向服务器发送请求
varOK=200;//status200代表服务器返回成功
if(xhr.readyState===DONE){
if(xhr.status===OK){
console.log(xhr.responseText);//这是返回的文本
}else{
console.log("Error:"+xhr.status);//在此次请求中发生的错误
}
}
}
onreadystatechange是异步的，那么这就意味着它将可在任何时候被调用。这种类型的函数被称为回调函数——一旦某些处理完成后，它就会被调用。在此案例中，这个处理发生在服务器。
示例
便捷的Ajax方法也是不少人依赖jQuery的原因，但实际上原生JavaScript的Ajaxapi也很强大，并且基本的使用在各个浏览器中的差异不大，因此完全可以自行封装一个Ajax对象，下面是封装好的Ajax对象：
//Ajax方法
//惰性载入创建xhr对象
functioncreateXHR(){
if('XMLHttpRequest'inwindow){
createXHR=function(){
returnnewXMLHttpRequest();
};
}elseif('ActiveXObject'inwindow){
createXHR=function(){
returnnewActiveXObject("Msxml2.XMLHTTP");
};
}else{
createXHR=function(){
thrownewError("Ajaxisnotsupportedbythisbrowser");
};
}
returncreateXHR();
}
//Ajax执行
functionrequest(ajaxData){
varxhr=createXHR();
ajaxData.before&&ajaxData.before();
//通过事件来处理异步请求
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(ajaxData.dataType=='json'){
//获取服务器返回的json对象
jsonStr=xhr.responseText;
json1=eval('('+jsonStr+')'),
json2=(newFunction('return'+jsonStr))();
ajaxData.callback(json2);
//ajaxData.callback(JSON.parse(xhr.responseText));//原生方法，IE6/7不支持
}else
ajaxData.callback(xhr.responseText);
}else{
ajaxData.error&&ajaxData.error(xhr.responseText);
}
}
};
//设置请求参数
xhr.open(ajaxData.type,ajaxData.url);
if(ajaxData.noCache==true)xhr.setRequestHeader('If-Modified-Since','0');
if(ajaxData.data){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(ajaxData.data);
}else{
??
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.send(null);
}
returnxhr;
}
functionpost(ajaxData){
ajaxData.type='POST';
var_result=request(ajaxData);
return_result;
}
functionget(ajaxData){
ajaxData.type='GET';
ajaxData.data=null;
var_result=request(ajaxData);
return_result;
}
下面给出一个使用例子：
index.html
<!DOCTYPEHTML>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<title>原生JavaScript实现Ajax</title>
<linkrel="stylesheet"type="text/css"media="all"href="./common/common.css"/>
<style>
#content{text-align:center;font-family:'lucidaGrande','MicrosoftYahei'}
#content.btn_ctr{display:block;width:120px;height:30px;margin:0auto20px;background:#53a7bb;color:#fff;font-weight:bold;font-size:14px;line-height:30px;text-decoration:none;
border-radius:4px;
}
#test{width:280px;height:130px;margin:0auto;padding:15px;background:#fff;border-radius:4px;text-align:left;}
</style>
</head>
<body>
<divid="header">
<divid="header-content">
<divid="header-inside">
<pclass="go-to-article"><ahref="http://kayosite.com/css3-animation.html"title="打开原文"target="_blank">BackToArticle</a></p>
<pclass="go-to-blog"><ahref="http://kayosite.com"title="进入我的博客Kayo'sMelody"target="_blank">MyBlog</a></p>
<pclass="copyright">DemoByKayo©Copyright2011-2013</p>
</div>
<h1>CSS3Animation</h1>
</div>
</div>
<divid="content">
<aclass="btn_ctr"href="javascript:;"onclick="get({url:'./ajax.html',callback:function(out){document.getElementById('test').innerHTML=out;}})">Ajax获取内容</a>
<divid="test"></div>
</div>
<script>
//Ajax方法，这里不在重复列出
</script>
</body>
</html>
ajax.html
<!DOCTYPEHTML> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <title>ajax</title> </head> <body> <p>成功获取到这段文本</p> </body> </html>
具体的效果可以浏览完整Demo。