The request 10 Django Ajax

First, what is Ajax technology?

　　Asynchronous JavaScript and XML. Javascript use language to interact with the server asynchronous data transmission for XML (more use json data) .Ajax is not a new programming language, but a set of methods to use existing standards .

XMLHttpRequest object (asynchronously exchange data with servers)
JavaScript / DOM (Information Display / interactive)
CSS (custom style to the data)
XML (as data format conversion)

　　advantage:

　　　　Without reloading the real pages, you can exchange data with the server and update part of the page content. (This feature allows the user to complete the request and response unknowingly). Ajax and does not require any plug-ins, but requires the user to allow JavaScript executed on the browser.

　　(1) synchronous interaction: The client sends a request, the server must wait for the end of the response before sending the second request, it is serial.

　　(2) asynchronous interaction: client sends a request, the server without waiting for the end of the response, it can issue a second request.

Second, the basic format

　　The request is based on the use of Ajax onclick event (post)

　　When the button is clicked, it is responsible for calling a function named loadXMLDoc () is:

. 1 <div ID = "myDiv"> <H2> modify the text using AJAX </ H2> </ div>
 2 <Button type = "Button" the onclick = ", loadXMLDoc ()"> content </ button>

　　Ajax request format:

. 1 <head>
 2 <Script>
 . 3  function , loadXMLDoc ()
 . 4  {
 . 5      .... script execution AJAX ...
 . 6  }
 . 7 </ Script>
 . 8 </ head>

　　A complete code:

. 1 <! DOCTYPE HTML>
 2 <HTML>
 . 3 <head>
 . 4 <Meta charset = "UTF-. 8">
 . 5 <Script>
 . 6  function , loadXMLDoc ()
 . 7  {
 . 8      var XMLHTTP;
 . 9      IF (window.XMLHttpRequest)
 10      {
 . 11          // IE7 +, Firefox, the Chrome, Opera, Safari browser executing the code 
12 is          XMLHTTP = new new the XMLHttpRequest ();
 13 is      }
 14      the else 
15      {
 16          // IE6, IE5 browser to execute the code 
. 17          XMLHTTP = new new ActiveXObject("Microsoft.XMLHTTP");
18     }
19     xmlhttp.onreadystatechange=function()
20     {
21         if (xmlhttp.readyState==4 && xmlhttp.status==200)
22         {
23             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
24         }
25     }
26     xmlhttp.open("GET","/try/ajax/demo_get.php",true);
27     xmlhttp.send();
28 }
29 </script>
30 </head>
31 <body>
32 
33 <h2>AJAX</h2>
34 <button type="button" onclick="loadXMLDoc()">请求数据</button>
35 <div id="myDiv"></div>
36 
37 </body>
38 </html>

Third, create XMLHTTP Response Object

　　XMLHTTP Response is the foundation of Ajax, for exchanging data with the server behind the scenes. It means that you can not load a page in the case of true, certain parts of the page to be updated.

　　Create statement:

= variable new new XMLHttpRequest (); 

In order to cope with all modern browsers, including IE5 and IE6, please check whether the browser supports the XMLHttpRequest object. 
If supported, XMLHttpRequest objects are created. If not, create ActiveXObject: 

var XMLHTTP ; IF ( window . The XMLHttpRequest ) { // IE7 +, Firefox, Chrome, Opera, Safari browser to execute code XMLHTTP = new new the XMLHttpRequest ( ) ; } the else { // IE6, IE5 browser execution code XMLHTTP = new new the ActiveXObject ( " Microsoft.XMLHTTP " ) ; }

Fourth, the server sends a request to

　　XMLHttpResponse objects and server for data exchange.

　　Sending a request to the server using the two methods will be open () and send ()

. 1 xmlhttp.open ( 'the GET', "ajax_info.text", to true ); #open ( Method , URL , the async ) 
　　Method: Type of request: POST or the GET 
　　URL: location of the file on the server 
　　async: true (asynchronous) or false (synchronous) 

2 xmlhttp.send (); #send ( String ) 
　　String: POST requests only

　 File on the server is any type of file, which can be text or script .txt and .xml files such as .asp and .php (before return response value, to perform tasks on the server)

　 AJAX XMLHttpResponse if an object to be used, then, async parameter which open () method must be set to teue:

xmlhttp.open("GET","ajax_test.html",true);

　　By AJAX, JavaScript without waiting for a response from the server, but:

　　　　(1) execute other scripts while waiting for a server response

　　　　(2) When the response is ready to process the response

　　When using async = true, please provisions function in response to a state of readiness onreadystatechange event.

　　To use the async = false, set the open () method in the third parameter to false, if for some small request is also possible, but the JavaScript will wait until after the server response is ready to proceed. If the server is busy or slow, application hang or stop when async = false, do not write onreadystatechange function - put the code into the send () statements to back

1 xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
2 xmlhttp.send();
3 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Fifth, the response from the server

　　If you need to get a response from the server, use the responseText or responseXML property XMLHTTP Response object.

1  Attribute: the responseText Description: acquiring data in response to a string of
 two attributes: the responseXML Description: Gets the response data in the form of XML

The request 10 Django Ajax

Guess you like