Home > Developer > Web Develop
AJAX = asynchronous JavaScript and XML.
AJAX is a technique for creating fast, Dynamic Web pages.
AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.
Traditional Web pages (without AJAX) if you need to update the content, you must reload the entire page surface.
There are many examples of applications that use AJAX: Sina Weibo, Google maps, happy net, and more.
Ajax Code Explanation (HTML page file):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>lkyAjax</title>
<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#tj"). Click (function () {
var xmlhttp;
if (window. XMLHttpRequest) {
XMLHTTP = new XMLHttpRequest (); Create a XMLHttpRequest object;
}
else {
XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange = function () {//onreadystatechage functions, which are called whenever the ReadyState property changes.
if (xmlhttp.readystate = = 4 && Xmlhttp.status = =) {//readystate=0: request uninitialized; =1: Server connection established;
=2: Request accepted, =3: request in process; =4: request completed and response ready;
status=400 ok;=404 When the page was not found;
$ ("#showName"). Val (Xmlhttp.responsetext); ResponseText gets the response data in the form of a string: There is also a response form Responsexml returns the XML
}
}
Xmlhttp.open ("GET", "0000.ashx?actions=ajax", false); If the incoming parameter is Chinese you must use encodeURI ("China") or it will appear garbled.
Opwn (Method,url,async); The method is: Get or post;url to handle the url;async of the page is True or false:true represents asynchronous execution; false means synchronous execution;
Xmlhttp.send (); Send (string) sends the request to the server, and the string is limited to the POST request;
});
});
Jqurey after simplification
$ (function () {
$ ("#JAtj"). Click (function () {
Htmlvar = $.ajax ({url: "0000.ashx?actions=jquery", async:true});
$ ("#Text1"). Val (Htmlvar.responsetext);
$ ("#myDiv"). Load ("0000.ashx?actions=jqueryd&&d=" + math.random ());
});
});
</script>
<body>
<div id= "Mydiv" ></div>
<input type= "text" id= "ShowName"/>
<input type= "text" id= "Text1"/>
<input type= "Submit" value= "point Me Down" id= "TJ"/>
<input type= "Submit" value= "Jqueryajax enjoy It" id= "Jatj"/>
</body>
Note
1. GET is simpler and faster than POST, and can be used in most cases.
However, use the POST request in the following cases:
2. Async=false is not recommended, but it is also possible for small requests.
Keep in mind that JavaScript waits until the server responds in readiness to continue. If the server is busy or slow, the application hangs or stops.
Note: When you use Async=false, do not write the onreadystatechange function-put the code behind the Send () statement:
Xmlhttp.open ("GET", "Test1.txt", false), Xmlhttp.send ();d Ocument.getelementbyid ("mydiv"). innerhtml= Xmlhttp.responsetext;General handler paging file
Using system;using system.collections.generic;using system.linq;using system.web;namespace ajax Big Training (/// < summary>/// _0000 Summary description/// </summary> public class _0000:ihttphandler {public void ProcessRequest (HttpContext context) { context. Response.ContentType = "Text/plain"; String name = Context. request["ActionS"]; Gets the parameter value of the context. Response.Write ("I call:" + name); Writes the page context after processing . Response.End (); } public bool IsReusable { get { return false; }}}The JQuery Library has a complete Ajax compatibility suite. The functions and methods allow us to load data from the server without refreshing the browser.
| function | Description |
|---|---|
| Jquery.ajax () | Executes an asynchronous HTTP (Ajax) request. |
| . Ajaxcomplete () | Registers the handler to invoke when the Ajax request is complete. This is an Ajax event. |
| . Ajaxerror () | Registers the handler to invoke when the Ajax request is complete and an error occurs. This is an Ajax event. |
| . Ajaxsend () | Displays a message before the Ajax request is sent. |
| Jquery.ajaxsetup () | Sets the default value for future Ajax requests. |
| . Ajaxstart () | Registers the handler to invoke when the first Ajax request finishes. This is an Ajax event. |
| . Ajaxstop () | Registers the handler to invoke when all Ajax requests are completed. This is an Ajax event. |
| . Ajaxsuccess () | Displays a message when the Ajax request completes successfully. |
| Jquery.get () | Use an HTTP GET request to load data from the server. |
| Jquery.getjson () | Loads JSON-encoded data from the server using an HTTP GET request. |
| Jquery.getscript () | Use an HTTP GET request to load a JavaScript file from the server, and then execute the file. |
| . Load () | Load the data from the server and put the matching elements back into the HTML. |
| Jquery.param () | Creates a serialized representation of an array or object, suitable for use in URL query strings or Ajax requests. |
| Jquery.post () | Load data from the server using an HTTP POST request. |
| . Serialize () | Serializes the contents of the form into a string. |
| . Serializearray () | Serializes the form element, returning the JSON data structure. |
Ajax Learning Notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
