3 jQuery中Ajax
在第一章提到Javascript框架或者是工具中都包含了封装上述功能的Ajax工具,就不一一介绍,下边主要讲讲JQuery中的Ajax工具包。
使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数,这些函数是根据我们日常开发的需要而封装的一些快捷操作,比如:load、ajax、get、post等等。可以使简单的工作变得更加简单,复杂的工作变得不再复杂。
jQuery的ajax工具包封装有三个层次,目的有两,第一为了符合命名规范,见明思义;第二就是为区分跨域操作,因为第三层的两个函数可以跨域操作。这样写有点牵强,先这里理解,后边讲了JSON和JSONP就明白了。
最底层就是Ajax,封装了基础Ajax一些操作;
第二层就是load、get、post,封装了jQuery的Ajax;
第三层就是getScript、getJSON,封装了get。
下边我们就一一的介绍这些函数(方法)的用法。
3.1. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。这个函数就是一个get的简写,看看源代码:
return jQuery.get(url, null, callback, "script");
参数名称
|
类型
|
说明
|
url
|
String
|
请求的HTML页的URL地址
|
Callback(可选)
|
Function
|
载入成功时回调函数(只有当Response的返回状态是success才是调用该方法),不传递参数
|
jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。
示例代码:
加载并执行 test.js。
$.getScript("test.js");
提示:本身xmlHttp对象是不能进行异域操作的,但是浏览器head中加载script可以,这个函数就是在head中创建一个script元素,元素的src属性是url,应该真正不属于Ajax范畴。
3.2. jQuery.getJSON( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。这个函数就是一个get的简写,看看源代码:
return jQuery.get(url, null, callback, "json");
参数名称
|
类型
|
说明
|
url
|
String
|
请求的HTML页的URL地址
|
Callback(可选)
|
Function
|
载入成功时回调函数(只有当Response的返回状态是success才是调用该方法),自动将请求结果(执行后的JS对象)传递给该函数
|
这个函数的和上边的getScript的工作原理基本一样,我们看看上边的源代码就知道,支持跨域操作,本身也支持jsonp,什么是jsonp下边的章节我们再说。
示例代码:
$.getJSON("test.js",function(json){
$.each(json function(i,n){
alert(n);
alert(json.i);
})
});
3.3. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。
参数名称
|
类型
|
说明
|
url
|
String
|
请求的HTML页的URL地址
|
Data(可选)
|
Obj
|
发送至服务器的 key/value 数据
|
Callback(可选)
|
Function
|
请求完成时(不需要是success的)的回调函数,自动会将请求的结果,状态,XMLHttp对象传递给该函数。
|
这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码(url和选择器之间用空格分开)。语法形如 "url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件,例如表单。
示例代码:
$(".ajax.load").load("/index.html .p",function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态:success,error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});
3.4 jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求
参数名称
|
类型
|
说明
|
url
|
String
|
请求的HTML页的URL地址
|
Data(可选)
|
Obj
|
发送至服务器的 key/value 数据会做为QueryString附加到请求URL中
|
Callback(可选)
|
Function
|
载入成功时回调函数(只有当Response的返回状态是success才是调用该方法),自动将请求结果和状态传递给该函数
|
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:
$.get("./index.html", {app:"test",action:"test"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
alert(data);
//alert(textStatus);//请求状态:success,error等等。
//当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
});
3.5 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
参数名称
|
类型
|
说明
|
url
|
String
|
请求的HTML页的URL地址
|
Data(可选)
|
Obj
|
发送至服务器的 key/value 数据会做为QueryString附加到请求URL中
|
Callback(可选)
|
Function
|
载入成功时回调函数(只有当Response的返回状态是success才是调用该方法),自动将请求结果和状态传递给该函数
|
Type(可选)
|
String
|
客户端请求的类型(JSON,XML,等等)
|
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:
Ajax.aspx:
Response.ContentType = "application/json";
Response.Write("{result: '" + Request["action "] + ",Hello World '}");
jQuery 代码:
$.post("Ajax.aspx", { app: "test", action: "test" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
alert(data.result);
}, "json");
Ajax.php
if(isset($_SERVER["HTTP_ACCEPT"])){
$accept=strtolower($_SERVER["HTTP_ACCEPT"]);
$tmp_array=explode(',',$_SERVER["HTTP_ACCEPT"]);
if(in_array('application/json',$tmp_array)){
echo json_encode($_GET);
}
}
jQuery 代码:
$.post("Ajax.php", { app: "test", action: "test" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
alert(data.result);
}, "json");
这里设置了请求的格式为"json",需要注意的是,如果是json类型,返回结果会自动执行eval函数,本身服务器返回只是一个字符串,但是传递进来的参数已经是eval之后的JSON对象。其他的类型,比如text、html则按照字符串的方式进行处理即可。
分享到:
相关推荐
第二部分(第2章)详细介绍和分析了构造函数jQuery()的用法、构造过程、原型属性和方法、静态属性和方法。 第三部分(第3~7章)详细分析了底层支持模块的源码实现,包括选择器Sizzle、异步队列Deferred Object、...
《锋利的jQuery(第2版)》是《锋利的jQuery》全新升级版,例子采用全新的UI,代码更符合语义化;增加jQuery Mobile的章节;增加jQuery版本变化的章节;增加jQuery性能优化和技巧的章节。 提供了丰富的附录: jQuery...
深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...
第2篇介绍了前端开发调试工具---Firebug. 第3篇介绍了Ajax的核心对象---XMLHttpRequest. 第4篇介绍了jQuery中的$.ajax()方法. 第5篇介绍了jQuery加载并解析xml. 第6篇是第七章的插件的API 第7篇是jQuery API速查表....
第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 插入节点元素 2.6 复制节点元素 2.7 替换节点元素 2.8 删除节点...
第2篇介绍了前端开发调试工具---Firebug. 第3篇介绍了Ajax的核心对象---XMLHttpRequest. 第4篇介绍了jQuery中的$.ajax()方法. 第5篇介绍了jQuery加载并解析xml. 第6篇是第七章的插件的API 第7篇是jQuery API速查表.
全面解析JavaScript+jQuery的优秀原创精品 精通JavaScript+jQuery 第一部分 JavaScript、CSS与DOM...第二部分 JavaScript、CSS、DOM高级篇 第三部分 jQuery框架篇 第四部分 综合案例篇 共四个压缩文件,全部下载后解压
第1篇介绍了jQuery中的$ document...第2篇介绍了前端开发调试工具 Firebug 第3篇介绍了Ajax的核心对象 XMLHttpRequest 第4篇介绍了jQuery中的$ ajax 方法 第5篇介绍了jQuery加载并解析xml 第6篇是第七章的插件的API
全面解析JavaScript+jQuery的优秀原创精品 精通JavaScript+jQuery 第一部分 JavaScript、CSS与DOM...第二部分 JavaScript、CSS、DOM高级篇 第三部分 jQuery框架篇 第四部分 综合案例篇 共四个压缩文件,全部下载后解压
这是第一个,现在仍然是最快的符合规范的CSV解析器之一。 这是一个完整的,可定制的,经过战斗测试,性能优化的CSV分析器,它遵循传统的jQuery样式的语法。 具有超薄的Chomsky-Type III解析器实现。 完全(即100%...
jQuery的 jQuery原始分析第一步:分段解析第二步:添加全中文注释第三步:制作成手册
第2篇介绍了前端开发调试工具---Firebug. 第3篇介绍了Ajax的核心对象---XMLHttpRequest. 第4篇介绍了jQuery中的$.ajax()方法. 第5篇介绍了jQuery加载并解析xml. 第6篇是第七章的插件的API 第7篇是jQuery API速...
第2篇介绍了前端开发调试工具---Firebug. 第3篇介绍了Ajax的核心对象---XMLHttpRequest. 第4篇介绍了jQuery中的$.ajax()方法. 第5篇介绍了jQuery加载并解析xml. 第6篇是第七章的插件的API 第7篇是jQuery API速查表.
轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘。今天,也不敢果敢的说,可以马上写好一个轮播。希望是通过随笔的...
第2章 选择符——取得你想要的一切 2.1 DOM 2.2 工厂函数$() 2.3 CSS选择符 2.4 XPath选择符 2.5 自定义选择符 2.6 DOM遍历方法 2.7 访问DOM元素 2.8 小结 第3章 ...
目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同。 4.该插件依然是练习之作,一人之力,错误难免。 实例演示 1.载入页面的同时,气泡...
第2周 本节鸡汤 模块初识 pyc是什么 python数据类型 bytes数据类型 列表的使用 元组与购物车程序练习 购物车程序练习实例 字符串常用操作 字典的使用 三级菜单实例 本周作业-购物车优化 第3周 作业 上节内容回顾 ...
获取匹配的第二个元素: $(“p”).eq(1) filter( expr ) 筛选出与指定表达式匹配的元素集合。 保留带有select类的元素: $(“p”).filter(“.selected”) filter( fn ) 筛选出与指定函数返回值匹配的元素集合 这个...
第一步: 将服务器端的DataTable 转化为 XML 第二步: 解析 XML 到客户端 第三步: 利用此分页控件很容易分页