• 分享个自己的ajax封装


          工作了也两年了,因为认真研读过  professional javascript for web developers 一书的翻译版,一直自以为自己js水平可以,因此工作中对于很多的js框架很不感冒,尽管也研究过这些框架,也认为确实很强大。自己工作中的遇到的就弄个自己的简单的实现,这个ajax的封装也主要代码是来自 professional javascript for web developers ,只是做了一些处理,对于应付自己工作的需求已是足够了。

           首先,先展示一下怎样调用

    //定义回调函数
     function handleresponse(XMLHTTP)
     {
      if (XMLHTTP.readyState == 4) {
         var response = XMLHTTP.responseText;
            //  这里写自己的处理程序
         }
       }
     }
      function checktext(obj)
      { 
         var url = "../Ashx/test.ashx";
         customAjax("get",url,["title"],[obj.value],handleresponse);
      }

           说明一下,customAjax就是封装的对外提供的调用方法,第一参数是提交数据的方式,get或者post;第二个是提交的地址;第三个和第四个是数组,是要提交数据,第一个数组装键,后一个装值,必须相对应;最后一个就是回调函数了,自己定义。

           调用还不算太麻烦,可能看来不太面向对象而已,不太习惯。

          下面上代码:

    //  创建xmlhttp对象
    function CreateXMLHTTP()
    {
       var XMLHTTP;
       if(window.ActiveXObject)
       {
           var arrSignature = ["MSXML2.XMLHTTP.6.0",“MSXML2.XMLHTTP.5.0",”MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsot.XMLHTTP"];
           for(var i=0;i<arrSignature.length;i++)
             {
                 try
                 {
                 XMLHTTP = new ActiveXObject(arrSignature[i]);
                 return XMLHTTP;
                 }
                 catch(oException)
                 {
                 }
            }
           throw new Error("MSXML is not installed on your IE.");
       }
       else if(window.XMLHttpRequest)
       {
            XMLHTTP = new XMLHttpRequest();
            return XMLHTTP;
       }
    } 
    function addGETParam(sUrl,sParamName,sParamValue)
    {
       sUrl += ( sUrl.indexOf("?") == -1 ? "?" : "&");
       sUrl += escape(sParamName) + "=" + escape(sParamValue);
       return sUrl;
    }
    function addPOSTParam(sParams,sParamName,sParamValue)
    {
       sParams += ( sParams.length > 0 ? "&" : "" );
       sParams += escape(sParamName) + "=" + escape(sParamValue);
       return sParams;
    }
    //  主要的方法
    function customAjax(sType,sUrl,arrParamName,arrParamValue,funStateChange)
    {
        var XMLHTTP = CreateXMLHTTP();   
        var sParams = "";
        if( arrParamName instanceof Array && arrParamValue instanceof Array)
        {
           if(arrParamName.length == arrParamValue.length)
           {
                if(sType.toLowerCase() == "get")
                {
                   sParams = null;
                  for(var i=0;i<arrParamName.length;i++)
                     sUrl = addGETParam(sUrl,arrParamName[i],arrParamValue[i]);
                }
                else if(sType.toLowerCase() == "post")
                {
                    for(var i=0;i<arrParamName.length;i++)
                         sParams = addPOSTParam(sParams,arrParamName[i],arrParamValue[i]);
                }
             }   
           else
           {
              throw new Error("Two parma Array's length is not same.");
           }
        }
        else
        {
           throw new Error("The third and fourth param must be Array.");
        }
        XMLHTTP.open(sType.toUpperCase(),sUrl,true);
        if(funStateChange instanceof Function)
       { 
           XMLHTTP.onreadystatechange =  function(){funStateChange(XMLHTTP);}  }
        else
        { throw new Error("the last param must be Function."); }
        XMLHTTP.send(sParams);            
    }

         就是这么多,还不少,有一点要说是

    ["MSXML2.XMLHTTP.6.0",“MSXML2.XMLHTTP.5.0",”MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsot.XMLHTTP"]

         在支持ie标准的浏览器上,有的电脑有可能会弹出让你加载MSXML2.XMLHTTP.6.0的提示,因为你的浏览器可能没有加载这个控件;如果你对自己的网站在用户电脑上这个提示不能容忍,那就把这个版本的检测从这个数组中删除,一般情况下,删除到4.0时,IE浏览器就不会有加载的提示了。如果你还不放心,仍可以继续删除到只剩下Microsot.XMLHTTP,其中jquery-1.3.2就是这样,以下是这个版本的jquery代码:

    xhr:function(){
    return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    		},

    当然你如果嫌上面的创建过程太烦琐,也可以采用jquery这种方式。

  • 相关阅读:
    信息技术手册查重错误比对分析程序开发记录04
    信息技术手册查重错误比对分析程序开发记录03
    信息技术手册查重错误比对分析程序开发记录02
    第一周博客01——设计模式原则总结
    react 性能优化
    h5 rem js自动适配
    JavaScript深拷贝实现原理简析
    word,excel,ppt在线预览功能
    react-route4 学习记录
    README 语法记录
  • 原文地址:https://www.cnblogs.com/forcertain/p/1944531.html
Copyright © 2020-2023  润新知