Native JS for Ajax

Objective

This article will give you a detailed introduction, and jquery control with the original JS how to achieve Ajax.

The AJAX approach provided by jquery:

$.ajax ({    URL:,    type: ',    dataType: ',    data: {              },    success:function () {             },    Error:function () {              }})

Using native JS to implement the AJAX principle:

1 getting XMLHttpRequest objects

2 Setting the state listener function

Ajax.onreadystatechange=function () {                console.log (ajax.readystate);                Console.log (Ajax.status);
}

Five status values in Ajax readystate

0-(uninitialized) has not yet called the Send () method
1-(load) called the Send () method, sending the request
2-(loading complete) the Send () method executes and has received the full response content
3-(interactive) parsing response content
4-(complete) The response content resolution is complete and can be invoked on the client

Ajax.status Common Status Codes

1**: Request received, continue processing
2**: Successful operation received, analysis, acceptance
3**: Completion of this request must be further processed
4**: request contains an error syntax or cannot be completed
5**: The server failed to perform a fully valid request
100--customer must continue to make a request
101--client requires server to convert HTTP protocol version on request
200--Trading Success
201--prompt to know the URL of the new file
202--accepted and processed, but processing not completed
203--return information is indeterminate or incomplete
204--request received, but return information is empty
205--the server has completed the request, the user agent must reset the files that are currently viewed
206--server has completed a partial user's GET request
300--requested resources can be obtained in multiple places
301--Delete request data
302--found the request data at a different address
303--advising customers to access other URLs or access methods
304--client has performed a get, but the file has not changed
The resource requested by 305--must be obtained from the address specified by the server
306--code used in previous versions of HTTP, no longer used in the current version
307--declaring the requested resource temporary deletion
400--error requests, such as syntax errors
401--Request Authorization failed
402--reserved valid Chargeto header response
403--Request not allowed
404--no files, queries, or URLs found
405--the method defined by the user in the Request-line field does not allow
406--request resource is inaccessible based on accept drag sent by user
407--similar to 401, the user must first be authorized on the proxy server
408--client does not complete the request within the user-specified time of starvation
409--the current resource state, the request cannot be completed
This resource is no longer available on the 410--server and has no further reference address
411--server rejects user-defined Content-length property requests
412--one or more request header fields are incorrect in the current request
413--the requested resource is greater than the size allowed by the server
414--The requested resource URL is longer than the length allowed by the server
415--requesting a resource does not support requesting an item format
The 416--request contains a range request header field that does not have a range indication value within the current request resource scope, and the request does not contain a If-range request header field
The 417--server does not meet the expectations specified by the request Expect header field, and if it is a proxy server, the next level of server may not satisfy the request
500--Server generates internal error
501--server does not support the requested function
502--server is temporarily unavailable, sometimes to prevent system overloads
503--server overload or pause repair
504--Gateway overload, Server uses another gateway or service to respond to users, waiting time setting value is longer
505--server does not support or deny the HTTP version specified in the request header

3open a link

Ajax.open ("GET", "H51701.json", true);

Open (method, URL, async) methods require three parameters:

Methods: The method used to send the request (get or post);

URL: A URL that specifies the server-side script, which can be any type of file, such as. JSON and. XML, or server script files, such as. asp and. PHP (capable of performing tasks on the server before returning the response));

Async: Specifies that the request should be asynchronous (true) or synchronous (false), and true to execute additional scripts while waiting for the server to respond, to process the response when the response is ready, and false to wait for the server to respond and execute.

4send a request. Can send objects and strings without passing data to send null

Ajax.send (NULL);

The Send () method can send the request to the server.

5 in the listener function, Judge readystate=4&&status=200 to indicate that the request was successful.

if (ajax.readystate==4&&ajax. status==200) {}

6 Accept response data using ResponseText, Responsexml, and display using native JS operation Dom

Console.log (Ajax.responsetext); Console.log (Ajax.responsexml); Console.log (Json.parse (Ajax.rensponsetext)); Console.log (eval ("+ajax.responsetext+"));

Printing results:

The above is my native JS to achieve AJAX personal profile, welcome communication and Communication! Only Yun-Hee

Native JS for Ajax