你所在位置:首页Javascript开发 → Ajax初解(一)

Ajax初解(一)

发布时间:2019-06-12

做WEB开发的,多多少少都会涉及一些前端知识,比如JS、HTML、CSS等等。功能比较多的WEB应用交互相对来说复杂度都会高一些,为了提升用户体验,常常会用到Ajax技术进行数据通信。虽然在平时的工作中已经用到过很多次Ajax,但是都只是浅尝辄止,对于其实现机制没有一个的了解,因此准备整理资料,深入学习一下这部分内容。
今天主要整理一下如何发送一个Ajax请求。

XMLHttpRequest对象
这是一个JS的内置对象,也是Ajax的核心所在。通过该对象可以实现客户端与服务端的异步通信,在不阻塞用户的情况下,实现数据请求与处理。其处理依据为一个状态码readyState,其范围为[0,4]。

创建
创建一个XMLHttpRequest对象的过程因浏览器实现的不同而有所区别。如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样模薎E 5和IE 6之外),那么,代码可以调用XMLHttpRequest的构造器。如果浏览器把XMLHttpRequest对象实现为一个ActiveXObject对象(就象在IE 5和IE 6中一样),那么,代码可以使用ActiveXObject的构造器。
[javascript]
var xmlHttpReq; 
function createXMLHTTPRequest () { 
<span style="white-space:pre">    </span>if(window.ActiveXObject){  
<span style="white-space:pre">        </span>xmlHttpReq = new ActiveObject("Microsoft.XMLHTTP");  
<span style="white-space:pre">    </span>} else if(window.XMLHTTPRequest){ 
<span style="white-space:pre">        </span>xmlHttpReq = new XMLHTTPRequest(); 
<span style="white-space:pre">    </span>} 
}; 

发送请求
发送请求的时候,需要注意XMLHttpRequest对象的几个方法与属性:
open:初始化XMLHttpRequest对象
onreadystatechange:注册状态变更处理函数
send:发送请求
[javascript]
function sendRequest () { 
<span style="white-space:pre">    </span>xmlHttpReq = createXMLHTTPRequest(); 
    xmlHttpReq.open("GET", "validateFormcatalogId=" + catalogId, true); 
    // 注册状态值改变时的处理函数  
    xmlHttpReq.onreadystatechange=processRequest; 
    // 发送请求 
    xmlHttpReq.send(null); 
}; 

处理结果
在上一步中,我们注册了一个函数processRequest用于当状态值发生变更时调用,这个函数主要的作用就是通过状态值确认请求是否成功处理返回,然后解析返回结果,进行后续操作:
[javascript]
function processRequest () { 
<span style="white-space:pre">    </span>if(xmlHttpReq.readyState == 4){ 
  <span style="white-space:pre">      </span>if(xmlHttpReq.status == 200){ 
<span style="white-space:pre">            </span>var msg=xmlHttpReq.responseXML; 
<span style="white-space:pre">            </span>var textt = xmlHttpReq.responseText; 
<span style="white-space:pre">            </span>// TO DO<span style="white-space:pre">       </span> 
<span style="white-space:pre">        </span>} 
<span style="white-space:pre">    </span>} 
}; 
至此,一个Ajax请求就完成了。

使用jQuery框架发送Ajax请求
上述方法发送Ajax请求是比较繁琐的,因此,目前大部分情况下,我们都是采用jQuery的Ajax支持来实现异步请求,代码相当简洁:
[javascript]
$.ajax(settings); 
这里就不再赘述了,具体使用方法参考jQuery的API文档。

 

 

摘自 xinsheng2011


上一篇:JavaScript继承详解(一)
下一篇:后台引用Javascript和Css类