前一篇文章,我们简单就“原始”Ajax和jquery中Ajax做了简单的对比。发现jquery是Ajax的使用变得极其简
单。之所以变得简单,是jquery针对我们平时的开发需要 ,对ajax进行了一些封装,而我们都知道,封装可以使复杂
的工作变得简单,简单的工作变得更加简单。
jquery中的Ajax封装分为三层:
- 最底层的Ajax,也就是基础Ajax的一些操作。
- load,get,post,封装了jquery的Ajax。
- getScript,getJosn,封装了get。
函数介绍:
- $.ajax(options) 把远程数据加载到XMLHttpRequest 对象中
- $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
- $.get(url,data,callback,type) 使用HTTP GET 来加载远程数据
- $.post(url,data,callback,type) 使用HTTP POST 来加载远程数据
- $.getJSON(url,data,callback) 使用HTTP GET 来加载远程 JSON 数据
- $.getScript(url,callback) 加载并执行远程的JavaScript 文件
参数说明:
- (url) 被加载的数据的 URL(地址)
- (data) 发送到服务器的数据的键/值对象
- (callback) 当数据被加载时,所执行的函数
- (type) 被返回的数据的类型(html,xml,json,jasonp,script,text)
- (options) 完整 AJAX 请求的所有键/值对选项
函数分析:
$.ajax(options)
是jquery对$,ajax的最基础封装,可以实现所有情况下的异步处理。当然,能实现的功能多,也就预示着他比较复
杂。因此它包含的参数比较多,我们就不详细的说明了,简单列一下我们经常用到的。
//一个Ajax过程
$.ajax({ type:"post", //以post方式与后台沟通
url : "login.html", //数据提交路径
dataType:'json',//从html返回的值以JSON方式 解释
data:'username='+username+'&password='+password, //发给html的数据
success:function(json){//如果调用html成功
$('#result').html("姓名:"+ json.username + "<br/>密码:" + json.password); //把html中的返回值显示在预定义的result定位符位置
}
});
$(selector).load(url,data,callback)
精简版的$.ajax(options) ,这个功能非常使用,巧妙的利用load借口,不仅可以实现我们想要的效果,而且可以降
低代码量,但是简单必然带来一点的局限性。
1.它主要用于直接返回HTML的Ajax接口
2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,即使设置了回
调函数也还是会加载.
3.我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime()来保证每次发送的URL
不同, 可以避免浏览器缓存.
实例:(来源于网络)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../scripts/jquery-1.4.3-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//发送Get请求
$("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//发送Post请求
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//发送Post请求, 返回后执行回调函数.
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//发送Get请求, 从结果中过滤掉 "鞍山" 这一项
$("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load执行Get请求</button><br />
<button id="btnAjaxPost">使用Load执行Post请求</button><br />
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
<br />
<div id="divResult"></div>
</head>
<body>
</body>
</html>
$.get(url,data,callback,type)和$.post(url,data,callback,type)
它们都是对$,ajax进行了进一步的封装,简化了操作,减少了参数。使用与某些特定环境,比如只有异步访问,没
有同步访问,或者不需要错误处理等,这里就不再单独举例。
$.getJSON(url,data,callback)和$.getScript(url,callback)
这两个接口对返回的数据类型进行了进一步的封装,可以实行跨域的数据传输。我们使用比较多的是$.getJSON,相
当于: jQuery.get(url, [data],[callback], "json")。通过 HTTP GET请求载入JSON格式的数据。也就是说:getJSON
函数仅仅将get函数的type参数设置为"JSON".在回调函数中获取的数据已经是按照JSON格式解析后的对象了,不需
要我们在手动进行处理。其中它主要的作用还是跨域的数据传输。
总结:
其实我们知道了Ajax的基本原理和最基础的实现。学习和理解这些就很简单了,我们主要也就简单让大家知
道jquery中关于Ajax的几个重要的接口。jquery中的ajax,其实就是ajax为jquery做了一个单独的工具包,让jquery可以更
好的使用ajax。当然,只靠这些接口还是远远不够的,jquery还封装了很多函数来辅助ajax,让ajax在jquery中可以更好
的发挥它的优势。大家可以多去了解了解。
附录:
.ajaxComplete() 当Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax请求发送之前显示一条消息。
jQuery.ajaxSetup()设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax请求成功完成时显示一条消息。
jQuery.param()创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
.serialize()将表单内容序列化为字符串。
.serializeArray()序列化表单元素,返回 JSON 数据结构数据。