AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。
jQuery load() 方法
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
1 $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
示例:
1 <script> 2 $(document).ready(function(){ 3 $("#btn1").click(function(){ 4 $('#test').load('/example/jquery/demo_test.txt'); 5 }) 6 }) 7 </script> 8 </head> 9 10 <body> 11 12 <h3 id="test">请点击下面的按钮,通过 jQuery AJAX 改变这段文本。</h3> 13 <button id="btn1" type="button">获得外部的内容</button> 14 15 </body>
也可以把 jQuery 选择器添加到 URL 参数。
示例:
1 <script> 2 $(document).ready(function(){ 3 $("button").click(function(){ 4 $("#div1").load("/example/jquery/demo_test.txt #p1"); /*把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中*/ 5 }); 6 }); 7 </script>
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
1 <script> 2 $(document).ready(function(){ 3 $("button").click(function(){ 4 $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){ 5 if(statusTxt=="success") 6 alert("外部内容加载成功!"); 7 if(statusTxt=="error") 8 alert("Error: "+xhr.status+": "+xhr.statusText); 9 }); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 16 <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div> 17 <button>获得外部内容</button> 18 19 </body>
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
1 $.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
1 <script> 2 $(document).ready(function(){ 3 $("button").click(function(){ 4 $.get("/example/jquery/demo_test.asp",function(data,status){ 5 alert("数据:" + data + "\n状态:" + status); 6 }); 7 }); 8 }); 9 </script> 10 </head> 11 <body> 12 <button>向页面发送 HTTP GET 请求,然后获得返回的结果</button> 13 </body>
$.get() 的第一个参数是我们希望请求的 URL("demo_test.asp")。
第二个参数是回调函数。第一个回调参数data存有被请求页面的内容,第二个回调参数status存有请求的状态。
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
1 $.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
1 <script> 2 $(document).ready(function(){ 3 $("button").click(function(){ 4 $.post("/example/jquery/demo_test_post.asp", 5 { 6 name:"Donald Duck", 7 city:"Duckburg" 8 }, 9 function(data,status){ 10 alert("数据:" + data + "\n状态:" + status); 11 }); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 <button>向页面发送 HTTP POST 请求,并获得返回的结果</button> 18 </body>
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
然后我们连同请求(name 和 city)一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数,对它们进行处理,然后返回结果。
第三个参数是回调函数。第一个回调参数data存有被请求页面的内容,而第二个参数status存有请求的状态。
这个 ASP 文件 ("demo_test_post.asp")
1 <% 2 dim fname,city 3 fname=Request.Form("name") 4 city=Request.Form("city") 5 Response.Write("Dear " & fname & ". ") 6 Response.Write("Hope you live well in " & city & ".") 7 %>