从零开始学习jQuery (六) AJAX快餐
本系列文章导航<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (一)<input id="email" name="email" type="text" /> 开天辟地入门篇
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (二)<input id="email" name="email" type="text" /> 万能的选择器
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (三)<input id="email" name="email" type="text" /> 管理jQuery包装集
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (四)<input id="email" name="email" type="text" /> 使用jQuery操作元素的属性与样式
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (五)<input id="email" name="email" type="text" /> 事件与事件对象
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (六)<input id="email" name="email" type="text" /> jQuery中的Ajax
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (七)<input id="email" name="email" type="text" /> jQuery动画-让页面动起来!
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (八)<input id="email" name="email" type="text" /> 插播:jQuery实施方案
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (九)<input id="email" name="email" type="text" /> jQuery工具函数
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (十)<input id="email" name="email" type="text" /> jQueryUI常用功能实战
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 从零开始学习jQuery<input id="email" name="email" type="text" /> (十一)<input id="email" name="email" type="text" /> 实战表单验证与自动完成提示插件
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 一.摘要
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 本系列文章将带您进入jQuery的精彩世界,<input id="email" name="email" type="text" /> 其中有很多作者具体的使用经验和解决方案, <input id="email" name="email" type="text" /> 即使你会使用jQuery也能在阅读中发现些许秘籍.
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 二.前言
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> Ajax让用户页面丰富起来,<input id="email" name="email" type="text" /> 增强了用户体验.<input id="email" name="email" type="text" /> 使用Ajax是所有Web开发的必修课.<input id="email" name="email" type="text" /> 虽然Ajax技术并不复杂,<input id="email" name="email" type="text" /> 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异,<input id="email" name="email" type="text" /> 并且让调用Ajax更加简单.
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 三.原始Ajax与jQuery中的Ajax
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 首先通过实例,<input id="email" name="email" type="text" /> 来看一下jQuery实现Ajax有多简单.<input id="email" name="email" type="text" /> 下面是一个使用原始Ajax的示例:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <!DOCTYPE<input id="email" name="email" type="text" /> html<input id="email" name="email" type="text" /> PUBLIC<input id="email" name="email" type="text" /> "-//W3C//DTD<input id="email" name="email" type="text" /> XHTML<input id="email" name="email" type="text" /> 1.0<input id="email" name="email" type="text" /> Transitional//EN"<input id="email" name="email" type="text" /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html<input id="email" name="email" type="text" /> xmlns="http://www.w3.org/1999/xhtml">
<head>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <title>jQuery<input id="email" name="email" type="text" /> Ajax</title>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</head>
<body><input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnAjaxOld">原始Ajax调用</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</body>
</html>
上面的实例中,<input id="email" name="email" type="text" /> data/AjaxGetCityInfo.aspx?resultType=html<input id="email" name="email" type="text" /> 地址会返回一段HTML代码.<input id="email" name="email" type="text" />
使用原始Ajax,<input id="email" name="email" type="text" /> 我们需要做较多的事情,<input id="email" name="email" type="text" /> 比如创建XmlHttpRequest对象, <input id="email" name="email" type="text" /> 判断请求状态,<input id="email" name="email" type="text" /> 编写回调函数等.
而用jQuery的Load方法,<input id="email" name="email" type="text" /> 只需要一句话:
$("#divResult").load("data/AjaxGetCityInfo.aspx",<input id="email" name="email" type="text" /> {<input id="email" name="email" type="text" /> "resultType":<input id="email" name="email" type="text" /> "html"<input id="email" name="email" type="text" /> });
曾经我是一个原始Ajax的绝对拥护者,<input id="email" name="email" type="text" /> 甚至摒弃微软的Asp.net<input id="email" name="email" type="text" /> Ajax,<input id="email" name="email" type="text" /> 因为我想要最高的代码灵活度.<input id="email" name="email" type="text" /> 使用原始Ajax让我感觉完成自己的工作更加轻松,<input id="email" name="email" type="text" /> 即使多写了一些代码.<input id="email" name="email" type="text" /> 但是当我去翻看别人的Ajax代码并且尝试修改的时候,<input id="email" name="email" type="text" /> 我改变了我的看法--我们的代码到处分布着创建XmlHttpRequest方法的函数,<input id="email" name="email" type="text" /> 或者某些Ajax程序逻辑性和结构性很差,<input id="email" name="email" type="text" /> 很难看懂.<input id="email" name="email" type="text" />
我们可以将通用方法放到一个js文件中,<input id="email" name="email" type="text" /> 然后告诉大家"嘿伙伴们,<input id="email" name="email" type="text" /> 都来用这个js中的方法".<input id="email" name="email" type="text" /> 但是在某些时候有些新来的外包人员并不知道有这个js文件的存在.<input id="email" name="email" type="text" /> 而且其实这个通用的js就是一个公共的脚本类库, <input id="email" name="email" type="text" /> 我相信没有人会觉得自己开发一个类库会比jQuery更好!
所以我放弃了制造轮子的计划, <input id="email" name="email" type="text" /> 大家都使用jQuery编写Ajax相关的方法就可以解决各种差异性问题,<input id="email" name="email" type="text" /> 并且让工作更有效率.
现在只是用jQuery的Ajax函数,<input id="email" name="email" type="text" /> 我的页面变得简洁了:<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<!DOCTYPE<input id="email" name="email" type="text" /> html<input id="email" name="email" type="text" /> PUBLIC<input id="email" name="email" type="text" /> "-//W3C//DTD<input id="email" name="email" type="text" /> XHTML<input id="email" name="email" type="text" /> 1.0<input id="email" name="email" type="text" /> Transitional//EN"<input id="email" name="email" type="text" /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html<input id="email" name="email" type="text" /> xmlns="http://www.w3.org/1999/xhtml">
<head>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <title>jQuery<input id="email" name="email" type="text" /> Ajax</title>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</head>
<body><input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnAjaxJquery">使用jQuery的load方法</button>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</body>
</html>
四.jQuery<input id="email" name="email" type="text" /> Ajax详解
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
jQuery提供了几个用于发送Ajax请求的函数.<input id="email" name="email" type="text" /> 其中最核心也是最复杂的是jQuery.ajax(<input id="email" name="email" type="text" /> options<input id="email" name="email" type="text" /> ),所有的其他Ajax函数都是它的一个简化调用.<input id="email" name="email" type="text" /> 当我们想要完全控制Ajax时可以使用此结果,<input id="email" name="email" type="text" /> 否则还是使用简化方法如get,<input id="email" name="email" type="text" /> post,<input id="email" name="email" type="text" /> load等更加方便.<input id="email" name="email" type="text" /> 所以jQuery.ajax(<input id="email" name="email" type="text" /> options<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> 方法放到最后一个介绍.<input id="email" name="email" type="text" /> 先来介绍最简单的load方法:
1. <input id="email" name="email" type="text" /> load(<input id="email" name="email" type="text" /> url,<input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> jQuery包装集
说明:
load方法能够载入远程<input id="email" name="email" type="text" /> HTML<input id="email" name="email" type="text" /> 文件代码并插入至<input id="email" name="email" type="text" /> DOM<input id="email" name="email" type="text" /> 中。<input id="email" name="email" type="text" />
默认使用<input id="email" name="email" type="text" /> GET<input id="email" name="email" type="text" /> 方式,<input id="email" name="email" type="text" /> 如果传递了data参数则使用Post方式.<input id="email" name="email" type="text" />
-<input id="email" name="email" type="text" /> 传递附加参数时自动转换为<input id="email" name="email" type="text" /> POST<input id="email" name="email" type="text" /> 方式。jQuery<input id="email" name="email" type="text" /> 1.2<input id="email" name="email" type="text" /> 中，可以指定选择符，来筛选载入的<input id="email" name="email" type="text" /> HTML<input id="email" name="email" type="text" /> 文档，DOM<input id="email" name="email" type="text" /> 中将仅插入筛选出的<input id="email" name="email" type="text" /> HTML<input id="email" name="email" type="text" /> 代码。语法形如<input id="email" name="email" type="text" /> "url<input id="email" name="email" type="text" /> #some<input id="email" name="email" type="text" /> ><input id="email" name="email" type="text" /> selector",<input id="email" name="email" type="text" /> 默认的选择器是"body>*".<input id="email" name="email" type="text" />
讲解:<input id="email" name="email" type="text" />
load是最简单的Ajax函数,<input id="email" name="email" type="text" /> 但是使用具有局限性:<input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
[*]它主要用于直接返回HTML的Ajax接口<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
[*]load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,<input id="email" name="email" type="text" /> 即使设置了回调函数也还是会加载.
不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:
<!DOCTYPE<input id="email" name="email" type="text" /> html<input id="email" name="email" type="text" /> PUBLIC<input id="email" name="email" type="text" /> "-//W3C//DTD<input id="email" name="email" type="text" /> XHTML<input id="email" name="email" type="text" /> 1.0<input id="email" name="email" type="text" /> Transitional//EN"<input id="email" name="email" type="text" /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html<input id="email" name="email" type="text" /> xmlns="http://www.w3.org/1999/xhtml">
<head>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <title>jQuery<input id="email" name="email" type="text" /> Ajax<input id="email" name="email" type="text" /> -<input id="email" name="email" type="text" /> Load</title>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</head>
<body><input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnAjaxGet">使用Load执行Get请求</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnAjaxPost">使用Load执行Post请求</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</body>
</html><br>
上面的示例演示了如何使用Load方法.<input id="email" name="email" type="text" />
提示:我们要时刻注意浏览器缓存, <input id="email" name="email" type="text" /> 当使用GET方式时要添加时间戳参数<input id="email" name="email" type="text" /> (net<input id="email" name="email" type="text" /> Date()).getTime()<input id="email" name="email" type="text" /> 来保证每次发送的URL不同,<input id="email" name="email" type="text" /> 可以避免浏览器缓存.
提示:<input id="email" name="email" type="text" /> 当在url参数后面添加了一个空格,<input id="email" name="email" type="text" /> 比如" <input id="email" name="email" type="text" /> "的时候,<input id="email" name="email" type="text" /> 会出现"无法识别符号"的错误,<input id="email" name="email" type="text" /> 请求还是能正常发送.<input id="email" name="email" type="text" /> 但是无法加载HTML到DOM.<input id="email" name="email" type="text" /> 删除后问题解决.<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
2.jQuery.get(<input id="email" name="email" type="text" /> url,<input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> XMLHttpRequest
说明:
通过远程<input id="email" name="email" type="text" /> HTTP<input id="email" name="email" type="text" /> GET<input id="email" name="email" type="text" /> 请求载入信息。<input id="email" name="email" type="text" />
这是一个简单的<input id="email" name="email" type="text" /> GET<input id="email" name="email" type="text" /> 请求功能以取代复杂<input id="email" name="email" type="text" /> $.ajax<input id="email" name="email" type="text" /> 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用<input id="email" name="email" type="text" /> $.ajax。<input id="email" name="email" type="text" />
讲解:
此函数发送Get请求,<input id="email" name="email" type="text" /> 参数可以直接在url中拼接,<input id="email" name="email" type="text" /> 比如:
$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");
或者通过data参数传递:
$.get("../data/AjaxGetMethod.aspx",<input id="email" name="email" type="text" /> {<input id="email" name="email" type="text" /> "param":<input id="email" name="email" type="text" /> "btnAjaxGet2_click"<input id="email" name="email" type="text" /> });
两种方式效果相同,<input id="email" name="email" type="text" /> data参数会自动添加到请求的url中
如果url中的某个参数,<input id="email" name="email" type="text" /> 又通过data参数传递,<input id="email" name="email" type="text" /> 不会自动合并相同名称的参数.
回调函数的签名如下:
function<input id="email" name="email" type="text" /> (data,<input id="email" name="email" type="text" /> textStatus)<input id="email" name="email" type="text" /> {
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> //<input id="email" name="email" type="text" /> data<input id="email" name="email" type="text" /> could<input id="email" name="email" type="text" /> be<input id="email" name="email" type="text" /> xmlDoc,<input id="email" name="email" type="text" /> jsonObj,<input id="email" name="email" type="text" /> html,<input id="email" name="email" type="text" /> text,<input id="email" name="email" type="text" /> etc...
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> this;<input id="email" name="email" type="text" /> //<input id="email" name="email" type="text" /> the<input id="email" name="email" type="text" /> options<input id="email" name="email" type="text" /> for<input id="email" name="email" type="text" /> this<input id="email" name="email" type="text" /> ajax<input id="email" name="email" type="text" /> request
}<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
其中data是返回的数据,<input id="email" name="email" type="text" /> testStatus表示状态码,<input id="email" name="email" type="text" /> 可能是如下值:
<strong>"timeout","error","notmodified","success","parsererror"</strong>在回调函数中的this是获取options对象的引用.有关options的各种说明,<input id="email" name="email" type="text" /> 请参见:http://docs.jquery.com/Ajax/jQuery.ajax#options type参数是指data数据的类型,<input id="email" name="email" type="text" /> 可能是下面的值:<strong>"xml",<input id="email" name="email" type="text" /> "html",<input id="email" name="email" type="text" /> "script",<input id="email" name="email" type="text" /> "json",<input id="email" name="email" type="text" /> "jsonp",<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> "text".</strong><input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
默认为"html".
jQuery.getJSON(<input id="email" name="email" type="text" /> url,<input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> 方法就相当于<input id="email" name="email" type="text" /> jQuery.get(url,<input id="email" name="email" type="text" /> ,,<input id="email" name="email" type="text" /> "json")
3.<input id="email" name="email" type="text" /> jQuery.getJSON(<input id="email" name="email" type="text" /> url, <input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> XMLHttpRequest
相当于: <input id="email" name="email" type="text" /> jQuery.get(url,<input id="email" name="email" type="text" /> ,,<input id="email" name="email" type="text" /> "json")
说明:
通过<input id="email" name="email" type="text" /> HTTP<input id="email" name="email" type="text" /> GET<input id="email" name="email" type="text" /> 请求载入<input id="email" name="email" type="text" /> JSON<input id="email" name="email" type="text" /> 数据。<input id="email" name="email" type="text" />
在<input id="email" name="email" type="text" /> jQuery<input id="email" name="email" type="text" /> 1.2<input id="email" name="email" type="text" /> 中，您可以通过使用JSONP<input id="email" name="email" type="text" /> 形式的回调函数来加载其他网域的JSON数据，如<input id="email" name="email" type="text" /> "myurl?callback=?"。jQuery<input id="email" name="email" type="text" /> 将自动替换<input id="email" name="email" type="text" /> ?<input id="email" name="email" type="text" /> 为正确的函数名，以执行回调函数。<input id="email" name="email" type="text" />
注意：此行以后的代码将在这个回调函数执行前执行。<input id="email" name="email" type="text" />
讲解:<input id="email" name="email" type="text" />
getJSON函数仅仅将get函数的type参数设置为"JSON"而已.<input id="email" name="email" type="text" /> 在回调函数中获取的数据已经是按照JSON格式解析后的对象了:
$.getJSON("../data/AjaxGetCityInfo.aspx",<input id="email" name="email" type="text" /> {<input id="email" name="email" type="text" /> "resultType":<input id="email" name="email" type="text" /> "json"<input id="email" name="email" type="text" /> },<input id="email" name="email" type="text" /> function(data,<input id="email" name="email" type="text" /> textStatus)
{
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(data.length);
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(data.CityName);
});
服务器端返回的字符串如下:
[{""pkid"":""0997"",""ProvinceId"":""XJ"",""CityName"":""阿克苏"",""CityNameEn"":""Akesu"",""PostCode"":""843000"",""isHotCity"":false},
<input id="email" name="email" type="text" /> {""pkid"":""0412"",""ProvinceId"":""LN"",""CityName"":""鞍山"",""CityNameEn"":""Anshan"",""PostCode"":""114000"",""isHotCity"":false}] <input id="email" name="email" type="text" />
示例中我返回的饿是一个数组,<input id="email" name="email" type="text" /> 使用data.length可以获取数组的元素个数, <input id="email" name="email" type="text" /> data访问第一个元素,<input id="email" name="email" type="text" /> data.CityName访问第一个元素的CityName属性.
4.jQuery.getScript(<input id="email" name="email" type="text" /> url,<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> XMLHttpRequest
相当于: <input id="email" name="email" type="text" /> jQuery.get(url,<input id="email" name="email" type="text" /> null,<input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> "script")
说明:
通过<input id="email" name="email" type="text" /> HTTP<input id="email" name="email" type="text" /> GET<input id="email" name="email" type="text" /> 请求载入并执行一个<input id="email" name="email" type="text" /> JavaScript<input id="email" name="email" type="text" /> 文件。<input id="email" name="email" type="text" />
jQuery<input id="email" name="email" type="text" /> 1.2<input id="email" name="email" type="text" /> 版本之前，getScript<input id="email" name="email" type="text" /> 只能调用同域<input id="email" name="email" type="text" /> JS<input id="email" name="email" type="text" /> 文件。<input id="email" name="email" type="text" /> 1.2中，您可以跨域调用<input id="email" name="email" type="text" /> JavaScript<input id="email" name="email" type="text" /> 文件。注意：Safari<input id="email" name="email" type="text" /> 2<input id="email" name="email" type="text" /> 或更早的版本不能在全局作用域中同步执行脚本。如果通过<input id="email" name="email" type="text" /> getScript<input id="email" name="email" type="text" /> 加入脚本，请加入延时函数。<input id="email" name="email" type="text" />
讲解:
以前我使用dojo类库时官方默认的文件不支持跨域最后导致我放弃使用dojo(虽然在网上找到了可以跨域的版本,<input id="email" name="email" type="text" /> 但是感觉不够完美). <input id="email" name="email" type="text" /> 所以我特别对这个函数的核心实现和使用做了研究.
首先了解此函数的jQuery内部实现,<input id="email" name="email" type="text" /> 仍然使用get函数,<input id="email" name="email" type="text" /> jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax(),<input id="email" name="email" type="text" /> getScript将传入值为"script"的type参数, <input id="email" name="email" type="text" /> 最后在Ajax函数中对type为script的请求做了如下处理:
var<input id="email" name="email" type="text" /> head<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> document.getElementsByTagName("head");<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
var<input id="email" name="email" type="text" /> script<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> document.createElement("script");
script.src<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> s.url;<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
上面的代码动态建立了一个script语句块,<input id="email" name="email" type="text" /> 并且将其加入到head中:
head.appendChild(script);<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
当脚本加载完毕后,<input id="email" name="email" type="text" /> 再从head中删除:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> //<input id="email" name="email" type="text" /> Handle<input id="email" name="email" type="text" /> Script<input id="email" name="email" type="text" /> loading
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> if<input id="email" name="email" type="text" /> (<input id="email" name="email" type="text" /> !jsonp<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> {
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> var<input id="email" name="email" type="text" /> done<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> false;
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> //<input id="email" name="email" type="text" /> Attach<input id="email" name="email" type="text" /> handlers<input id="email" name="email" type="text" /> for<input id="email" name="email" type="text" /> all<input id="email" name="email" type="text" /> browsers
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> script.onload<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> script.onreadystatechange<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> function(){
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> if<input id="email" name="email" type="text" /> (<input id="email" name="email" type="text" /> !done<input id="email" name="email" type="text" /> &&<input id="email" name="email" type="text" /> (!this.readyState<input id="email" name="email" type="text" /> ||
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> this.readyState<input id="email" name="email" type="text" /> ==<input id="email" name="email" type="text" /> "loaded"<input id="email" name="email" type="text" /> ||<input id="email" name="email" type="text" /> this.readyState<input id="email" name="email" type="text" /> ==<input id="email" name="email" type="text" /> "complete")<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> {
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> done<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> true;
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> success();
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> complete();
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> //<input id="email" name="email" type="text" /> Handle<input id="email" name="email" type="text" /> memory<input id="email" name="email" type="text" /> leak<input id="email" name="email" type="text" /> in<input id="email" name="email" type="text" /> IE
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> script.onload<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> script.onreadystatechange<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> null;
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <strong>head.removeChild(<input id="email" name="email" type="text" /> script<input id="email" name="email" type="text" /> );</strong>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> }
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> };
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> }<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
我主要测试了此函数的跨域访问和多浏览器支持.下面是结果:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> IE6<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> FireFox<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 注意事项<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 非跨域引用js<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 通过<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 通过<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 回调函数中的data和textStatus均可用<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 跨域引用js<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 通过<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 通过<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 回调函数中的data和textStatus均为undifined<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
下面是我关键的测试语句,<input id="email" name="email" type="text" /> 也用来演示如何使用getScript函数:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> $("#btnAjaxGetScript").click(function(event)
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> {
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> $.getScript("../scripts/getScript.js",<input id="email" name="email" type="text" /> function(data,<input id="email" name="email" type="text" /> textStatus)
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> {
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(data);
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(textStatus);
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(this.url);
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> });
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> });
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> $("#btnAjaxGetScriptCross").click(function(event)
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> {
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> $.getScript("http://resource.elong.com/getScript.js",<input id="email" name="email" type="text" /> function(data,<input id="email" name="email" type="text" /> textStatus)
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> {
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(data);
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(textStatus);
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> alert(this.url);
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> });
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> }); <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
5.<input id="email" name="email" type="text" /> jQuery.post(<input id="email" name="email" type="text" /> url,<input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> ,<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> XMLHttpRequest
说明:
通过远程<input id="email" name="email" type="text" /> HTTP<input id="email" name="email" type="text" /> POST<input id="email" name="email" type="text" /> 请求载入信息。<input id="email" name="email" type="text" />
这是一个简单的<input id="email" name="email" type="text" /> POST<input id="email" name="email" type="text" /> 请求功能以取代复杂<input id="email" name="email" type="text" /> $.ajax<input id="email" name="email" type="text" /> 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用<input id="email" name="email" type="text" /> $.ajax。<input id="email" name="email" type="text" />
讲解:
具体用法和get相同,<input id="email" name="email" type="text" /> 只是提交方式由"GET"改为"POST".
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
6.<input id="email" name="email" type="text" /> jQuery.ajax(<input id="email" name="email" type="text" /> options<input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> XMLHttpRequest
说明:
通过<input id="email" name="email" type="text" /> HTTP<input id="email" name="email" type="text" /> 请求加载远程数据。<input id="email" name="email" type="text" />
jQuery<input id="email" name="email" type="text" /> 底层<input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 实现。简单易用的高层实现见<input id="email" name="email" type="text" /> $.get,<input id="email" name="email" type="text" /> $.post<input id="email" name="email" type="text" /> 等。<input id="email" name="email" type="text" />
$.ajax()<input id="email" name="email" type="text" /> 返回其创建的<input id="email" name="email" type="text" /> XMLHttpRequest<input id="email" name="email" type="text" /> 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。<input id="email" name="email" type="text" />
$.ajax()<input id="email" name="email" type="text" /> 只有一个参数：参数<input id="email" name="email" type="text" /> key/value<input id="email" name="email" type="text" /> 对象，包含各配置及回调函数信息。详细参数选项见下。<input id="email" name="email" type="text" />
注意：<input id="email" name="email" type="text" /> 如果你指定了<input id="email" name="email" type="text" /> dataType<input id="email" name="email" type="text" /> 选项，请确保服务器返回正确的<input id="email" name="email" type="text" /> MIME<input id="email" name="email" type="text" /> 信息，(如<input id="email" name="email" type="text" /> xml<input id="email" name="email" type="text" /> 返回<input id="email" name="email" type="text" /> "text/xml")。错误的<input id="email" name="email" type="text" /> MIME<input id="email" name="email" type="text" /> 类型可能导致不可预知的错误。见<input id="email" name="email" type="text" /> Specifying<input id="email" name="email" type="text" /> the<input id="email" name="email" type="text" /> Data<input id="email" name="email" type="text" /> Type<input id="email" name="email" type="text" /> for<input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> Requests<input id="email" name="email" type="text" /> 。<input id="email" name="email" type="text" />
注意：如果dataType设置为"script"，那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)<input id="email" name="email" type="text" />
jQuery<input id="email" name="email" type="text" /> 1.2<input id="email" name="email" type="text" /> 中，您可以跨域加载<input id="email" name="email" type="text" /> JSON<input id="email" name="email" type="text" /> 数据，使用时需将数据类型设置为<input id="email" name="email" type="text" /> JSONP。使用<input id="email" name="email" type="text" /> JSONP<input id="email" name="email" type="text" /> 形式调用函数时，如<input id="email" name="email" type="text" /> "myurl?callback=?"<input id="email" name="email" type="text" /> jQuery<input id="email" name="email" type="text" /> 将自动替换<input id="email" name="email" type="text" /> ?<input id="email" name="email" type="text" /> 为正确的函数名，以执行回调函数。数据类型设置为<input id="email" name="email" type="text" /> "jsonp"<input id="email" name="email" type="text" /> 时，jQuery<input id="email" name="email" type="text" /> 将自动调用回调函数。<input id="email" name="email" type="text" />
讲解:<input id="email" name="email" type="text" />
这是jQuery中Ajax的核心函数,<input id="email" name="email" type="text" /> 上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数,<input id="email" name="email" type="text" /> 使用这些参数可以完全控制ajax请求.<input id="email" name="email" type="text" /> 在Ajax回调函数中的this对象也是options对象.<input id="email" name="email" type="text" />
因为平时使用最多的还是简化了的get和post函数,<input id="email" name="email" type="text" /> 所以在此不对options参数做详细讲解了.<input id="email" name="email" type="text" /> options参数文档请见:<input id="email" name="email" type="text" />
http://docs.jquery.com/Ajax/jQuery.ajax#options<input id="email" name="email" type="text" />
<input id="email" name="email" type="text" />
五.Ajax相关函数.
jQuery提供了一些相关函数能够辅助Ajax函数.<input id="email" name="email" type="text" />
1.<input id="email" name="email" type="text" /> jQuery.ajaxSetup(<input id="email" name="email" type="text" /> options<input id="email" name="email" type="text" /> )
无返回值<input id="email" name="email" type="text" />
说明:<input id="email" name="email" type="text" />
设置全局<input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 默认options选项。<input id="email" name="email" type="text" />
讲解:<input id="email" name="email" type="text" />
有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项,<input id="email" name="email" type="text" /> 此后所有的Ajax请求的默认options将被更改.<input id="email" name="email" type="text" />
options是一个对象,<input id="email" name="email" type="text" /> 可以设置的属性请此连接：http://docs.jquery.com/Ajax/jQuery.ajax#toptions
比如在页面加载时,<input id="email" name="email" type="text" /> 我使用下面的代码设置Ajax的默认option选项:<input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> $.ajaxSetup({
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> url:<input id="email" name="email" type="text" /> "../data/AjaxGetMethod.aspx",
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> data:<input id="email" name="email" type="text" /> {<input id="email" name="email" type="text" /> "param":<input id="email" name="email" type="text" /> "ziqiu.zhang"<input id="email" name="email" type="text" /> },
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> global:<input id="email" name="email" type="text" /> false,
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> type:<input id="email" name="email" type="text" /> "POST",
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> success:<input id="email" name="email" type="text" /> function(data,<input id="email" name="email" type="text" /> textStatus)<input id="email" name="email" type="text" /> {<input id="email" name="email" type="text" /> $("#divResult").html(data);<input id="email" name="email" type="text" /> }
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> });上面的代码设置了一个Ajax请求需要的基本数据:<input id="email" name="email" type="text" /> 请求url,<input id="email" name="email" type="text" /> 参数,<input id="email" name="email" type="text" /> 请求类型,<input id="email" name="email" type="text" /> 成功后的回调函数.
此后我们可以使用无参数的get(),<input id="email" name="email" type="text" /> post()或者ajax()方法发送ajax请求.完整的示例代码如下:
<!DOCTYPE<input id="email" name="email" type="text" /> html<input id="email" name="email" type="text" /> PUBLIC<input id="email" name="email" type="text" /> "-//W3C//DTD<input id="email" name="email" type="text" /> XHTML<input id="email" name="email" type="text" /> 1.0<input id="email" name="email" type="text" /> Transitional//EN"<input id="email" name="email" type="text" /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html<input id="email" name="email" type="text" /> xmlns="http://www.w3.org/1999/xhtml">
<head>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <title>jQuery<input id="email" name="email" type="text" /> Ajax<input id="email" name="email" type="text" /> -<input id="email" name="email" type="text" /> Load</title>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</head><input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<body><input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnAjax">不传递参数调用ajax()方法</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnGet">不传递参数调用get()方法</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnPost">不传递参数调用post()方法</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <button<input id="email" name="email" type="text" /> id="btnGet2">传递参数调用get()方法,<input id="email" name="email" type="text" /> 使用全局的默认回调函数</button><br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <br<input id="email" name="email" type="text" /> />
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</body>
</html>
注意当使用get()或者post()方法时,<input id="email" name="email" type="text" /> 除了type参数将被重写为"GET"或者"POST"外,<input id="email" name="email" type="text" /> 其他参数只要不传递都是使用默认的全局option.<input id="email" name="email" type="text" /> 如果传递了某一个选项,<input id="email" name="email" type="text" /> 比如最后一个按钮传递了url和参数,<input id="email" name="email" type="text" /> 则本次调用会以传递的选项为准.<input id="email" name="email" type="text" /> 没有传递的选项比如回调函数还是会使用全局option设置值.
2.serialize(<input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> String<input id="email" name="email" type="text" />
说明:<input id="email" name="email" type="text" />
序列表表格内容为字符串，用于<input id="email" name="email" type="text" /> Ajax<input id="email" name="email" type="text" /> 请求。<input id="email" name="email" type="text" />
序列化最常用在将表单数据发送到服务器端时.<input id="email" name="email" type="text" /> 被序列化后的数据是标准格式,<input id="email" name="email" type="text" /> 可以被几乎所有的而服务器端支持.<input id="email" name="email" type="text" />
为了尽可能正常工作,<input id="email" name="email" type="text" /> 要求被序列化的表单字段都有name属性,<input id="email" name="email" type="text" /> 只有一个eid是无法工作的.<input id="email" name="email" type="text" />
像这样写name属性:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
讲解:
serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串.<input id="email" name="email" type="text" /> 便于我们使用Ajax发送时获取表单数据.<input id="email" name="email" type="text" /> 这和一个From按照Get方式提交时,<input id="email" name="email" type="text" /> 自动将表单对象的名/值放到url上提交差不多.
比如这样一个表单:
<input id="email" name="email" type="text" />
生成的字符串为:single=Single¶m=Multiple¶m=Multiple3&check=check2&radio=radio1
提示:代码见<input id="email" name="email" type="text" /> chapter6\7-serialize.htm
3.serializeArray(<input id="email" name="email" type="text" /> )
Returns:<input id="email" name="email" type="text" /> Array
说明:
序列化表格元素<input id="email" name="email" type="text" /> (类似<input id="email" name="email" type="text" /> '.serialize()'<input id="email" name="email" type="text" /> 方法)<input id="email" name="email" type="text" /> 返回<input id="email" name="email" type="text" /> JSON<input id="email" name="email" type="text" /> 数据结构数据。<input id="email" name="email" type="text" />
注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。<input id="email" name="email" type="text" />
讲解:
看说明文档让我有所失望,<input id="email" name="email" type="text" /> 使用此函数获取到的是JSON对象,<input id="email" name="email" type="text" /> 但是jQuery中没有提供将JSON对象转化为JSON字符串的方法.
在JSON官网上没有找到合适的JSON编译器,<input id="email" name="email" type="text" /> 最后选用了jquery.json这个jQuery插件:
http://code.google.com/p/jquery-json/
使用起来异常简单:
var<input id="email" name="email" type="text" /> thing<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> {plugin:<input id="email" name="email" type="text" /> 'jquery-json',<input id="email" name="email" type="text" /> version:<input id="email" name="email" type="text" /> 1.3};var<input id="email" name="email" type="text" /> encoded<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> $.toJSON(thing);<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> //'{"plugin":<input id="email" name="email" type="text" /> "jquery-json",<input id="email" name="email" type="text" /> "version":<input id="email" name="email" type="text" /> 1.3}'var<input id="email" name="email" type="text" /> name<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> $.evalJSON(encoded).plugin;<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> //"jquery-json"var<input id="email" name="email" type="text" /> version<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> $.evalJSON(encoded).version;<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> //<input id="email" name="email" type="text" /> 1.3
使用serializeArray(<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> 再配合<input id="email" name="email" type="text" /> $.toJSON<input id="email" name="email" type="text" /> 方法,<input id="email" name="email" type="text" /> 我们可以很方便的获取表单对象的JSON,<input id="email" name="email" type="text" /> 并且转换为JSON字符串:
$("#results").html(<input id="email" name="email" type="text" /> $.toJSON(<input id="email" name="email" type="text" /> $("form").serializeArray()<input id="email" name="email" type="text" /> ));<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
结果为:
[{"name":<input id="email" name="email" type="text" /> "single",<input id="email" name="email" type="text" /> "value":<input id="email" name="email" type="text" /> "Single"},<input id="email" name="email" type="text" /> {"name":<input id="email" name="email" type="text" /> "param",<input id="email" name="email" type="text" /> "value":<input id="email" name="email" type="text" /> "Multiple"},<input id="email" name="email" type="text" /> {"name":<input id="email" name="email" type="text" /> "param",<input id="email" name="email" type="text" /> "value":<input id="email" name="email" type="text" /> "Multiple3"},<input id="email" name="email" type="text" /> {"name":<input id="email" name="email" type="text" /> "check",<input id="email" name="email" type="text" /> "value":<input id="email" name="email" type="text" /> "check2"},<input id="email" name="email" type="text" /> {"name":<input id="email" name="email" type="text" /> "radio",<input id="email" name="email" type="text" /> "value":<input id="email" name="email" type="text" /> "radio1"}] <input id="email" name="email" type="text" />
六.全局Ajax事件
在jQuery.ajaxSetup(<input id="email" name="email" type="text" /> options<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> 中的options参数属性中,<input id="email" name="email" type="text" /> 有一个global属性:
global
类型:布尔值
默认值:<input id="email" name="email" type="text" /> true<input id="email" name="email" type="text" />
说明:是否触发全局的Ajax事件.
这个属性用来设置是否触发全局的Ajax事件.<input id="email" name="email" type="text" /> 全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 名称<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> 说明<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> ajaxComplete(<input id="email" name="email" type="text" /> callback<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 请求完成时执行函数<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> ajaxError(<input id="email" name="email" type="text" /> callback<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 请求发生错误时执行函数<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> ajaxSend(<input id="email" name="email" type="text" /> callback<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 请求发送前执行函数<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> ajaxStart(<input id="email" name="email" type="text" /> callback<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 请求开始时执行函数<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> ajaxStop(<input id="email" name="email" type="text" /> callback<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 请求结束时执行函数<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> ajaxSuccess(<input id="email" name="email" type="text" /> callback<input id="email" name="email" type="text" /> )<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> AJAX<input id="email" name="email" type="text" /> 请求成功时执行函数<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
用一个示例讲解各个事件的触发顺序:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> jQuery<input id="email" name="email" type="text" /> Ajax<input id="email" name="email" type="text" /> -<input id="email" name="email" type="text" /> AjaxEvent<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
发送Ajax请求
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
结果如图:<input id="email" name="email" type="text" />
<input id="email" name="email" type="text" />
我们可以通过将默认options的global属性设置为false来取消全局Ajax事件的触发.
七.注意事项
如果在Get请求发送的url中有两个同名参数,<input id="email" name="email" type="text" /> 比如两个param参数:
http://localhost/AjaxGetMethod.aspx?param=Multiple¶m=Multiple3
使用服务器端方法获取param参数:
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> if<input id="email" name="email" type="text" /> (!String.IsNullOrEmpty(HttpContext.Current.Request["Param"]))<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> {<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> param<input id="email" name="email" type="text" /> =<input id="email" name="email" type="text" /> HttpContext.Current.Request["Param"];<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> <input id="email" name="email" type="text" /> }此时获取到得param是一个用","分隔多个值的字符串:
Multiple,Multiple3 <input id="email" name="email" type="text" />
八.总结
本文介绍如何使用jquery实现Ajax功能. <input id="email" name="email" type="text" /> 用于发送Ajax请求的相关函数如load,<input id="email" name="email" type="text" /> get,<input id="email" name="email" type="text" /> getJSON和post这些渐变Ajax方法,<input id="email" name="email" type="text" /> 对于核心的ajax<input id="email" name="email" type="text" /> 方法没有过多介绍,<input id="email" name="email" type="text" /> 主要是通过配置复杂的参数实现完全控制Ajax请求.<input id="email" name="email" type="text" /> 另外讲解了ajax的辅助函数比如用于序列化表单对象为字符串的serialize()方法,<input id="email" name="email" type="text" /> 用于将表单对象序列化为JSON对象的serializeArray()方法.<input id="email" name="email" type="text" /> 这些在使用脚本获取数据实现与服务器端交互是很有用,<input id="email" name="email" type="text" /> JSON格式的数据在处理大对象编程时将我们从混乱的属性字符串中解放出来.
jQuery还提供录入全局ajax事件这一个特殊的事件,<input id="email" name="email" type="text" /> 并且可以在一个对象上设置这些事件,<input id="email" name="email" type="text" /> 在发送Ajax请求的各个生命周期上会调用这些事件,<input id="email" name="email" type="text" /> 可以通过修改默认的options对象的global属性打开或关闭全局事件.
目前本系列文章在加紧创作阶段.<input id="email" name="email" type="text" /> 所以代码和文章示例都没有来得及重新整理.<input id="email" name="email" type="text" /> 下面是本章的代码下载,<input id="email" name="email" type="text" /> 但是含有所有以前未整理的示例,请大家下载后看chapter6文件夹,<input id="email" name="email" type="text" /> 里面是本章的所有示例:
https://files.cnblogs.com/zhangziqiu/Code-jQueryStudy.rar
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]