如何进行javascript对XMLHttpRequest异步请求的面向对象封装

本篇文章给大家分享的是有关如何进行javascript对XMLHttpRequest异步请求的面向对象封装，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

 代码如下:

function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
CallBackObject.prototype.GetHttpObject = function() //动态为CallBackObject的原型添加了GetHttpObject共有方法
{
//第一步：创建XMLHttpRequest对象
//进行兼容性判断
var xmlhttp;

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属性将引发一个异常。

以上就是如何进行javascript对XMLHttpRequest异步请求的面向对象封装，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网VUE频道。