Ajax synchronization of JavaScript

A XMLHttpRequest
The core of Ajax technology is the XMLHttpRequest object (referred to as XHR), a feature introduced by Microsoft in the first place, which later provided the same implementation by other browser providers. Prior to the advent of XHR, Ajax-style communications had to be implemented using some hack means, mostly with hidden or inline frames.
The advent of XHR provides a fluent interface for sending requests to the server and analyzing the server response. Be able to get more information from the server asynchronously, which means that the user can simply trigger an event and update the server's latest data without refreshing the page.
While x in AJAX represents XML, Ajax communication is not about data format, which means that the technology does not necessarily use XML.

ie7+, Firefox, Opera, Chrome, and Safari all support native XHR objects, and creating XHR objects in these browsers can directly instantiate XMLHttpRequest.
var xhr = new XMLHttpRequest ();
alert (XHR); XMLHttpRequest

If it is IE6 and below, then we must also use ActiveX objects to implement them through the MSXML library. In a low version, IE may encounter three different versions of the Xhr object, namely Msxml2.xmlhttp, msxml2.xmlhttp.3.0, msxml2.xmlhttp.6.0. We can write a function.

2. function Createxhr () {
4. if (typeof XMLHttpRequest!= ' undefined ') {
6. return new XMLHttpRequest ();
8. else if (typeof activexobject!= ' undefined ') {
10. var versions = [
12. ' msxml2.xmlhttp.6.0 ',
14. ' msxml2.xmlhttp.3.0 ',
16. ' Msxml2.xmlhttp '
18. ];
20. for (var i = 0; i < versions.length i + +) {
22. try {
24. return new ActiveXObject (Version[i]);
26. catch (e) {
28. Jump over
30. }
32. }
34. } else {
36. throw new Error (' Your browser does not support XHR objects! ');
38. }
40. }
44. var xhr = new Createxhr ();

When using the XHR object, you must first call the open () method, which accepts three parameters: the type of request to send (get, post), the URL of the request, and whether the representation is asynchronous.
Xhr.open (' Get ', ' demo.php ', false); For demo.php get requests, false is synchronized

The code for PS:demo.php is as follows:
A time

The open () method does not actually send the request, but simply initiates a request to be sent. Send the request through the Send () method, and the Send () method takes a parameter as the data sent by the request body. If it is not needed, null must be filled in. After the Send () method is executed, the request is sent to the server.
Xhr.send (NULL); Send Request

When a request is sent to the server, the response data is automatically populated with the Xhr object's properties when the response is received. Then there are four attributes:

Property name	Description
ResponseText	The text that is returned as the response body
Responsexml	Returns an XML DOM document that contains response data if the response principal content type is "Text/xml" or "Application/xml"
Status	HTTP status of the response
StatusText	Description of the HTTP status

After accepting the response, the first step checks the status property to determine that the response has been successfully returned. In general, the HTTP status code is 200 as a sign of success. In addition to the success of the status code, there are some other:

HTTP status Code	Status string	Description
200	Ok	The server successfully returned the page
400	Bad Request	Syntax error causes server to not recognize
401	Unauthorized	Request requires user authentication
404	Not found	The specified URL could not be found on the server
500	Internal Server Error	The server encountered an unexpected error and could not complete the request
40R	Serviceunavailable	Unable to complete request due to server overload or maintenance

We can determine the HTTP status value, and we do not recommend using the HTTP status description, because it may not be consistent across browsers.

1. Addevent (document, ' click ', function () {
2. var xhr = new Createxhr ();
3. Xhr.open (' Get ', ' demo.php?rand= ' + Math.random (), false); Set the synchronization
4. Xhr.send (NULL);
5. if (Xhr.status = = 200) {//If the return succeeds
6. alert (Xhr.responsetext); Bring up the data returned by the server
7. } else {
8. Alert (' Data return failed! Status code: ' + xhr.status + ' status information: ' + Xhr.statustext ';
9. }
10. });

//ps: If not sent to the server side, Firebug no send prompt, if there is send () method, then Firebug will be prompted to send//ps: by clicking the event, constantly send the request to the server, and then the server will always return the latest data, is the AJAX function/ The first time the/ps:ie browser requests the server-side to get the latest data, and the second time it gets the cached data by default, causing the data to be not the latest//ps: How do I handle caching? can use JS random string

The above code each time you click on the page, the return time is always, different, the description is through the server in time to load back data. Then we can also test the situation in non-Ajax situations, create a demo2.php file, and use non-Ajax.

1. <script type= "Text/javascript" src= "Base.js" ></script>
2. <script type= "Text/javascript" >
3. Addevent (document, ' click ', function () {
4. Alert ("<?php echo Date (' y-m-d h:i:s ')?>");
5. });
6. </script>