jQuery - AJAX

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 %>

 

你可能感兴趣的:(jQuery - AJAX)