Ajax
The word Ajax is no stranger to web developers, and now it's probably about the following points:
• No refresh change page data
• Asynchronous communication
$.ajax, $.get, $.post
Asynchronous Javascript and XML
•...
Ajax is an interactive Web application technology, the main purpose of the promotion of user experience, the principle is to use JavaScript XMLHttpRequest object and server communication to get data filled in the page, so as not to refresh the entire page can be feedback to the user's effect.
Commonly used Ajax
Most of the Ajax we use should be in jquery encapsulation, so we'll be relying on jquery a lot longer. And, in some usage scenarios, we only use Ajax to include the entire jquery file, which can be used to image the loading time of the page (worse when the user's network is bad).
Therefore, mastering the original Ajax writing is still very necessary, not only to get rid of jquery dependencies, but also to further deepen the understanding of asynchronous communication. It would be even better if you took the time to study the XMLHttpRequest object.
Native Ajax
• Generate XMLHttpRequest objects
The code is as follows |
Copy Code |
var xmlreq; if (window. XMLHttpRequest) { XMLreq = new XMLHttpRequest (); } else { XMLreq = new Activatexobject (' microsoft.xmlhttp '); }
|
In IE browser does not xmlhttprequest this object, to use Activatexobject (' microsoft.xmlhttp ') to replace.
• Send requests to the server
The code is as follows |
Copy Code |
For Get method Xmlreq.open (' Get ', ' ajax_get.html ', true); Xmlreq.send (); For POST method Xmlreq.open (' POST ', ' ajax_post.html ', true); Xmlreq.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded '); Xmlreq.send (' key=value&key2=value2 '); |
The third parameter of Xmlreq.open () in the above code is to control whether the asynchronous request is to be performed, and when True is what we call asynchronous communication, which is executed in the normal JavaScript logical order when false. The purpose of true asynchrony is to not affect the normal JavaScript code execution when requesting data from the server, or it may affect the browsing of the entire page if the request time is too long or an error occurs.
• Processing server response data
The code is as follows |
Copy Code |
Xmlreq.onreadystatechange = function () { if (4 = xmlreq.readystate && = xmlreq.status) { var data = Xmlreq.responsetext; return XML data var data = Xmlreq.responsexml; } } |
A complete AJAX request process can be clearly understood against the Xmlreq.readystate parameter, and the different value representation process is as follows:
ReadyState process Changes
0 Request not initialized
1 server Connection established
2 Request received
3 in Request processing
4 the request is complete and the response is ready
Simple Demo
Ajax.html
The code is as follows |
Copy Code |
<script type= "text/javascript" charset= "UTF8" function My_ajax (URL, callback) { var xmlreq; if (window. XMLHttpRequest) { XMLreq = new XMLHttpRequest (); } else { xmlreq = new Activatexobject (' microsoft.xmlhttp '); } Xmlreq.onreadystatechange = function () { alert (xmlreq.readystate); if (4 = xmlreq.readystate && = xmlreq.status) { Callback (Xmlreq.responsetext); } } Xmlreq.open (' Get ', url, false); Xmlreq.send (); } function Btn_click () { My_ajax (' ajax_get.html ', function (data) { document.getElementById (' result '). InnerHTML = data; } ); Alert (' OK '); } </script> <body> <input type= "button" value= "click" onclick= "Btn_click ()"/> <div id= "Result" ></div> </body>
|
Ajax_get.html
The code is as follows |
Copy Code |
<div> I am Ajax get Data </div> |
This article is intended to stimulate the time to have a look at the original things, although more complex.
Using XMLHttpRequest to achieve AJAX effects
Here we use the client through the XMLHttpRequest request server to obtain the current system time, realizes the asynchronous interaction!
Client myajax.html Code:
The code is as follows |
Copy Code |
<title>AJAXDEMO</title> <mce:script language= "javascript" type= "Text/javascript" ><!-- function Btn_onclick () { var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); Creates a XMLHTTP object that is equivalent to if (!xmlhttp) { Alert ("Create XMLHTTP Object exception!") "); return false; } XMLHTTP. Open ("Post", "Getdate1.ashx?&ts" +new Date (), false);/ready to send a POST request to the server Getdate1.ashx Xmlhttp.onreadystatechange = function ()//need to listen for onreadystatechange events { if (xmlhttp.readystate = 4)//server complete { if (Xmlhttp.status = 200)//If the status code is 200 it is successful { document.getElementById ("Text1"). Value=xmlhttp.responsetext; The text returned by the ResponseText property for the server } Else { Alert ("The AJAX server returned an error!") "); } } } Xmlhttp.send (); To start sending requests } --></mce:script> <body> <input id= "Text1" type= "text" disabled= "disabled"/><input id= "button1" type= "button" value= "Show System Time" onclick= "Btn_onclick ()"/> </body> |
Server-side GETDATE1.ASHX code (processed with ASHX file, no HTML code required, only server-side processing of returned data)
The code is as follows |
Copy Code |
public void ProcessRequest (HttpContext context) { Context. Response.ContentType = "text/html";
Context. Response.Write (DateTime.Now.ToString ()); Show service-side time }
|