Data interaction HTTP Request XHR

The Web browser obtains the server's data or service through an HTTP request, which is a stateless connection that is closed and then re-connected with the need. This design can greatly reduce the pressure on the server.

HTTP request:
An HTTP request is divided into the following 7 steps:
1, establish a TCP connection
2, the browser sends the request command to the server
3, the browser wants the server to send the request header information
4, server response
5, the server sends the response header information
6, the server sends data to the browser
7, the server shuts down the TCP connection

Request for HTTP request:
An HTTP request typically consists of 4 parts:
1,http method of request, common with Get and post
2, the requested URL
3, request header information, including some browser information and user identity information, etc.
4, the request body, that is, the request text, including some user's query information, form information and so on. The request header and the request body have a blank line to separate.

The following is an example of a request body:

Get method, request address, protocol version
get/login.php http/1.1
The following is the request header information
Host:localhost
Connecction:keep-alive
accept:text/javascript,application/javascript,application/ecmascript,application/x-ecmascript;q=0.01
X-requser-with:xmlhttprequest
user-agent:mozilla/5.0 (Windows NT 6.1)
Referer:http://www.baidu.com
Accept-encoding:gzip,ddeflate,sdcn
accept-langauage:zh-cn,zh,q=0.8,en;q=0.6
Empty line Disconnect request header and request body
The following is the request body information
username=admin&pwd=123456

Request Method:
Common request methods are get and post,
Get
Generally used for information acquisition
Parameter attached to URL, everyone visible
Parameter size is limited
Post
Typically used to modify server resources
Parameter package sent, generally not visible
Parameter size theoretically unlimited

HTTP Request Response Response:
An HTTP response is typically made up of 3 parts:
1, status code, tells the browser that the request is successful or not
2, the response header, like the request header, contains some environmental information, such as server type, response content type, etc.
3, response body, response text

The following is an example of a response body:
Status code
http/1.1 OK
Response header
date:sun,23 now 10:15:33 GMT
Server:apache
Content-encoding:gzip
content-length:8548484
Connecction:keep-alive
Content-type:application/javascript
Empty line break response header and response body
Response body
Alert (' Test ')

    //instantiating a Xhr object    varXHR =NewXMLHttpRequest ()//Load Request Open Method: Request method, request address, whether asynchronousXhr.open (method,url,asncy)//send: When a Get method is sent, the sent data needs to be written without sending a string or sending a null,post. xhr.send (String)//eg.        //Get:Xhr.open (' GET ', ' get.php ',true) xhr.send ()//Post:Xhr.open (' POST ', ' user.php ',true)        //Post needs to specify the type of data to send in the request header, the following is the form typeXhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ')        //you can fill in the parameters in sendXhr.send (' name=hhh&pwd=123456 ')    //Monitor state changesXhr.onreadystatechange =function() {        if(Xhr.readystate = = = 4&&xhr.status ===200){            //processing response body ResponseText, mostly JSON dataalert (Xhr.responsetext)}}

Request Status Code: Xhr.readystate
0 The request was not initialized, the open method did not call
1 connection established, open already called, sending request
2 The request has been received, that is, the request header information received
3 parsing the content that receives the parse response
4 parsing completion The browser can use the returned data.

HTTP status code: Xhr.status
1XX information class that indicates that a browser request has been received and is processing
2XX success
3xx redirection
4XX client error, such as the possibility of sending an invalid URL
5XX Service-side error

Json
JSON is a common format for interacting with server and browser data, and JSON data can be easily understood as an object without methods, but its keys need to be wrapped in double quotes. The nature of JSON is a string, so it cannot contain JavaScript code.
The deserialization form of JSON can be used directly as a JavaScript object, such as a. symbol or [] Access property
The serialized form of JSON is a string.
Json.stringify (), Json.parse () method is used for serialization and deserialization of JSON, respectively

The following is a JSON example:

    {        "nama": "Zhouxiaohouer",        "age": $,        "data":[            {                " Proid ": 112344,                " Proname ":" Xiaomi 6 "            },            {                " proid ": 112345,                 "Proname": "Xiaomi 7"            }        ]    }

Data interaction HTTP Request XHR