Home > Web Front-end > JS Tutorial > Detailed explanation of basic knowledge of HTTP messages and ajax

Detailed explanation of basic knowledge of HTTP messages and ajax

php中世界最好的语言
Release: 2018-03-31 11:09:17
Original
1632 people have browsed it

This time I will bring you a detailed explanation of the basic knowledge of HTTP messages and ajax. What are the precautions when using HTTP messages and the basic knowledge of ajax. The following is a practical case, let's 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 HTTP message

Starting line: Request starting line Response starting line

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

Body: Request body Response Main body

The client passes the data to the server:

The request URL is passed to the server in the form of a question mark after the parameter. /getList?name=zhangsan&age=7

Set the header of the request (Set 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 response header information

Set response body content

Ajax: async javascript and xml Asynchronous JS and XML (Extensible Markup Language, used in XML files Tags are all expanded by themselves, and use their own expanded regular tags to store relevant data)

Ajax is a method in client JS, used to send requests to the server (it can also be passed to the server) data), and then obtain the content returned by the server (Ajax usually runs in the client's browser).

Ajax four steps:

Create an Ajax object(The following writing method is used in IE6 and lower versions Not supported in browsers)

var xhr = new XMLHttpRequest;
Copy after login

Basic information configuration before sending: configure 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] Provide the requested user name to the server

[userpass] Provide the requested user password to the server. These two values ​​​​are generally not written. Only if the server has made security restrictions and only allows specific users to access, we will pass it over.

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

Bind a method to the onreadystatechange event to monitor state changes (as long as the state changes, the method execution is triggered)

xhr.onreadystatechange = function(){
Copy after login

 xhr.readyState:AJAXStatus code, which can represent the current Processing progress

 0 unset The current request has not been sent

 1 opened The URL address has been opened (the parameter configuration before sending has been completed)

 2 headers_received The response header information has been Accept

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

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

xhr.status: HTTP network status Code, describing the status of the server's response content

 200 OR ^2\d{2} (200 or starting with 2) -> 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 Unauthorized access

 404 The address accessed by the client 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;
  }
}
Copy after login

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

xhr.send(null);
Copy after login

I believe you have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Ajax+node js multer to make file upload function

Ajax method to detect website hijacking

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template