当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > javascript对XMLHttpRequest异步请求的面向对象封装

AJAX技术
AJAX 用户注册时的应用实例
ajax readyState的五种状态详解
php AJAX POST的使用实例代码
Ajax 用户名验证是否存在
Ajax+PHP简单基础入门实例教程
AJAX 异步传输数据的问题
ASP AJAX 静态分页
js装载xml文件然后发向服务器的实现代码
完成了AJAX树附原理分析
AJAX 支持搜索引擎问题分析
ajax Suggest类似google的搜索提示效果
Ajax 框架学习笔记
用ajax xml的数据读取的HelloWorld程序
Ajax 表单验证 实现代码
Ajax request response 乱码解决方法
AJAX 随记
ajax 乱码的一种解决方法
ajax session过期问题的几个解决方案
四步学会 Ajax
Ajax异步(请求)提交类 支持跨域

AJAX技术 中的 javascript对XMLHttpRequest异步请求的面向对象封装


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 193 ::
收藏到网摘: n/a

对XMLHttpRequest异步请求的面向对象封装,需要的朋友可以参考下。
复制代码 代码如下:

function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
CallBackObject.prototype.GetHttpObject = function() //动态为CallBackObject的原型添加了GetHttpObject共有方法
{
//第一步:创建XMLHttpRequest对象
//进行兼容性判断
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
CallBackObject.prototype.DoCallBack = function(URL)
{
if( this.XmlHttp )
{
if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
{
var oThis = this;
//第二步:注册回调方法,当服务器处理结束返回数据以后利用回调方法实现局部的页面刷新数据
//这个回调方法实际上在每次XMLHttpRequest对象的readyState属性的值发生变化的时候都会被调用
this.XmlHttp.onreadystatechange = function() {
//根据XmlHttp.readyState返回值不同调用不同的方法。
oThis.ReadyStateChange();
};
//第三步:设置和服务器交互的相应参数
this.XmlHttp.open('POST', URL);
this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//第四步:设置向服务器发送的数据,启动和服务器端交互
this.XmlHttp.send(null);
}
}
}
CallBackObject.prototype.AbortCallBack = function()
{
if( this.XmlHttp )
this.XmlHttp.abort();
}
CallBackObject.prototype.ReadyStateChange = function() {
//第五步:判断和服务器交互是否完成,还要判断服务器端是否正确返回数据
//this.XmlHttp.readyState == 0初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
if (this.XmlHttp.readyState == 1) {
//open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
this.OnLoading();
}
else if (this.XmlHttp.readyState == 2) {
//Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
this.OnLoaded();
}
else if (this.XmlHttp.readyState == 3) {
//Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
this.OnInteractive();
}
else if (this.XmlHttp.readyState == 4) {
//Loaded HTTP 响应已经完全接收。
if (this.XmlHttp.status == 0)
this.OnAbort();
else if (this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK")
this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
else
this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);
}
}
CallBackObject.prototype.OnLoading = function()
{
// Loading
}
CallBackObject.prototype.OnLoaded = function()
{
// Loaded
}
CallBackObject.prototype.OnInteractive = function()
{
// Interactive
}
CallBackObject.prototype.OnComplete = function(responseText, responseXml)
{
// Complete
}
CallBackObject.prototype.OnAbort = function()
{
// Abort
}
CallBackObject.prototype.OnError = function(status, statusText)
{
// Error
}

调用方法如下:
复制代码 代码如下:

<script type="text/javascript">
function createRequest()
{
var name = escape(document.getElementById("name").value);
var cbo = new CallBackObject();
cbo.OnComplete = Cbo_Complete;
cbo.onError = Cbo_Error;
cbo.OnLoaded = OnLoading;
cbo.DoCallBack("AjaxTest.aspx?name=" + name);
}
function OnLoading() {
alert("OnLoading " );
}
function Cbo_Complete(responseText, responseXML)
{
alert("成功 "+responseText);
}
function Cbo_Error(status, statusText, responseText)
{
alert(responseText);
}
</script>

onreadystatechange事件
  无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。
  responseText属性
  这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
  responseXML属性
  此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
  其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。
  status属性
  这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
  statusText属性
  这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。