Native Ajax Encapsulation

Back to the native JS, the Internet to see the AJAX package, then take to change, I do not know what the drawbacks, hope points out!

1 varAjaxhelper = {2     /*1.0 Browser-compatible ways to create asynchronous objects*/3MAKEXHR:function () {4         //declaring asynchronous object variables5         varXmlHttp =false;6         //declaring extensions7         varXmlhttpobj = ["msxml2.xmlhttp.5.0", "msxml2.xmlhttp.4.0", "msxml2.xmlhttp.3.0", "Msxml2.xmlhttp", "MSXML.XMLHttp"];8         //determine if the browser supports XMLHttpRequest, and if so, it is a modern browser that can be created directly9         if(window. XMLHttpRequest) {TenXmlHttp =NewXMLHttpRequest (); One         } A             //Otherwise, you can only iterate through the old browser asynchronous object name, try to create it, and know that the creation was successful -         Else if(window. ActiveXObject) { -              for(i = 0; i < xmlhttpobj.length; i++) { theXmlHttp =NewActiveXObject (Xmlhttpobj[i]); -                 if(xmlHttp) { -                      Break; -                 } +             } -         } +         //determines whether the asynchronous object was created successfully, returns an asynchronous object if successful, otherwise returns false A         returnXmlHttp? XmlHttp:false; at     }, -     /*2.0 sending Ajax requests*/ -Doajax:function(method, URL, data, Isayn, callback, type) { -METHOD =method.tolowercase (); -         //2.1 Creating an Asynchronous object -         varXHR = This. MAKEXHR (); in         //2.2 Set Request parameters (if get, with URL parameter, if not, without) -Xhr.open (method, url + (method = = "Get"?) "?" + Data: ""), Isayn); to         //2.3 Depending on the request predicate (get/post), add a different request header +         if(method = = "Get") { -Xhr.setrequestheader ("If-modified-since", 0); the}Else { *Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); $         }Panax Notoginseng         //2.4 Setting the callback function -Xhr.onreadystatechange =function () { the             //If you accept the response message sent back by the server +             if(Xhr.readystate = = 4) { A                 //determine if the status code is normal the                 if(Xhr.status = = 200) { +                     if(type.tolowercase () = = "JSON") { -                         varRET = {}; $                         Try { $                             if(typeofJSON! = "undefined") { -RET =Json.parse (xhr.responsetext); -}Else { the                                 //JSON is not supported under IE8 -RET =NewFunction ("return" +Xhr.responsetext) ();Wuyi                             } the callback (ret); -}Catch(e) { Wu Console.log (e.message); -Callbackfalse); About                         } $}Else { -                         //return text directly - callback (Xhr.responsetext); -                     } A}Else { +Console.log ("AJAX Status Code:" +xhr.status); theCallbackfalse); -                 } $             } the         }; the         //2.5 Send (if it is post, then pass parameters, otherwise do not pass) theXhr.send (Method! = "Get"? Data:NULL); the     }, -     /*3.0 send a POST request directly*/ inDoPost:function(URL, data, Isayn, callback, type) { the          This. Doajax ("POST", URL, data, Isayn, callback, type); the     }, About     /*4.0 send a GET request directly*/ theDoget:function(URL, data, Isayn, callback, type) { the          This. Doajax ("Get", URL, data, Isayn, callback, type); the     } +};

Assuming a requirement, the back end requires passing in two digits N1, N2, and then returning the sum.

When one of the parameters is empty or not a number, return: {"status": "0", "MSG": "The parameter is wrong!" "}

When correct, return: {"status": "1", "sum": "//n1 plus n2"}

The back-end code is not posted.

Front-end invocation:

1document.getElementById ("Btnsubmit"). onclick =function () {2Ajaxhelper.dopost ("Backend url", "n1=10&n2=25",true,function(ret) {3                 if(!ret) {return; }4                 if(Ret.status! = 1) {5 alert (ret.msg);6                     return;7                 }8                 varn =ret.sum;9                 vars =Ret.status;Ten}, "JSON"); One};

Native Ajax Encapsulation