Ajax Concept Introduction (synchronous and asynchronous, XMLHttpRequest object, ajax-http request, Mlhttprequest send request, XMLHttpRequest get response)

AJAX: Asynchronous JavaScript and XML
Ajax is not a programming language. It is a technology that can update parts of a web page without reloading the entire web page.
1Ajax synchronous and asynchronous
Ajax three steps:
Asynchronous Javascript And XML
1. Use HTML and CSS to implement pages and express information;
2. Use XMLHttpRequest and web server for asynchronous data exchange;
3. Use JavaScript to manipulate the DOM to achieve dynamic local refresh;

1. Synchronization: After the user fills in the information, all are submitted to the server, waiting for the server's response, all at once.
2. Asynchronous: After the user fills in a piece of information, this piece of information is automatically submitted to the server, and then the server responds to the client. In this process, the user is still filling in the form information, that is, asking the server multiple times, saving the user Time to improve the user experience.
3.XMLhttpRequest object to achieve this function, also need javascript to manipulate the DOM to achieve local information update.

The emergence of the XMLHttpRequest object separates synchronous and asynchronous. XMLHttpRequest was synchronous before it appeared, and asynchronous after it appeared.
Synchronization: The page request is transmitted to the server in real time. When the required data is not filled, it must be returned to the page and re-filled from the beginning, which takes a long time and the customer experience is poor.
Asynchronous: Write the required options in the required items on the page, and do not need to pass the information to the server to determine whether the required content has been completed completely. It takes a short time and has a strong user experience.
2XMLHttpRequest object All modern browsers support the XMLHttpRequest object. Asynchronous implementation uses the XMLHttpRequest object and uses this object for asynchronous operations, that is, the background can exchange data with the server without reloading the entire page, and only updating part of the page. Syntax for creating XMLHttpRequest objects: variable = new XMLHttpRequest (); Older versions of Internet Explorer (IE5 and IE6) used ActiveX objects: variable = new ActiveXObject ("Microsoft.XMLHTTP"); In order to deal with all modern browsers, including IE5 and IE6, check if the browser supports XMLHttpRequest object. If supported, an XMLHttpRequest object is created. If not, create ActiveXObject: var xmlhttp; if (window.XMLHttpRequest) {// code for IE7 +, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest ();} else {// code for IE6, IE5 xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");} 3ajax-http request
1.HTTP is the rule for computers to communicate through the network
2.HTTP is a stateless protocol (do not establish a persistent connection, the server does not retain information about the connection, the browser sends a request and the server returns a response is a memoryless process)
3. A complete [HTTP Request] process has 7 steps:
1> Establish TCP connection
2> Web browser sends request command to web server
3> Web browser sends request header information
4> Web server response
5> Web server sends response header information
6> Web server sends data to browser
7> Web server closes TCP connection

http request:
1. HTTP request method or action, post or get
2. URL being requested
3. The request header contains some client environment information, authentication information, etc.
4. Request body (request body), containing some string information, form information, etc. to be sent
// There is a blank line between the request header and the request body. The surface request header has ended
GET: generally used to obtain information, using URL to pass parameters, there is also a limit on the number of messages sent, generally 2000 characters. The default method is generally used for querying and obtaining operations. It is not very secure. Anyone can see it and the information is displayed in the URL.
POST: generally used to modify the resources on the server, there is no limit to the number sent. Generally used to send form data, create, modify, delete and other operations. Be safe, not displayed in the URL, and not displayed to others.
[Idempotent]: The impact of any number of executions of an operation is the same as the impact of one execution. A GET request is an idempotent operation.

[HTTP response] Generally consists of 3 parts:
① A number or text status code used to show whether the request was successful or failed
② The response header, like the request header, contains a lot of useful information, such as server type, date and time, content type and length, etc.
③ Response body, that is, there is a blank line between the response body // response header and the response body

[HTTP status code]
1XX: Information class, which indicates that a web browser request has been received and is being further processed
2XX: Success, indicating that the user request was received correctly
3XX: redirection, indicating that the request was unsuccessful and the customer must take further action
4XX: Client error, indicating that there is an error in the request submitted by the client, for example: 404 NOT Found, which means that the document referenced in the request does not exist
5XX: server error, indicating that the server cannot complete the processing of the request, such as: 500

4XMLHttpRequest sends a request: two methods open (method, url, async) method: specifies whether the HTTP method of sending a request is get or post, it is not case sensitive, generally use uppercase url: request address (relative address or absolute address) async : Synchronous / Asynchronous (false / true), the default is asynchronous, that is true, you can not fill in send (string): send to the server (this parameter can be filled or not filled ----- get method is not filled or filled null, post : Generally required) For example: request.open ("POST", "create.php", true); request.setRequestHeader ("Content-type", "application / x-www-form-urlencoded") // Set HTTP Header information-must be written between open () and send () request.send ("name = xxxx & set = xxx");
5XMLHttpRequest get response * responseText: get response data in string form * responseXML: get response data in XML form (less) * status and statusText: return HTTP status code in numeric and text form * getAllResponseHeader (): get all response headers * getResponseHeader (): The value of a field in the query response. The change in the readyState property represents a change in the server response. 0: The request has not been initialized, open has not been called 1: the server connection has been established, open has been called 2: the request has been received, That is, the header information is received 3: the request is being processed, that is, the response body is received 4: the request is completed and the response is ready, that is, the response is completed var request = new XMLHttpRequest () // Create XHR object request.open ( "GET", "get.php", true); // Open get.php request.send () asynchronously with the get method; // send request header information request.onreadystatechange = function () {if (request.readState == = 4 && request.status === 200) {// do something request.responseText;}} Through the onreadystatechange event, the readyState belongs to Listening is monitoring the server's response. ReadyState === 4 The response is completed. Status === 200. The request successfully establishes an asynchronous request in 4 steps: a: new an XHR object b: call the open method c: send some Data d: Listen to the process to know whether the server responded correctly, and then you can do some things (listen for readyState, you can do some things if the response is successful, such as getting the server response content to do some rendering on the page)