使用JQuery中AJAX的几种方法

 jQuery 也支持 Ajax 技术，它封装了 XMLHttpRequest 组件并初始化，还封装了 Ajax 请求
中各种基本操作，并 把这些操作定义为简单的方法。另 外，把 Ajax请求中各种状态封装为事件，

这样只要调用对应的事件就可以快速执行绑定的回调函数。

jQuery 封装了多种方法实现与远程进行通信，下面分别进行讲解。


1.方法一：load(url,[data],[callback])
load()方法能够载入远程HTML 文件代码并插入到匹配元素中。默认使用GET 方式，传递
附加参数时自动转换为POST 方式。

例如，新建一个text.html 文档。
<!DOCTYPE html PUBLIC "//
W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.
dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta httpequiv="
ContentType"
content="text/html; charset=utf8"
/>
<title>Ajax 请求</title>
</head>
<body>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</body>
</html>
然后在当前示例文档中输入下面代码：
<ul></ul>
<script language="JavaScript" type="text/javascript">
$("ul").load("test.html");
</script>
这样 jQuery 会自动从 text.html 文档中提取 body 元素包含的代码，并把这些代码插入到匹
配的ul 元素中。最后显示为：

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

请注意，在使用load()方法时，所有页面的字符编码应该设置为utf8，
否则jQuery 在加载
文档时会显示乱码。另外，匹配的元素应该只有一个，否则系统会出现异常。例如，下面代码
将会导致加载出现异常。
<ul></ul>
<ul></ul>
<script language="javascript" type="text/javascript">
$("ul").load("test.html");
</script>
load(url,[data],[callback])方法还可以附带传递参数，这些参数将以 POST 方式传递给服
务器，并可以定义加载成功时执行的回调函数。例如，下面示例将向服务器端的 test.asp 发
送一个请求，并以 POST 的方式传递一个参数 name，参数值为“zhu”。 加载成功之后会弹出
一个提示信息对话框。
<ul></ul>
<script language="javascript" type="text/javascript">
$("ul").load("2088_
test.asp", {name:"zhu"}, function(){
alert("加载成功！");
});
</script>


2.方法二： jQuery.get(url,[data],[callback])

jQuery.get()方法能够通过远程HTTP GET 方式请求载入信息。该方法包含三个参数，参数
含义与load()方法相同。例如，新建一个test.asp 服务器文件，输入下面代码，用来获取客户端
传递过来的查询字符串信息，并把这些信息反馈给客户端。请注意，本示例需要服务器环境的
支持，否则无法执行。
<%
dim str
str = Request.QueryString("name") '从客户端接收查询字符串参数值
Response.Write str '把接收的查询字符串再响应给客户端
%>
然后，在示例文档中输入下面代码：
<script language="javascript" type="text/javascript">
$.get("test.asp", {name:"zhu"}, function(data){
alert(data);
});
</script>
在上面代码中使用jQuery对象的get()方法向服务器端test.asp文件发送一个请求，并 以GET
的方式向服务器传递一个参数，服务器响应之后会把返回值存储在回调函数参数中，所以，最
后弹出的提示对话框显示为“zhu”字符信息。

 

3.方法三：jQuery.post(url,[data],[callback])
jQuery.post() 与 jQuery.get() 的操作方法相同， 不同点是它们传递参数的方式不同。

jQuery.post()是以POST方式来传递参数，所 传递的信息可以不受限制，且 可以传递二进制信息，
具体用法就不再举例。

 

4.方法四：jQuery.ajax()

jQuery.ajax(options)方法与 9.1 节讲解的几个方法功能相同，都是向服务器端发送请求，并
传递参数，最后调用回调函数获取响应信息。下面看一个示例，该示例是在 9.1 节示例基础上
进行修改的。
首先，建立一个服务器端处理文件（test.asp），代码如下：
<%
dim user,where
user = Request.Form("user")
where = Request.Form("where")
Response.AddHeader "ContentType","
text/html;charset=utf8"
Response.Write user&"在"&where
%>
在上面代码中，首先获取客户端传递过来的参数值，使用 Request.Form()数据集合
进行读取，因为客户端采用 POST 方式进行传递。然后再把这些信息传递给客户端，考
虑到传递字符中可能包含中文字符，所以这里需要设置传递的文件字符，编码统一为utf8

在本地文件中输入下面代码：
<script language="javascript" type="text/javascript">
$.ajax({
type: "POST", //设置请求方式
url: "2091_
test.asp", //设置请求URL
data: "user=朱印宏&where=家里", //设置传递的参数值
success: function(msg){ //设置响应成功之后执行的回调函数
alert(msg ); //显示服务器响应的信息
}
});
</script>
最后执行文件，会弹出如图4 所示的提示信息。

jQuery.ajax()方法的主要参数名及其说明
参数名 说 明
async
逻辑值，默认为 true，即请求为异步请求。如果需要发送同步请求，该选项设置为 false。同步请求将锁住浏
览器，用户的其他操作必须等待请求完成才可以执行
beforeSend 发送请求前可修改 XMLHttpRequest 对象的函数
cache 是否从浏览器缓存中加载请求信息，默认为 false
complete 请求完成后回调函数，不管请求是成功还是失败均调用
contentType 发送信息到服务器时内容编码类型，默认为适合大多数应用场合
data
发送到服务器的数据将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。如果 processData 选项禁
止此自动转换， 必须为名/ 值对格式。如果为数组， jQuery 将自动为不同值对应同一个名称， 如
{foo:["bar1","bar2"]}转换为'&foo=bar1&foo=bar2'
dataType 预期服务器返回的数据类型。取值包括 xml、html、script、json 和 jsonp
error 请求失败时调用函数
global 是否触发全局 Ajax 事件，默认为 true
ifModified 是否仅在服务器数据改变时获取新数据，默认为 false
processData 发送的数据是否可以被转换为对象，默认为 true
success 请求成功后回调函数，参数为服务器返回数据
timeout 设置请求超时时间（毫秒）
type 发送请求的方式，默认为 GET，取值包含 POST、GET、PUT 和 DELETE
url 发送请求的地址

 

5.另外：Ajax 事件

讲解的几个 Ajax 请求所使用的方法外，jQuery 为了方便用户灵活跟踪 Ajax 请
求和响应整个完整的过程，还定义了几个事件函数，说明如表7 所示。
表7 Ajax 事件函数及其说明
Ajax 事件 说 明
ajaxStart(callback) Ajax 请求开始时执行函数
ajaxSend(callback) Ajax 请求发送前执行函数
ajaxComplete(callback) Ajax 请求完成时执行函数
ajaxSuccess(callback) Ajax 请求成功时执行函数
ajaxError(callback) Ajax 请求发生错误时执行函数
ajaxStop(callback) Ajax 请求结束时执行函数
例如，下面示例连续跟踪Ajax 请求的全部过程。该过程实际上还是利用readyState 属性进
行跟踪的，把该属性封装到一个方法中，这样使用更加方便。


<p></p>
<script language="javascript" type="text/javascript">
$.ajax({
type: "POST",
url: "2091_
test.asp",
data: "user=朱印宏&where=家里"
});
$("p").ajaxStart(function(){
$(this).text("Ajax 请求开始");
});
$("p").ajaxSend(function(){
$(this).text("Ajax 请求开始发送");
});
$("p").ajaxComplete(function(){
$(this).text("Ajax 请求完成");
});
$("p").ajaxSuccess(function(){
$(this).text("Ajax 请求成功");
});
</script>

posted on 2017-06-08 15:29  alex5211314  阅读(176)  评论(0)  编辑  收藏  举报

导航