js implements object oriented encapsulation of ajax requests

AJAX is a technology for creating fast, dynamic web pages. AJAX enables web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that parts of the page can be updated without reloading the entire page.
Using ajax request 1 in js consists of three steps:

1. Create the XMLHttp object
2. Sending request: Including opening the link and sending the request
3. Process the response

To use ajax without using any of the js frameworks, you might need to write code like this

<span style="font-size:14px;">var xmlHttp = xmlHttpCreate();// Create an object  
xmlHttp.onreadystatechange = function(){// Response processing  
  if(xmlHttp.readyState == 4){ 
    console.info("response finish"); 
    if(xmlHttp.status == 200){ 
       console.info("reponse success"); 
      console.info(xmlHttp.responseText); 
    } 
  } 
} 
xmlHttp.open("get","TestServlet",true);// Open the link  
 
xmlHttp.send(null);// Send the 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"); 
      } catch (e) { 
 
      } 
    } 
  } 
  return xmlHttp; 
} 
 
console.info(xmlHttpCreate());</span> 

If you use this ajax request in more complex business logic, the code will be bloated and not easy to reuse, and you can see that there may be a business logic operation to process after the server responds successfully, at which point you have to write the operation in the onreadystatechage method.
In order to facilitate the reuse of the code we can do the following;

1. After the server responds successfully, the business logic to be processed will be handed over to the developer 2. Object-oriented encapsulation of requests

It should look something like this:

<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(" To request "); 
    ajax.post({ 
        data : 'a=n', 
        url : 'TestServlet', 
        success : function(reponseText) { 
          console.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"); 
        } catch (e) { 
 
        } 
      } 
    } 
    return xmlHttp; 
  }, 
  post:function(jsonObj){ 
    ajax.data = jsonObj.data; 
    ajax.url = jsonObj.url; 
    // create XMLHttp Object to open links, requests, and responses  
    ajax.xmlHttp = ajax.xmlHttpCreate(); 
    ajax.xmlHttp.open("post",ajax.url,true); 
    ajax.xmlHttp.onreadystatechange = function(){ 
      if(ajax.xmlHttp.readyState == 4){ 
        if(ajax.xmlHttp.status == 200){ 
          jsonObj.success(ajax.xmlHttp.responseText); 
        }else{ 
          jsonObj.error(ajax.xmlHttp.responseText); 
        } 
      } 
    } 
    ajax.xmlHttp.send(ajax.data); 
  } 
};

The above code is similar to the ajax jquery operation, I hope to help you learn.