The problem with Ajax

1. What is Ajax

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technique that creates interactive Web applications.

Ajax:asynchronous Javascript and XML, asynchronous JS and XML.

In 2002,Google introduced the "Google Suggest" effect in the search engine, naming the technology used as "AJAX", in order to avoid "a pale" in the browser. affect the browsing experience.

The principle of implementation: While the client browses the content of the Web page, the server provides the latest content, the local update in the page- no submission without refreshing the content of the Local update technology .

Ajax applications involve the technology: HTML, CSS, JS, DOM, XML, HTTP protocol, etc.-Pure front-end technology, need to interact with the Web server.

2. The browser initiates the HTTP request in two ways:

(1) Synchronization request: Address bar, form submission, hyperlink jump, JS jump

(2) Asynchronous request: Using the XHR object

3. Steps to initiate an HTTP request using XHR

1 Creating a Xhr Object

var xhr = new XMLHttpRequest ();

2 Monitoring the status change events of XHR

Xhr.onreadystatechange = function () {

if (xhr.readystate===4) {//Response message receive complete

if (xhr.status===200) {//response completed and successful

}else{//Response completed but there is a problem

}}}

3 Connecting to the server

Xhr.open (' GET ', ' x.php ', true);

4 Sending a request message

Xhr.send (Null/' k=v&k=v ');

4.XHR Object member properties:

2. readystate:0 Ready State , automatically changing with request -response
4. Response: ""
6. ResponseText: "" Response message body , readyState becomes 3 only has value
8. Responsetype: ""
10. Responseurl: ""
12. Responsexml:null response message body , readyState changes to 3 to have value
14. status:0 Response Status Code ,readyState changed to 2 to have value
16. StatusText: "" Reason ,readyState changed to 2 to have value
18. timeout:0
20. Done:4 ReadyState One of the desirable values, the response message receives completion
22. Headers_received:2 ReadyState One of the desirable values to begin receiving the response message header
24. Loading:3 ReadyState One of the desirable values to begin loading the response message body
26. Opened:1 ReadyState One of the desirable values,XHR has opened a connection to the server
28. unsent:0 ReadyState One of the desirable values, the request message has not been sent

5.XHR Object member Methods:

1. getAllResponseHeaders:getallresponseheaders ()
2. getResponseHeader:getresponseheader () read response header
3. setRequestHeader:setrequestheader () set request Header
4. Open: Opened() opens a connection to the server
5. Send: Sent() sends a request message

The problem with Ajax