The Ajax native js

1. What is Ajax?

Full Name: Asynchronous JavaScript and XML (Asynchronous JavaScript and XML), is a technique for data interaction front and rear ends (front end Ajax http requests sent by -> Background to accept and process the data front end -> returns the processed response data). Principle is simple but powerful.

The core advantages: to achieve without refreshing the entire page to refresh the local data. Significant savings in the consumption of resources.

Applications: front and back end data exchange at this stage most of the use of Ajax technology.

2, how to send an Ajax request. There are several key points:

① create XMLHttpRequest object

This object is achieved foundation for Ajax and server data exchange

var xh = new XMLHttpRequest();

② call the open XMLHttpRequest () and send () method

xh.open(method,url,true|false);

Three parameters are: method, the method of the request, to understand the basic post and get enough (generally two methods to use). Server API interface requests: url. The last whether asynchronous, the default is asynchronous.

xh.send(string);

Parameters: When the post is open in the method, the representative of the background data string is transferred want to. When the method is empty String get get request to transfer data representative of the send method does not pass through.

Extended: POST pass and get the difference parameters: get the address bar to the back-end data transfer such as: http://www.baidu.com?name=zjl&age=18 "?", The data is transmitted back. Data is transmitted through the post above mentioned send () to send data to the background.

③ front two talked about how to send a request to accept back then how the data returned? .

xh.onreadystatechange () monitor the current status of the request by the event and receive data transmitted back, it will trigger the event when readyState change

readyState values:

0: Request uninitialized
1: The server connection has been established
2: The request receiving
3: Request Processing
4: request has been completed, and the response is ready

Common response status codes (status): 200: Successful request response 404: find the path check request path is correct

It can determine when to receive data returned after understanding the background and status readyState

④ string obtained by xh.responseText response property. If the server responds xml, by the receiving xh.responseXML property.

3. Through the above understanding, direct look at a complete example Ajax. Note: To view the print results console

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > Ajax </ title > 
    < Script > 
        // JS native Ajax 
        // get all data 
        function the getAll () {
             // create XMLHttpRequest instance 
            var HTTP =  new new XMLHttpRequest ();
             // send a request and a URL address 
            http.open ( ' the GET ',' Http://www.wangshuwen.com/api/getRegion ' ); // a free access to the interface, if the failure alternatively 
            http.onreadystatechange =  function () {
                 IF (http.status ===  200 is  && http.readyState = ==  . 4 ) {
                     the console.log (http.responseText); 
                    var RES = http.responseText; // response body data 
                    console.log (JSON.parse (res)); // json data into the data js 
                } 
            } 
            / / transmission request 
            http.send (); 
        } 
        the getAll (); 
    </script>
</head>
<body>
    
</body>
</html>

Guess you like