Examples to explain the basic knowledge of HTTP messages and ajax

This article will explain the basic knowledge of HTTP messages and ajax with examples. The content passed by the client to the server and the content passed by the server to the client are both HTTP messages. Ajax is a method in client JS that is used to send requests to the server. This article will share with you the basic knowledge of HTTP messages and ajax. Friends who are interested should take a look.

HTTP message

The content passed by the client to the server and the content passed by the server to the client belong to the HTTP message

Starting line: Request starting line Response start Starting line

Header: Request header Response header Common header (both request and response) Custom header

Body: Request body Response body

The client passes it to the server Terminal data:

The question mark after the request URL is used to pass parameters to the server /getList?name=zhangsan&age=7

Set the header of the request (set the request header information)

Set the request body and put the content passed to the server in the request body and pass it to the server

Data passed from the server to the client:

Set the response header information

Set the response Main content

Ajax: async javascript and xml Asynchronous JS and XML (extensible markup language, the tags used in the XML file are all extended by themselves, using their own extended regular tags to store relevant Data)

Ajax is a method in client JS, used to send requests to the server (can also be passed to server-side data), and then obtain the content returned by the server (Ajax is generally run on in the client's browser).

Ajax four steps:

Create an Ajax object (the following writing method is not supported in IE6 and lower browsers)

var xhr = new XMLHttpRequest;

Basics before sending Information configuration: configure the request method (GET, POST, PUT, DELETE, HEAD...)

Open a URL address (configure which server address to send the request to)

Synchronous or asynchronous ( true represents asynchronous, false represents synchronous, the default is true)

[username] Provides the requested user name to the server

[userpass] Provides the requested user password to the server. These two values ​​​​are generally neither Write, only if the server has implemented security restrictions and only allows specific users to access, we will pass it

xhr.open('get',"/data.txt",false,[username],[userpass]);

Bind a method to the onreadystatechange event to listen for state changes (as long as the state changes, the method will be triggered Execution)

xhr.onreadystatechange = function(){

　The parameter configuration before sending has been completed)

　2 headers_received The response header information has been accepted

　3 loading The main returned content is being prepared for processing on the server side

　4 done The response body The content has been successfully returned to the client

xhr.status: HTTP network status code, describing the status of the server response content

200 OR ^2\d{2} (200 or starting with 2 ) -> It means that the content of the response body has been returned successfully

　301 Permanent redirection/permanent transfer

　302 Temporary redirection/temporary transfer server load balancing

304 The content obtained this time is to read the data in the cache

　400 There is an error in the parameters passed by the client to the server

　401 No permission to access

　404 The client accessed The address does not exist

　500 Unknown server error

　503 The server has been overloaded

　　if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){
　　　　var val = xhr.responseText;
　　}
}

Send the request: The parameter is the content passed to the server in the request body

xhr.send(null);

Related recommendations:

Detailed explanation of the example of setting the http message header by the PHP header function

Comprehensive summary of related methods based on ajax in jQuery

How to use Ajax

The above is the detailed content of Examples to explain the basic knowledge of HTTP messages and ajax. For more information, please follow other related articles on the PHP Chinese website!