Several methods for implementing native ajax using javascript

The original style of ajax is rarely seen now. We all use jquery's ajax directly, because jquery provides a lot of ajax methods, which are easy to use and quick, next I will provide you with some original ajax methods.

Since javascript has various frameworks, such as jquery, using ajax has become quite simple. However, for simplicity, you may not need to load a huge js plug-in such as jquery in the project. But what should I do if I want to use ajax? We will share with you several ways to use javascript to implement native ajax.

Before implementing ajax, you must create an XMLHttpRequest object. If you cannot create a browser for this object, you need to create ActiveXObject as follows:

 

The Code is as follows:	Copy code
Var xmlHttp; Function createxmlHttpRequest (){ If (window. ActiveXObject ){ XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP "); } Else if (window. XMLHttpRequest ){ XmlHttp = new XMLHttpRequest (); }

 

(1) Use the xmlHttp created above to implement the simplest ajax get request:

 

The Code is as follows:	Copy code
Function doGet (url ){ // Use encodeURI to process parameter values to prevent garbled characters. CreatexmlHttpRequest (); XmlHttp. open ("GET", url ); XmlHttp. send (null ); XmlHttp. onreadystatechange = function (){ If (xmlHttp. readyState = 4) & (xmlHttp. status = 200 )){ Alert ('success '); } Else { Alert ('fail '); } } }

(2) Use the xmlHttp created above to implement the simplest ajax post request:

 

The Code is as follows:

Copy code

Function doPost (url, data ){ // Use encodeURI to process parameter values to prevent garbled characters. CreatexmlHttpRequest (); XmlHttp. open ("POST", url ); XmlHttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded "); XmlHttp. send (data ); XmlHttp. onreadystatechange = function (){ If (xmlHttp. readyState = 4) & (xmlHttp. status = 200 )){ Alert ('success '); } Else { Alert ('fail '); } } }

Next we will share an encapsulation of the $. ajax method that simulates jquery from the Internet:

 

The Code is as follows:

Copy code

Var createAjax = function (){ Var xhr = null; Try { Xhr = new ActiveXObject ("microsoft. xmlhttp"); // IE browser } Catch (e1 ){ Try { Xhr = new XMLHttpRequest (); // non-IE browser } Catch (e2 ){ Window. alert ("your browser does not support ajax. Please change it! "); } } Return xhr; }; Var ajax = function (conf ){ Var type = conf. type; // type parameter, optional Var url = conf. url; // url parameter, required Var data = conf. data; // optional. The data parameter is only required for post requests. Var dataType = conf. dataType; // The datatype parameter is optional. Var success = conf. success; // callback function optional If (type = null ){ Type = "get"; // optional. The default value is get. } If (dataType = null ){ DataType = "text"; // optional. The default value is text. } Var xhr = createAjax (); Xhr. open (type, url, true ); If (type = "GET" | type = "get "){ Xhr. send (null ); } Else if (type = "POST" | type = "post "){ Xhr. setRequestHeader ("content-type", "application/x-www-form-urlencoded "); Xhr. send (data ); } Xhr. onreadystatechange = function (){ If (xhr. readyState = 4) & (xhr. status = 200 )){ If (dataType = "text" | dataType = "TEXT "){ If (success! = Null ){ Success (xhr. responseText); // common text } } Else if (dataType = "xml" | dataType = "XML "){ If (success! = Null ){ Success (xhr. responseXML); // receives xml documents } } Else if (dataType = "json" | dataType = "JSON "){ If (success! = Null ){ Success (eval ("(" + xhr. responseText + ")"); // converts a json string to a js object } } } }; };

This method is also very easy to use. It is the same as jquery's $. ajax method, but there are not so many parameters. It simply implements some basic ajax functions. The usage is as follows:

 

The Code is as follows:	Copy code
Ajax ({ Type: "post", // post or get, not required Url: "test. jsp", // required Data: "name = dipoo & info = good", // optional DataType: "json", // text/xml/json, not required Success: function (data) {// callback function, not required Alert (data. name ); } });