您的位置:首页 > Web前端 > JavaScript

原生JS ajax框架代码

2016-04-23 15:24 691 查看
function AjaxCall(url,handleResponse,param){


    var isXML=false;//false:html or true:xml


    var isCache=false;//false:no-cache or true:cache


    var method="GET";//GET or POST


    if(param){


       re = / /g; 


       param=param.replace(re, "");


       var tmp=param.split(",");//extends param array


       for(var i=0;i<tmp.length;i++){


              var pa=tmp[i].substr(0,3);


              var ct=tmp[i].split("=")[1];


              switch (pa){


                  case "isX":


                  if(ct=="true"){


                      isXML= true; 


                  }else{


                      isXML= false; 


                  }


                  break;


                  case "isC":


                  if(ct=="true"){


                      isCache= true; 


                  }else{


                      isCache= false; 


                  }


                  break;


                  case "met":


                  method=ct;


                  break;


              }


       }    


    }


    if(!isCache){


        var t=new Date().getTime();


        if(url.indexOf("?")>0){


            url+="&t="+t;


        }else{


            url+="?t="+t;


        }


    }    


    var postdata=null;


    if(method=="POST"){


        purl=url.split("?");


        url=purl[0];


        postdata=purl[1];//must urlencoded first


    }


    RequestHTTP(url,handleResponse,method,isXML,postdata);


}




function AJAXForm(formID,handleResponse,gXML){


var isXML=false;//false:html or true:xml


if(gXML){


       re = / /g; 


       gXML=gXML.replace(re, "");


              var ct=gXML.split("=")[1];


                  if(ct=="true"){


                      isXML= true; 


                  }else{


                      isXML= false; 


                  }    


          }




var url=$(formID).action;


var data=getForm(formID);


RequestHTTP(url,handleResponse,"POST",isXML,data);


}




function getForm(theFormName){


  var form = document.forms[theFormName];


   if(typeof form.name == "undefined" || form.name=="")


       form = $(theFormName);




   var formData = "";


   var element;


   for (var i = 0; i < form.elements.length; i++) {


      element = form.elements[i];


      var type=element.type.toLowerCase();      


      if (type == "hidden" ||type == "text" || type == "password" || type == "textarea"){          


       formData += element.name + "=" + $U(element.value) + "&";


      }else if (element.type.indexOf("select") != -1) {


         for (var j = 0; j < element.options.length; j++) {


            if (element.options[j].selected == true) formData +=  element.name + "=" + $U(element.options[element.selectedIndex].value) + "&";


         }


      }


      else if (element.type == "checkbox") {


         if (element.checked) formData += element.name + "=" + $U(element.value) + "&";


      }


      else if (element.type == "radio") {


          if (element.checked == true) formData += element.name + "=" + $U(element.value) + "&";


      }


   }


   return formData.substring(0, formData.length - 1);


}




function RequestHTTP(burl,rdRandleResponse,bmethod,bXML,Formdata){


var http_request = false;


function doHttpRequest()


{    


       if (window.XMLHttpRequest) {


            http_request = new XMLHttpRequest();


            if (http_request.overrideMimeType) {


                http_request.overrideMimeType('text/xml');


            }


        } else if (window.ActiveXObject) {


            try {


                http_request = new ActiveXObject("Msxml2.XMLHTTP");


            } catch (e) {


                try {


                    http_request = new ActiveXObject("Microsoft.XMLHTTP");


                } catch (e) {}


            }


        }


        if (!http_request) {


            alert('Giving up :( Cannot create an XMLHTTP instance');


            return false;


        }




    http_request.onreadystatechange=handleStateChange;    


    http_request.open(bmethod,burl,true);


    if(Formdata){


    http_request.setRequestHeader("Content-Length",Formdata.length);   


    http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");


    http_request.send(Formdata);


    }else{


        if(bXML){


            http_request.setRequestHeader("Content-Type","text/xml");


            //charset "text/xml;charset=utf-8";


        }else{


            http_request.setRequestHeader("Content-Type","text/html");


        }


    http_request.send(null);


    }


    


}




function handleStateChange()


{


    if(http_request.readyState==4 && http_request.status==200){


        var doc;


        if(bXML){


        content=http_request.responseXML;


        }else{


        content=http_request.responseText;


        }


        eval(rdRandleResponse+"(content)");


    }


}


doHttpRequest();


}




//tools


function getTagValue(doc, tag){


     var elems = doc.getElementsByTagName(tag)[0].firstChild.nodeValue;


     return elems; 


}




function $(obj){


  return document.getElementById(obj);    


}




function $F(obj){


  return document.getElementById(obj).value;


}


function $U(str){


  return encodeURIComponent(escape(str));    


}

语法:AjaxCall(url,handleResponse,param);
将url返回的数据交给handleResponse(doc)处理
参数:url:请求的地址;handleResponse:回调函数,doc
为AJAX返回的文档;param:附加参数(isCache:是否需要缓存,默认不缓存;isXML:是否返回XML文档,默认HTML;method:发送方式,默认GET)
例子:
AjaxCall("gaogao.xml","yoyo2","method=POST
,isXML=true ,isCache=false ");
AjaxCall("getnews?pid=23412","shownews");
备注:
如果POST数据,请将数据编码后加在URL后,例如:
AjaxCall("gaogao.php?name="+$U('哟哟')+"&sex="+$U('male'),"yoyo2","method=POST")

-------------------------------------------------------------------------------------------
语法:AJAXForm(formID,handleResponse,param); 将表单数据用AJAX POST出去
参数: formID:表单的ID;handleResponse:回调函数,doc 为AJAX返回文档;param:附加参数(isXML:是否返回XML文档,默认HTML;与AjaxCall不同,AJAXForm只有isXML一个附加参数)
例子:
<form id="form1" name="form1" method="post" action="ahaxtest2.php" onsubmit="test3('form1');return
false;">

......................
function test3(postform){ 
    AJAXForm(postform,"yoyo3");

}

-------------------------------------------------------------------------------------------

附加功能
$('div') 等同于 document.getElementById('div')
$F('div') 等同于 document.getElementById('div').value
getTagValue(XMLDoc ,Tag ) 获取XML文档指定TAG的第一次出现的值
$U(str) 等同于encodeURIComponent(escape(str)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ajax ajax框架