AJAX = Asynchronous JavaScript and XML.
AJAX allows asynchronous updates on webpages by exchanging a small amount of data with the server in the background. This means that it is possible to update part of the webpage without reloading the whole page.
With jQuery AJAX, you can directly load remote data into the HTML elements selected for a webpage.
Jquery Ajax has three common functions:
$. 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): loads remote data to the XMLHttpRequest object;
If you need to have an in-depth understanding of the above three ajax functions, you can refer to my blog post "jQuery AJAX function details and instance applications ".
Instance:
Ajax_load.html file content:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> ajax_load.html </title>
</Head>
<Body>
<H2 style = "color: # FF0000"> I am Li Yun and Jquery is very useful! </H2>
</Body>
</Html>
Index.html file content:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Use Ajax post, get, or Ajax 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 (){
// Poststeps: the content of the ajax_load.html file is displayed on the current page:
/*
$. Post ("ajax_load.html", function (data ){
// Alert (data );
$ ("# ChangeCon" pai.html (data );
});
*/
// Get ajax_load.html file content and displayed on the current page:
/*
$. Get ("ajax_load.html", function (data ){
$ ("# ChangeCon" pai.html (data );
});
*/
// The content of the ajaxx_ ajax_load.html file is displayed on the current page:
$. Ajax ({
Url: "ajax_load.html ",
Async: false,
Success: function (data)
{
$ ("# ChangeCon" pai.html (data );
}
})
});
})
</Script>
</Head>
<Body>
<Div id = "changeCon"> <Input type = "button" id = "button" value = "Click me"/>
</Body>
</Html>
The above three methods can achieve the same effect. This example is relatively simple. It is helpful for anyone who just got started with Jquery ajax functions, for more information, try it yourself.