AJAX (1): Native AJAX, HTTP protocol, Ajax environment configuration, AJAX send a request, AJAX requests in the problem

I. OriginalAJAX

1. What is ajax

AJAX is Asynchronous throughout.Javascript And XML, asynchronous js and XML

AJAX allows you to send the server in the browser theasynchronous request, the biggest advantage:Fetch data without refreshingAJAX is not a new programming language, but a new way of using existing standards together.

multilingualism

Extensible Markup Language (XML) XML is designed to transmit and store data. XML is similar to HTML, except that HTML is full of predefined tags, whereas XML has no predefined tags, but all customized tags, which are used to represent some data. (Currently replaced by JSON)

Features.

Pros:
(1) You can communicate with the server side without refreshing the page.
(2) allows you to update part of the page content based on user events (mouse events, document events).
Drawbacks:
(1) There is no browsing history and you cannot go back.
(2) There are cross-domain issues (homologation)
(3) SEO unfriendly (can't find it in the view source code)

II. HTTP Protocol

HTTP is known as hypertext transport protocol, which specifies the rules for communication between browsers and World Wide Web servers. It specifies the request and response formats and parameters

Request Message:Request Headers

classifier for objects in rows such as words:Request type(get,post) / url type() / HTTP protocol version /

beginning or end:Host:Value Cookie: Value Content-type:value User-Agent:Value

blank line:: Fixed

style: null if GET request body, can be left empty if POST

Response Headers:Response Headers

Lines: HTTP Protocol Version(1.1) / Response Status(200) / Response Status String(ok)

Header.Content-type:value Content-length:value Content-encoding:valuewait a minute!

blank line:

BODY.HTML syntax content

AJAX environment configuration

1. Download and install the configuration environment

download and installnode.js needs to be installed, just type in vscode => terminal => current directory => type innpm i express;

Then introduce express, the





// 1. Introducing express



const express = require('express');




// 2. Creating Application Objects



const app = express();




// 3. Creating Routing Rules




//request encapsulates the request message




//response encapsulates the response message



app.get('/', (request, response) => {



    //Setting the response



    response.send('HELLO EXPRESS')



});



 




//4. Listening on the port to start the service



(8000, () => {



    ('Service started, listening on port 8000 。。。。。');



})

Then you can see the response message by typing :127.0.0.1:8000 in your browser

When there is a port occupied error: address already in use :::8000 or the following node, you can use ctrl+c to release the port.

AJAX send a request

1. Preparation for sending requests





<head>




    <meta charset="UTF-8">




    <meta name="viewport" content="width=device-width, initial-scale=1.0">




    <title>Document</title>




    <style>




        .box {



            width: 200px;



            height: 100px;



            border: 1px solid #60cc;



        }



    </style>





</head>




 




<body>




    <button>dispatch</button>




    <div class="box"></div>





</body>





// 1. Introducing express



const { response } = require('express')



const express = require('express')




// 2. Creating Application Objects



const app = express()




// 3. Creating Routing Rules



app.get('/server', (request, response) => {



    //Setting the response header Setting to allow cross-domain



    ('Access-Control-Allow-Origin', '*');



    //Setting the response body



    response.send('HELLO AJAX')



})




// 4. Listening on the port to start the service



(8000, () => {



    ('Service started, listening on port 8000 。。。。。');



})

Send a Get request




 <style>




        .box {



            width: 200px;



            height: 100px;



            border: 1px solid #60cc;



        }



    </style>




  <button>dispatch</button>




    <div class="box"></div>

server.js





// 1. Introducing express



const express = require('express')




// 2. Creating Application Objects



const app = express()




// 3. Creating Routing Rules



app.get('/server', (request, response) => {



    //Setting the response header Setting to allow cross-domain



    ('Access-Control-Allow-Origin', '*');



    //Setting the response body



    response.send('HELLO AJAX')



})




// 4. Listening on the port to start the service



(8000, () => {



    ('Service started, listening on port 8000 。。。。。');



})

Click Send to add the response body to the text box to get the text

onreadystatechange: on when... When; readystate is a property in the xhr object that indicates the state 0 1 2 3 4

change

where 0 is uninitialized; 1 is the end of the open call; 2: the end of the send call 3: the server returns part of the results 4: the server returns all the results




  <script>




        // Get button element\



        const btn = ('button')[0]



        const result = ('.box')



        //bind an event



         = function () {



            // 1. Creating Objects



            const xhr = new XMLHttpRequest()



            //2Initialization Setting the request request method and url



            xhr.open('GET', 'http://127.0.0.1:8000/server')



            // 3. . send .



            xhr.send();



            // 4. Event binding to handle the results returned by the server side



            //onWhen... When; readystate is a property in the xh object that indicates the state0 1 2 3 4 change



            // included among these0 - uninitialized1 - openend of call2 - sendend of call3 - The server returns partial results4 - The server returns all results



             = function () {



                // Judgment (assuming the server returns all results)



                if ( === 4)



                    // Determine response status200 404 403 500




                    // 2The response statuses beginning with203 201




                    if (xhr.status >= 200 && xhr.status < 300) {



                        //Processing result Header Empty line Body



                        // 1. Response line



                        /*   (xhr.status);//status code



                          ();//Status String



                          (());//All response headers



                          ();//response body*/




                        //   Setting the text in the box



                         = 



                    }



            }



        }



    </script>

get passes a parameter: in the url suffix parameter, use the？Separation, = assignment, e.g. ?a=100&b=200&c=300

Send a post request




 <style>




 



        .result {



 



            width: 200px;



 



            height: 100px;



 



            border: 1px solid red;



 



        }



 



    </style>




 




</head>




 




<body>




 



    <div class="result"></div>

First get the box and add mouseover events to it

Then create the XMLHttpRequest object; and initialize it to set the request method and the url

By setting the request header

and then send the request.Post passes parameters into send().

Then it is event-bound onreadystetechange to process the results returned by the server;

First determine whether it is equal to 4, i.e., the server has returned all the resultant states, the

If it is equal to 4, then in determining whether the response status is 200, that is, the correct response

After adding the response to the box via innerHTML





<script>




        const result = ('.result')



        ('mouseover', function () {



            //    1. Creating Objects



            const xhr = new XMLHttpRequest()



            //2. Initialize, set request type and url



            xhr.open('POST', 'http://127.0.0.1:8000/server');



             // Set the request header Content-Type sets the request body type, you can also define your own but it will report an error.



            //   application/x-www-form-urlencoded parameter query string fixed writing style



            ('Content-Type', 'application/x-www-form-urlencoded')



            // 3. . send .



             //Post request setup parameters



             xhr.send('a=100&b=200&c=300');



            // 4. Event Binding Handling results returned by the server



             = function () {



                if ( === 4) {



                    if (xhr.status >= 200 && xhr.status < 300) {



                         = 



                    }



                }



            }



 



        })



 



    </script>

Then add the post routing rule within





// 1. Introducing express



const express = require('express')




// 2. Creating Application Objects



const app = express()




// 3. CreategetRouting Rules



app.get('/server', (request, response) => {



    //Setting the response header Setting to allow cross-domain



    ('Access-Control-Allow-Origin', '*');



    //Setting the response body



    response.send('HELLO AJAX')



 



})




// 3. Creating post routing rulesallCan accept any type of request



app.all('/server', (request, response) => {



    //Setting the response header Setting to allow cross-domain



    ('Access-Control-Allow-Origin', '*');




// Setting the response header



    ('Access-Control-Allow-Headers', '*');



    //Setting the response body



    response.send('HELLO AJAX POST')



 



})




// 4. Listening on the port to start the service



(8000, () => {



    ('Service started, listening on port 8000 。。。。。');



})

Response to send object data

When responding to an object data, you need to perform a string conversion of the object data by () and then add the converted string to the response body




app.all('/json-server', (request, response) => {



    //Setting the response header Setting to allow cross-domain



    ('Access-Control-Allow-Origin', '*');



    // Setting the response header



    ('Access-Control-Allow-Headers', '*');



 



    // Responding to a data



    const data = {



        name: 'lalala'




    };



    // String conversion of object data



    let str = (data)



    //Setting the response body



    response.send(str)



 



}

When the server conversion result is a string, the page can not be recognized, so this time you need to convert the json string to a js object; there are the following methods:

(1) Manual transformation of data





let data = JSON.parse(xhr.response)




      = data.name

(2) By automatic conversion

Setting the response body data type

  = 'json'




  console.log(xhr.response);



  = xhr.response.name

V. AJAX issues

Caching issues




app.get('/ie', (request, response) => {



    //Setting the response header Setting to allow cross-domain



    ('Access-Control-Allow-Origin', '*');



    //Setting the response body



    response.send('HELLO IE-3')



})

When you change the response body, IE will not be updated, but go to the cache, or the last response body; the solution is to add a timestamp after the url, so that each time the url is not the same, so that there will be no change in the response body when IE go to the cache does not update the problem

   xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now())//Date.now() to get the current timestamp

2. Request timeout and networkexceptionsdeal with

Write a timer on the server sidefunction (math.)The response body is delivered to the page after three seconds.





//timeout response



app.get('/delay', (request, response) => {



    //Setting the response header Setting to allow cross-domain



    ('Access-Control-Allow-Origin', '*');



    setTimeout(() => {



        //Setting the response body



        response.send('Delayed response')



    }, 3000)



})

You can set a timeout by making a timeout setting on the pageand timeout callbacksAnd network exception callbacks.




  // timeout setting2The request is canceled if the response body is not received within seconds.



             = 2000




            //timeout callback



             = function () {



                alert('The internet isn't very good wait a little longer!')



            }



            //network anomaly callback



             = function () {



                alert('There seems to be a problem with your network')



            }

Manual Cancellation Request

Above by automatically canceling the request, the following describes manually canceling the request:

pass (a bill or inspection etc)(）Method cancel request, the scope of the problem, the definition of xhr in the outside to give a null, and then assign the xhr instance, and then call the method. (Repeat assignment don't use const oh, use const if you can, let if you can't)




  <button>Click to send</button>




    <button>Click to cancel</button>




    <script>




        const btns = ('button')



        let xhr = null




        btns[0].onclick = function () {



            xhr = new XMLHttpRequest();



            xhr.open('GET', 'http://127.0.0.1:8000/delay')



            xhr.send();  //You don't have to take the response body, so you don't have to write it afterward



        }



 



        //Cancel request, abort method



        btns[1].addEventListener('click', function () {



            (); //nod nodding firstsenddouble-clickcancelThere will be no error, first pointcancelreport an error



            (xhr);  //nod nodding firstsenddouble-clickcancelis the xhr instance, first clickcancelreport an error



        })

4. Repeated sending of requests

When the user clicks the send button several times, the judgment identifier isSending determines whether the request is being sent, if it is being sent, the request is canceled and a new request is created.

I don't know why () keeps reporting an error ！！！！！ (seems to bechrome(This is caused by not supporting local ajax, just change your browser)




 <button>Click to send</button>




 



    <script>




        const btns = ('button');



        let xhr = null;



        //Identifies the variable that determines whether an AJAX request is sent or not



        let isSending = false;



        btns[0].onclick = function () {



            // Determine the amount of markers If a request is being sent, click again to cancel the request and create a new one.



            if (isSending) ()



            xhr = new XMLHttpRequest();



            isSending = true;



            xhr.open('GET', 'http://127.0.0.1:8000/delay')



            xhr.send()



             = function () {



                if ( === 4) {



                    // Modify the amount of identifiers Stop transmitting when the transmission is completed



                    isSending = false




                }



            }



 



        }



 



    </script>