• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    javascript对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属性将引发一个异常。
    您可能感兴趣的文章:
    • javascript XMLHttpRequest对象全面剖析
    • js判断IE6/IE7/FF的代码[XMLHttpRequest]
    • Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
    • javascript创建createXmlHttpRequest对象示例代码
    • 深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
    • JSP XMLHttpRequest动态无刷新及其中文乱码处理
    • JavaScript下通过的XMLHttpRequest发送请求的代码
    • javascript一个无懈可击的实例化XMLHttpRequest的方法
    • [js]轻便的XMLHttpRequest应用函数:downloadUrl()
    • AngularJS入门教程之 XMLHttpRequest实例讲解
    • JS XMLHttpRequest原理与使用方法深入详解
    上一篇:javascript ajax功能函数
    下一篇:一个AJAX类代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    javascript对XMLHttpRequest异步请求的面向对象封装 javascript,对,XMLHttpRequest,