Observe the request that the client sends to the server in the HTTP protocol to understand and implement one of the simplest Ajax request cases

I. What is an HTTP protocol

HTTP protocol is Hypertext Transfer Protocol, Web site is based on HTTP protocol, such as the site's pictures, CSS, JS, etc. are based on the HTTP protocol for transmission. The HTTP protocol is constrained and regulated by requests from the client to the server (request) and responses from the server to the client (Response).

Plain English, is that you enter a URL in the browser, such as http://baidu.com, then you are to Baidu's server sent a request .... After a series of processing you do not see, your browser appears on the homepage of Baidu, this is Baidu's server to your browser's successful response.

Two. Observe the requested message at the network of the browser

1. Request: Customer service end to server initiated

2. Response: Issued by the server ...

Three. AJAX

The principle of 1.Ajax is simply to send an asynchronous request to the server via the XMLHttpRequest object, get the data from the server, and then asynchronously update the page with JavaScript to manipulate the DOM.

2. Essence: The essence is to communicate with the server asynchronously, based on the HTTP protocol.

3. A simple Ajax Request:

<form action= "login.php" method= "Get" >User name:<input type= "text" name= "UserName" id= "UserName" ><br>Password:<input type= "Password" name= "userpwd" > <br> <input type= "Submit" value= "register" ></form>< Script>/*requirements: When entering a username, go to the server to help me verify that the current user name exists*/document.getElementById ("UserName"). onblur=function(){        varName=document.getelementbyid ("UserName"). Value; /*1. Create an object that can implement an asynchronous request*/        varXhr=NewXMLHttpRequest ();        Console.log (xhr.readystate); /*2. Generating Request Messages*/        /*2.1 Request message Line*/Xhr.open ("Get", "register.php?name=" +name); /*2.2 Request Packet Header*/        /*If a GET request is not set to set the header, but if it is a POST request must be set Content-type*/        /*2.3 Request Style*/        /*if it is a GET request, then it should be passed in the URL, then send (null) if it is a POST request, then you need to create a separate request style send (username=** & pwd=**)*/Xhr.send (NULL); /*response of the listener server*/Xhr.onreadystatechange=function() {console.log (xhr.readystate); /*determines whether the current response is successful 1. The server responds 2. The result of the response is correct*/            if(xhr.status==200 && xhr.readystate==4) {console.log (xhr.readystate); varresult=Xhr.responsetext; if(result==1) {alert ("User name already exists, please re-enter"); }            }        }    }</script>

Four. Summary

A simple Ajax request (take post as an example)

1. Create an Asynchronous object

var xhr=New XMLHttpRequest ();

2. Request Line

Xhr.open (' post ', ' URL address ');

3. The request body

Xhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');

4. The Request body

Xhr.send (' name=...&age= ... '); // In plain words, the data that needs to be transferred to the URL above

The difference between 5.get and post requests

5.1get no need to set the request header

5.2get of data is passed through a URL, and post is passed in the Send method.

Observe the request that the client sends to the server in the HTTP protocol to understand and implement one of the simplest Ajax request cases