自己动手封装AJAX类

  大家好,我刚开通Blog,想和大家分享下东西..
  写得不好或者不对的地方,还望各位多多包含与指正..

 

  AJAX是个旧知识,新用法的东西..而网络上也已经有很多相关的文章了..
  现在想自己动手来写一下..
 整个封装类如下

 MarkAJAX.JS

 

var  MAJAX={     
          headers:{
          'Accept': 'application/xml, text/xml, text/html, text/javascript, application/javascript, application/json, text/javascript, text/plain, */*',
          'If-Modified-Since': 'Thu, 01 Jan 1970 00:00:00 GMT'
          },
          Try: function() {
                var returnValue;
                for (var i = 0, length = arguments.length; i < length; i++) {
                  var lambda = arguments[i];
                  try {
                    returnValue = lambda();
                    break;
                  } catch (e) { }
                }
                return returnValue;
          },
          isJSON:function(obj){
             var t=typeof(obj);
             if("object"==t)
             {
               try{
                return obj.toString()=="[object Object]";
               }catch(e){ return false;}
             }else
               return false;
          },

           /*创建参数对象,(整个封装类的比本使用集合在里面了)*/
          CreateParaObj:function(p){
              if(p==null || p=='undefined'){
                  return {"method":"post"  ,"url":null ,"async":true  ,"datatype":"json"  ,"data":null,"encoding":"utf-8"   ,"success":function(response,statu){},"onfail":function(statu){}};
              }
              else
              {
                  return {"method":p.method,"url":p.url,"async":p.async,"datatype":p.datatype,"data":p.data,"encoding":p.encoding,"success":p.success,"onfail":p.onfail};
              }
         },
         Transport: function() {
           return this.Try(
            function() { return new XMLHttpRequest() ;},
            function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
            function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
          ) || false;

         },
         Data2Url:function(data_){
           var re='';
              function subEncoding(data_,parent_)
              {
                 var data='';
                  var point=parent_+'.';
                  if(parent_=='undefined'||parent_==null)
                  {
                    point='';
                  }
                  if(data_!=null && data_!='undefined')
                  {
                     for(var o in data_)
                     {
                       if(MAJAX.isJSON(data_[o])){
                        data+=subEncoding(data_[o],o);
                       }else if(typeof(data_[o])=='function'){
                        data +=encodeURIComponent(point+o)+"="+encodeURIComponent(data_[o]())+"&";
                       }else{
                        data +=encodeURIComponent(point+o)+"="+encodeURIComponent(data_[o].toString())+"&";
                       }
                     }
                  }
                  return data;
              }
              re=subEncoding(data_);
              if(re.length>0) re=re.substring(0,re.length-1);
              return  re;
         },
         Post:function(p){
                var p_=MAJAX.CreateParaObj(p);
                p_.method="POST";
                return  this.$(p_);
         },
         Get:function(p){
                var p_=MAJAX.CreateParaObj(p);
                p_.method="GET";
                return  this.$(p_);
         },
         $:function(p_){
            var reqObj=MAJAX.Transport(); 
            var callback_=function(){
                if(reqObj.readyState == 4)
                {
                  if(reqObj.status<=400)
                  {
                      var re='';
                      var type_=p_.datatype.toLocaleLowerCase();
                      switch(type_)
                      {                   
                       case 'json':
                         try{re=eval("("+reqObj.responseText+")"); }
                         catch(ex){re={};}
                         break;
                       case 'xml':
                          re=reqObj.responseXML;
                          break;
                       default:
                          re=reqObj.responseText;
                          break;
                      }
                    
                      p_.success(re,reqObj.status); 
                  }
                  else p_.onfail(status);
                  delete reqObj;
                }};     
           reqObj.onreadystatechange=callback_;
           var myasync=(p_.async==true);
           var headers=MAJAX.headers;
           var querystring=(MAJAX.Data2Url(p_.data));//将
           var isFirefox=(document.all==null ||document.all=='undefined');
           if(p_.method=='undefined'||p_.method==''|| p_.method.toLocaleLowerCase()=='post')
           {
              reqObj.open ("POST", p_.url,myasync);
              reqObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"+((p_.encoding && p_.encoding!=null)?"; charset="+p_.encoding:''));
              reqObj.setRequestHeader("Connection", 'close');
              for(var o in headers)
              { reqObj.setRequestHeader(o,headers[o]);}
              reqObj.send(querystring);
              if(isFirefox){   callback_();}
           }
           else
           {
               var url_=p_.url;
               if(querystring!=null)
               {
                   url_ +=((url_.indexOf('?')>0)?querystring:'?'+querystring);
               }
               reqObj.open("GET",url_,myasync);
               if(p_.encoding && p_.encoding!=null) reqObj.setRequestHeader("Accept-Charset",p_.encoding);
               for(var o in headers)
               { reqObj.setRequestHeader(o,headers[o]);}
               reqObj.send();
               if(isFirefox) callback_();
           }
         
           return reqObj;
         }
        
     };

 

 

(1)支持JSON对象发送

(2)支持同步,异步发送(在IE8,Firefox3.6中测试通过)

(3)支持GET,POST模式发送

================================================================

 如下是客户端的调用方法:

 

    function PostAjax(IsAsync)
     {
         /* 这是我要发送的数据,我把它封装到json对象中来发送*/
         var contact={"Telephone":document.getElementById("telephone").value,"email":document.getElementById("email").value};
         var mydata={"username":document.getElementById("username").value,"pwd":document.getElementById("pwd").value ,"contact":contact};
        
        
         var p=CreatePara();
         //这里填写你要发送的信息,参数
         p.method="post";                                       //发送方式,默认为POST,(在$方式发送下该设置才有效果）
         p.url="Services/HandlerPostJSON.ashx";    //接受地址
         p.async=IsAsync;                                        //是否异步,默认为true
         p.datatype="json";                                     //返回数据类型,是json还是其他数据类型json,xml,text
         p.data=mydata;                                          //数据实体,
         p.encoding="utf-8";                                    //发送数据编码方式
         p.success=OnSuccess;                               //当成功返回时候触发的函数
         p.onfail=function(statu){alert("错误");};    //当错误发生时触发的函数
         MAJAX.$(p);                                                //有3种方式发送，Post(p),Get(p),$(p)
        
     }

 

 

   function OnSuccess(response,statu)
     {
       var re="==========这是json模式返回的数据（同时反映了在后台接收数据的模式）========= /n";
       for(var o in response)
       {
         re +=(o+"="+response[o]+" /n");
       }
       alert(re);
     }

 ===================================================================

后台接收数据代码如下:

public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";
        string username = context.Request.Form["username"];
        string password = context.Request.Form["pwd"];
        string contact_telephone = context.Request.Form["contact.telephone"];//因为这里post的是json中json数据所以这样来读取
        string contact_email     = context.Request.Form["contact.email"];

        System.Threading.Thread.Sleep(5000);   //这里方便异步调试

        string json_str = "{";
        json_str += "/"username/":/"" + username+ "/",";
        json_str += "/"pwd/":/"" + password + "/",";
        json_str += "/"contact.telephone/":/"" + contact_telephone + "/",";
        json_str += "/"contact.email/":/"" + contact_email + "/"";
        json_str +=  "}";
        context.Response.Write( json_str);

}

 

 附件改天在上传,要是转载请保留下我的个人信息,多谢合作