Js implements object-oriented encapsulation of ajax requests, and jsajax requests are object-oriented.

Js implements object-oriented encapsulation of ajax requests, and jsajax requests are object-oriented.

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:

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

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.
To facilitate code reuse, we can do the following;

• 1. After the server responds successfully, the business logic to be processed is handed over to the developer for processing.
• 2. Request object-oriented Encapsulation

After processing, it looks like the following:

<Pre code_snippet_id = "342814" snippet_file_name = "blog_20140513_2_24891_" name =" code "class =" javascript "> 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, hoping to help you learn.

Articles you may be interested in:

• Javascript encapsulation source code for an AJAX Automatic completion function [Chinese supported]
• JavaScript encapsulates the data code passed by Ajax
• JavaScript-linked unlimited encapsulation class. Data is not Ajax-connected and can be added at will
• Js screen lock solution is implemented by encapsulating $. ajax
• Share an AJAX function encapsulated by native Javascript