JQuery AJAX详解-优快云博客

本文介绍了JQuery中的AJAX技术，包括基本概念、load方法、get和post请求等。load方法用于加载服务器数据并插入到页面元素中；get和post则分别用于从服务器获取数据和向服务器提交数据。

JQuery AJAX

1.1ajax

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

1.2 load()

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

实例

$("#div1").load("demo_test.txt");

实例

$("#div1").load("demo_test.txt
 #p1");

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

responseTxt - 包含调用成功时的结果内容
statusTxt - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

实例

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

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")
alert("外部内容加载成功!");

if(statusTxt=="error")
alert("Error:
"+xhr.status+":
"+xhr.statusText);
});

});

1.3 get()和post()方法

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

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

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

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

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

实例

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

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

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

});

});

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

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

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

下面的例子使用 $.post() 连同请求一起发送数据：

实例

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

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

{

name:"菜鸟教程",

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

},

function(data,status){

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

});

});