Shulou(Shulou.com)06/03 Report--

Editor to share with you what are the basic knowledge points of Ajax in javascript, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Ajax Foundation

The principle of Ajax is simply to send asynchronous requests to the server through the XmlHttpRequest object, get data from the server, and then use javascript to manipulate the DOM to update the page. The most critical step is to get the request data from the server. Native creation of ajax can be divided into the following four steps

1. Create a XMLHttpRequest object

Create a XMLHttpRequest object in modern browsers

Var xhr = new XMLHttpRequest (); 2. Prepare the request

To initialize the object created in the previous step, you can accept three parameters, as follows

Xhr.open (method,url,async)

The first parameter indicates the request type, GET or POST.

The second parameter represents the target ur

The third parameter, true, represents an asynchronous mode request; false represents a synchronous mode, which is not recommended

In asynchronous mode, if the network is blocked or the response is not timely, it will block here and wait for the page to hang.

/ / GET request xhr.open ("GET", demo.php?name=tsrot&age=24,true); / / POST request xhr.open ("POST", demo.php,true); 3. Send a request

In general, most of the parameters submitted using Ajax are simple strings. You can directly use the GET method to write the parameters to be submitted into the url parameter of the open method, where the parameter of the send method is null or empty.

GET request

Xhr.open ("GET", demo.php?name=tsrot&age=24,true); xhr.send (null)

POST request

Xhr.open ("POST", demo.php,true); xhr.setRequestHeder ("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); xhr.send () 4. Processing request xhr.onreadystatechange = function () {if (xhr.readyState = = 4 & & xhr.status = = 200) {console.log (xhr.responseText);}}

Onreadystatechange: execute the following function when the process changes

ReadyState: ajax process 0: the request is not initialized (open () has not been called yet).

1: the request has been established, but has not been sent (send () has not been called yet).

2: the request has been sent and is being processed (usually the content header can now be obtained from the response).

3: the request is being processed; usually some data is available in the response, but the server has not finished generating the response.

4: the response is complete; you can get and use the server's response.

ResponseText: get the response data in the form of a string responseXML: get the response data in the form of XML. The return value is generally a json string, which can be converted into a JSON object using JSON.parse (xhr.responseText).

5. Sample var xhr = false; if (XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ("Microsoft.XMLHTTP");} if (xhr) {/ / if xhr creation fails, the original false xhr.open ("GET", ". / data.json", true); xhr.send () Xhr.onreadystatechange = function () {if (xhr.readyState = = 4 & & xhr.status = = 200) {console.log (JSON.parse (xhr.responseText) .name);} above is all the content of the article "what are the basics of Ajax in javascript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.