//GetHttpObject方法的作用是初始化XMLHttpRequest对象
function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
/*名词解释:
修饰符: (原型)prototype
解 释: 使用原型对象的属性来创建继承属性和共享方法.
原型属性和方法将采用引用的方式复制给类中的每个对象,他们都具有相同的值,
可以在一个对象中, 更改原型属性的值,新的值将覆盖默认值
*/
//函数名:GetHttpObject();
//作 用 1 : 创建XmlHttpRequest对象
//作 用 2 : 判断浏览器类型
CallBackObject.prototype.GetHttpObject = function()
{
var xmlhttp;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
if (window.ActiveXObject)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
}
else
{
alert("不能创建XmlHttpRequest对象!浏览器不支持");
return xmlhttp;
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
return xmlhttp;
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
//函 数 名:DoCallBack();
//作 用 1 :向指定的URL发送请求,
//作 用 2 :并且委托ReadyStateChange()函数去处理XmlHttpRequest对象状态变化
CallBackObject.prototype.DoCallBack = function(URL)
{
if( this.XmlHttp )
{
if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
{
var oThis = this;
this.XmlHttp.open('POST', URL);
this.XmlHttp.onreadystatechange = function() { oThis.ReadyStateChange(); };
this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
this.XmlHttp.send(null);
}
}
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
//函 数 名:AbortCallBack();
//作 用:停止当前的请求
CallBackObject.prototype.AbortCallBack = function()
{
if( this.XmlHttp )
{
this.XmlHttp.abort();
}
}
创建一个显示Loading的Div层
var div;
//函 数 名:OnLoading();
//作 用:XmlHttpRequest对象的状态为1(正在加载)
CallBackObject.prototype.OnLoading = function()
{
div = document.createElement("DIV");
div.id = "div_TiShi";
div.innerHTML = '正在加载,请稍后.....';
div.onmousedown=function() {moveit(this)};
div.style.backgroundColor="yellow";
document.body.appendChild(div);
}
//函 数 名:OnLoading();
//作 用:XmlHttpRequest对象的状态为2(已加载)
CallBackObject.prototype.OnLoaded = function()
{
div.style.display="none";
//window.alert('XmlHttpRequest对象已经加载...');
}
//函 数 名:OnInteractive();
//作 用:XmlHttpRequest对象的状态为3(交互中)
CallBackObject.prototype.OnInteractive = function()
{
//window.alert('交互中...');
}
//函 数 名:OnComplete();
//作 用:XmlHttpRequest对象的状态为4(已经完成)
CallBackObject.prototype.OnComplete = function(responseText, responseXml)
{
}
//函 数 名:OnAbort();
//作 用:停止当前的请求
CallBackObject.prototype.OnError = function(status, statusText)
{
// Error
window.alert('错误的XmlHttpRequest对象状态!');
}
//函 数 名:ReadyStateChange()
//作 用: 用于判断XmlHttpRequest对象的状态码,分别进行处理
CallBackObject.prototype.ReadyStateChange = function()
{
if( this.XmlHttp.readyState == 1 )
{
this.OnLoading();
}
else if( this.XmlHttp.readyState == 2 )
{
this.OnLoaded();
}
else if( this.XmlHttp.readyState == 3 )
{
this.OnInteractive();
}
else if( this.XmlHttp.readyState == 4 )
{
if( this.XmlHttp.status == 0 )
{
this.OnAbort();
alert('XmlHttpRequest对象尚未初始化!');
}
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);
}
}
}
根据不同的请求,和具体的异步交互,再对应的作修改.
下一次将用这个框架实现一个"加减乘除的简单计算",代码整理中......