AJAX = asynchronous JavaScript and XML. is a technique for creating fast Dynamic Web pages.
AJAX allows Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means it is possible to update part of a Web page without overloading the entire page.
With JQuery AJAX, you can load the remote data directly into the selected HTML element of the Web page.
Jquery Ajax commonly used three kinds of functions, respectively:
$.post (Url,data,callback,type): Use HTTP post to load remote data;
$.get (Url,data,callback,type): Use HTTP get to load remote data;
$.ajax (options): Load the remote data into the XMLHttpRequest object;
If you need to know more about the above three Ajax functions, refer to my Blog "jQuery AJAX functions in detail and instance applications."
Instance:
ajax_load.html File Contents:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>ajax_load.html</title>
<body>
<H2 style= "color: #FF0000" > I am Liyun, jquery is very useful! </body>
index.html File Contents:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> use Ajax post, get, or Ajax methods to change HTML content </title>
<script type= "Text/javascript" src= "Jquery-1.6.1.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#button"). Click (function () {
The Post method asynchronously obtains the contents of the Ajax_load.html file and displays it on the current page:
/*
$.post ("ajax_load.html", function (data) {
alert (data);
$ ("#changeCon"). HTML (data);
});
*/
The Get method asynchronously obtains the contents of the Ajax_load.html file and displays it on the current page:
/*
$.get ("ajax_load.html", function (data) {
$ ("#changeCon"). HTML (data);
});
*/
The Ajax method asynchronously obtains the contents of the Ajax_load.html file and displays it on the current page:
$.ajax ({
URL: "Ajax_load.html",
Async:false,
Success:function (data)
{
$ ("#changeCon"). HTML (data);
}
})
});
})
</script>
<body>
<div id= "Changecon" ><input type= "button" id= "button" value= "click Me"/>
</body>
As above, the above three methods can achieve the same effect, this example is relatively simple, for beginners to learn jquery ajax functions of a friend still have some help, more to do their own hands to try.
