Ajax network request

1. Native ajax

1.1、 Introduction to Ajax

Ajax Asynchronous JavaScript And XML, namely asynchronous js and XML

With Ajax, you can send asynchronous requests to the server in the browser. The biggest advantage is that you can get data without brushing stars

Ajax is not a programming language, but a new way to use existing standards together.

1.2、 Introduction to XML

XML Extensible Markup Language.

Designed to transmit and store data

XML is similar to HTML. The difference is that HTML has predefined tags, while XML does not have predefined tags. It is full of user-defined tags, which are used to represent some data

Now use json

1.3、 Advantages and disadvantages of Ajax

• advantage:
  • You can communicate with the server without refreshing the page
  • Allows you to update part of the page content based on user events.
• Disadvantages:
  • No browsing record, unable to rollback
  • Cross domain problems exist（ Default cannot cross domains ）
  • SEO is unfriendly (not found by search engines)

1.4、 Use of Ajax

1.4.1、 Basic operation of Ajax request

• GET request

 < body >
   < button > Click Send Request </ button >
   < div  id = " result " > </ div >
    
   < script >
     //Get button element
     const but = document . getElementsByTagName ( 'button' ) [ zero ] ;

     //Binding Events but . onclick  =  function ( ) {
       //1. Create an object
       const xhr =  new  XMLHttpRequest ( ) ;
       const result = document . getElementById ( 'result' )
       //2. Initialize the request method and url xhr . open ( 'GET' , ' http://localhost:8000/server ' ) ;
       //3. Send xhr . send ( ) ;
       //4. Event binding processing results returned by the server
       //On When
       //Readystate is an attribute in the xhr object, representing the status 0 (initial value) 1 (open method call completed) 2 (send method call completed) 3 (results returned by the server) 4 (all results returned by the server) xhr . onreadystatechange  =  function ( ) {
         if ( xhr . readyState ===  four ) {
           //Judge the response status code 200 404 403
           //2xx means success
           if ( xhr . status >=  two hundred  && xhr . status <  three hundred ) {
             //Processing response result line header empty line body console . log ( xhr . status ) ; //Status code console . log ( xhr . statusText ) ; //Status String console . log ( xhr . getAllResponseHeaders ) ; //All response headers console . log ( xhr . response ) ; //Responder result . innerHTML = xhr . response }
         }
       }
     }
   </ script >
 </ body >
 </ html >

 //1. Introduce express
 // const { response } = require('express');
 const express =  require ( 'express' ) ;

 //2. Create an application object
 const app =  express ( ) ;

 //3。 Create routing rules
 //Request is the encapsulation of request message
 //Response is the encapsulation of response message app . get ( '/server' , ( request , response ) => {
   //Set the response header to allow cross domain response . setHeader ( 'Access-Control-Allow-Origin' , '*' ) ;
   //Set Response Body response . send ( 'This is the node server created with the express server framework' )
 } ) ;

 //4. Listening port start service app . listen ( eight thousand , ( ) => { console . log ( "Server created successfully" ) ;
 } )

Set url parameters (url is followed by "?" parameter name and value, and multiple parameters are connected with "&")

 xhr . open ( 'GET' , ' http://localhost:8000/server?a=123&b=321&c=231 ' ) ;

• POST request

 result . addEventListener ( "mouseover" , function ( ) {
     //1. Create an object
     const xhr =  new  XMLHttpRequest ( ) ;
     //2. Initialization setting type and URL xhr . open ( 'POST' , ' http://localhost:8000/server ' ) ;
     //3. Send xhr . send ( ) ;
     //4. Event binding xhr . onreadystatechange  =  function ( ) {
         //Judgment
         if ( xhr . readyState ===  four ) {
             if ( xhr . status >=  two hundred  && xhr . status <  three hundred ) { result . innerHTML = xhr . response ;
             }
         }
     }
 } )

 //Set post response app . post ( '/server' , ( request , response ) => {
   //Set the response header to allow cross domain response . setHeader ( 'Access-Control-Allow-Origin' , '*' ) ;
   //Set Response Body response . send ( 'This is the node server created with the express server framework, and the post response is returned' )
 } ) ;

Set parameters:

 xhr . send ( 'a=123&b=321&c=231' ) ; //There is no format requirement, but there needs to be a corresponding processing method on the server side

Set response header

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

1.4.2 Server responds to json data

 //.html
 < script >
     //Binding dom elements
     const result = document . getElementById ( 'result' )
	 //Binding keyboard press event window . onkeydown  =  function ( ) {
     //Send request
     const xhr =  new<