Ajax detailed step-by-step tutorial is coming!!!

cjh_ code 2021-11-25 15:14:07

Catalog

1.1、 Client and server

1.1.1 The server

1.1.2  client

1.2、URL Address

1.2.1 form

1.3、 Communication process between client and server

1.4、 Request data

1.5 jQuery The request

1.6、 Interface  


1.1、 Client and server

1.1.1 The server

         While surfing the Internet , A computer responsible for storing and providing external resources , It's called a server

1.1.2  client

         Computers responsible for acquiring and consuming resources , It's called a client

1.2、URL Address

        URL Chinese is called uniform resource locator , It is used to identify the unique storage location of each resource on the Internet . Browser only through URL Address , In order to correctly locate the storage location of resources , So as to successfully access the corresponding resources
for example :http://www.baidu.com

1.2.1 form

  • Communication protocol between client and server
  • The name of the server where the resource exists
  • The specific storage location of resources on the server

 1.3、 Communication process between client and server

  • The communication process between the client and the server , Divided into requests - Handle - There are three steps to respond
  •   Every resource in the web page , All by request - Handle - Get the response from the server

 1.4、 Request data

XMLHttpRequest object ( Commonly known as little yellow man object )

let xhr = new XMLHttpRequest();// Instantiate the little yellow man object
xhr.open("get","URl Address ");// Two parameters , The first is the request mode ,post and get request ( The two most basic requests ); The second parameter is requested URL Address
xhr.send();// Data sent to the back end
xhr.onreadystatechange = function(){
if(xhr.readyState===4&&xhr.status === 200){// The status code of the response , Right, just do the following , The status code is provided by the backend , Ask back-end developers if you don't know about the project
console.log(JSON.parse(xhr.responseText));
}
}

This is original get Request basic structure

Expand :

  • JSON.parse(): Convert the string to JS object
  • JSON.stringify(): take JS Object to JSON character string

Because the native request is a little complicated , A little unfriendly to novices , Now we are based on jQuery Encapsulation to implement the request

1.5 jQuery The request

        $get():$.get() The function is single , Designed to initiate get request , Thus, the resource request on the server is sent to the client for use


      structure :$.get(url,[data],[callback])

  1. url: Parameter is string type , It's a must , The address of the resource to be requested
  2. data: Parameter is object type , It's not a must , Parameters to be carried during resource request
  3. callback: Parameter is function type , It's not a must , Callback function when the request is successful
$.get('URL Address ',{id:546},function(res){
console.log(res.data[0]);
})

         $.post():$.post() The function is single , Designed to initiate post request , To submit data to the server


      structure :$.post(url,[data],[callback])

  1. url: Parameter is string type , It's a must , Address to submit data
  2. data: Parameter is object type , It's not a must , Data to submit
  3. callback: Parameter is function type , It's not a must , Callback function when data submission is successful
 $.post('URL Address ',{bookname:" Zhang San ",author:" Day after day ",publisher:" Daily Publishing House "},function(res){
console.log(res);
})

Be careful : The attribute name of the data submitted by the above code is based on URL The address returned by the request server , Be sure to fill in according to the things returned by the server ( There will be development documents ), There is no document, just ask the back end

 $.ajax(): There are many ways to request (get、post、put、delete etc. )


structure :

$.ajax({
        type:'',    // How to request get perhaps post
        url:'',     // request url Address
        data:{},    // The data to be carried in this request
        success:function(res){} // Callback function after successful request
    });
$.ajax({
type:'post',// here type It can also be replaced by method
url:'URL Address ',
data:{bookname:"",author:" Day after day ",publisher:" Daily Publishing House "},
success:function(res){
console.log(res);
}
})

1.6、 Interface  

         Use Ajax When requesting data , Requested URL Address , It's called a data interface . meanwhile , Each interface must have a request mode ( Specified at the back end , Ask them )

         Interface document : It is the description document of the interface , It is the basis for us to call the interface . A good interface document contains a description of the interface URL, Description of parameters and input contents

form :

  • The name of the interface
  • Interface URL
  • Call mode
  • Parameter format
  • The response format
  • Return to example

Be careful : Interface documents are not necessarily these , On demand writing , Just use it. , Don't fight with the back end ( Continue to update later !!!)

Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25