JS implementation of Ajax request-oriented encapsulation _javascript skills

AJAX is a technique for creating fast-moving web pages. AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.
Using AJAX requests in JS typically consists of three steps:

• 1. Create XMLHTTP objects
  
• 2. Send request: Include open link, send request
  
• 3, processing response
  

In the case of not using any JS framework, to use AJAX, you may need to write code like the following

 <span style= "FONT-SIZE:14PX;" 
    >var xmlHttp = xmlhttpcreate ()//create Object xmlhttp.onreadystatechange = function () {//Response processing if (Xmlhttp.readystate = 4) { 
    Console.info ("Response finish"); 
      if (Xmlhttp.status = =) {Console.info ("reponse success"); 
    Console.info (Xmlhttp.responsetext);  }} xmlhttp.open ("Get", "Testservlet", true);//Open link xmlhttp.send (null);/Send Request function Xmlhttpcreate () {var 
  XmlHttp; try {xmlHttp = new xmlhttprequest;//ff opera catch (e) {try {xmlHttp = new ActiveXObject ("MSXML2 . 
      XMLHTTP ");/ie} catch (e) {try {XMLHTTP = new ActiveXObject (" Microsoft.XMLHTTP "); 
The catch (e) {}}} return xmlHttp; } console.info (Xmlhttpcreate ());</span> 

If you use this AJAX request in a more complex business logic, it makes the code bloated, inconvenient to reuse, and you can see that it is possible to process a business logic operation after the server responds successfully, at which point you have to write the action in the Onreadystatechage method.
In order to facilitate the reuse of code we can make the following processing;

• 1, after the success of the server response, the business logic to be processed to the developer to deal with their own
• 2, the request for the object-oriented encapsulation

It should look like this after processing:

<pre code_snippet_id= "342814" snippet_file_name= "blog_20140513_2_2489549" name= "code" class= "JavaScript" > 
    Window.onload = function () {document.getElementById ("hit"). onclick = function () {console.info ("start request"); Ajax.post ({data: ' a=n ', url: ' Testservlet ', success:function (reponsetext) {con 
        Sole.info ("Success:" +reponsetext); 
        }, Error:function (Reponsetext) {console.info ("error:" +reponsetext); 
  } 
    }); 
    } var ajax = {xmlHttp: ', url: ', Data: ', Xmlhttpcreate:function () {var xmlHttp; try {xmlHttp = new xmlhttprequest;//ff opera catch (e) {try {xmlHttp = new ActiveXObject 
        ("Msxml2.xmlhttp");/ie} catch (e) {try {XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP"); 
  The catch (e) {}}} return xmlHttp; }, Post:function (jsonobj) {ajax.data = JSONobj.data; 
    Ajax.url = Jsonobj.url; 
    Create the XmlHttp object, open the link, request, response ajax.xmlhttp = Ajax.xmlhttpcreate (); 
    Ajax.xmlHttp.open ("Post", ajax.url,true); Ajax.xmlHttp.onreadystatechange = function () {if (ajax.xmlHttp.readyState = 4) {if (Ajax.xmlHttp.status = = 
        {jsonobj.success (Ajax.xmlHttp.responseText); 
        }else{Jsonobj.error (Ajax.xmlHttp.responseText); 
  }} ajax.xmlHttp.send (Ajax.data); } 
};

The code above implements AJAX operations like jquery, and hopefully it will help you learn.