1.简介
①什么是AJAX ?
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
②为什么用jQuery的AJAX方法?
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们封装好了ajax,省去不少麻烦,我们只需要一行简单的代码,就可以实现 AJAX 功能。
③jQuery的AJAX方法有哪些?
jQuery对AJAX操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法, 第2层是load()、$.get()、$.post()方法,第3层是$.getScript()和$.getJSON()方法。其中第2层方法使用频率最高。
2.load()方法
load() 方法从服务器加载数据,并把返回的数据放入被选元素$(selector)中。
语法格式:
$(selector).load( URL [,data] [,callback] );
这是服务器文件("demo_test.txt")的内容:
<h2>jQuery AJAX 是个非常棒的功能!</h2>
<p id="p1">这是段落的一些文本。</p>
实例:
$("button").click(function(){
$("#div1").load("demo_test.txt",
{
name : "li",
age : "22"
},
function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
3.$.get()方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法格式:
$.get( URL [,data] [,callback] [,type] );
注:$.get()方法是jQuery的全局函数,对象是jQuery;而不是$("selector"),jQuery对象。
实例:
$("button").click(function(){
$.get("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
} , "json" );
});
4. $.post()方法
$.post() 方法通过 HTTP POST请求从服务器上请求数据。
语法格式:
$.post( URL [,data] [,callback] [,type] ); //语法与$.get()相同