JQuery学习之Ajax应用

1.AJAX=异步javascript和XML：在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示

 

2.load():简单但强大的AJAX方法，load()方法从服务器加载数据，并把返回的数据放入被选元中；

语法：$(selector).load(URL,data,callback);

**必需的URL参数规定所希望加载的URL

**可选的data参数规定与请求一同发送的查询字符串键/值对集合

**可选的callback参数是load()方法完成后执行的函数名称

 

$("#div1").load("demo_test.txt")             //把文件"demo_test.txt"的内容加载到指定<div>元素中

 

$("#div1").load("demo_test.txt  #p1");      //把"demo_test.txt"文件中id="p1"的元素的内容，加载到指定的<div>中

 

**可选的callback参数规定当load()方法完成后所要允许的回调函数，回调函数可以设置不同的参数：

（1）responseTxt:包含调用成功时的结果内容

（2）statusTXT:包含调用的状态

（3）xhr:包含XMLHttpRequest对象

$(document).ready(function(){

　　$("button").click(function(){

　　　　$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,status,xhr){

　　　　　　if(statusTxt="success")

　　　　　　　　alert("外部内容加载成功！");

　　　　　　if(status="error")

　　　　　　　　alert("Error: "+xhr.statusText);

　　　　});

　　});

});

 

3.HTTP请求：GET 和POST

**$.get()方法：通过HTTP GET请求从服务器上请求数据

$("button").click(function(){

　　$.get("demo_test.php",function(data,status){

　　　　alert("数据： "+data+"\n状态："+status)

　　});

});

 

语法：$.get(URL,callback);    

//必需URL参数规定你需要请求的URL

//可选的callback参数是请求成功后执行的函数名

 

4.$.post()方法：通过HTTP POST请求从服务器上请求数据

$("button").click(function(){

　　$.post("/try/ajax/demo_text_post.php",

　　　　{

　　　　name:"菜鸟教程",

　　　　url:"http://www.runoob.com"

　　　　},

　　　　function(data,status){

　　　　　　alert("数据：\n" + data +"\n状态： "+status);

　　　　});

});

语法：$.post(URL,data,callback)

//必需的URL参数规定你希望请求的URL

//可选的data参数规定连同请求发送的数据

//可选的callback参数是请求成功后所执行的函数名