Js implements object-oriented encapsulation of ajax requests

AJAX is a technology used to create fast dynamic web pages. By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.
Using ajax requests in js generally involves three steps:
1. Create an XMLHttp object
2. Send requests: including opening links and sending requests
3. Handling responses
To use ajax without using any js framework, you may need to write the code as follows:

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;} lele.info (xmlHttpCreate ());

If you use this ajax request in complicated business logic, the code will be bloated and inconvenient for reuse. As you can see, a service logic operation may be processed after the server responds successfully, at this time, you have to write the operation in the onreadystatechage method.

For the convenience of code reuse, we can make the following processing; 1. After the server responds successfully, the business logic to be processed is handed over to the developer for processing. 2. After the request is encapsulated in an object-oriented manner, it looks like the following:
Window. onload = function () {document. getElementById ("hit "). onclick = function () {lele.info ("START 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 an XMLHttp object, open a link, request, and respond to 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 implements ajax operations similar to jquery. Readers can think slowly or leave a message here