使用JQuery中AJAX的几种方法

   日期:2024-12-26    作者:z2z85 移动:http://mip.riyuangf.com/mobile/quote/44578.html

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

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

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


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

例如,新建一个text.html 文档。
<!DOCTYPE html PUBLIC "https://
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="" 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 属性进
行跟踪的,把该属性封装到一个方法中,这样使用更加方便。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号