Ajax synchronization of JavaScript

Source: Internet
Author: User
Tags object echo date php file return string version versions xml dom document
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.

  1. function Createxhr () {
  2. if (typeof XMLHttpRequest!= ' undefined ') {
  3. return new XMLHttpRequest ();
  4. else if (typeof activexobject!= ' undefined ') {
  5. var versions = [
  6. ' msxml2.xmlhttp.6.0 ',
  7. ' msxml2.xmlhttp.3.0 ',
  8. ' Msxml2.xmlhttp '
  9. ];
  10. for (var i = 0; i < versions.length i + +) {
  11. try {
  12. return new ActiveXObject (Version[i]);
  13. catch (e) {
  14. Jump over
  15. }
  16. }
  17. } else {
  18. throw new Error (' Your browser does not support XHR objects! ');
  19. }
  20. }
  21. 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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.