jQuery的$.ajax
在介绍JSONP之前,先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩写,是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本,因此可通过许多途径进行JSON消息的传递。
1. JSONP定义
JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。
2.JSONP由来
要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。
如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。
由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过"script",标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。
3. JSONP原理与实现
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.
然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。
其实 JSONP是个很简单的一个东西。主要是利用了script标签对javascript文档的动态解析来实现。(其实也可以用eval函数)
<script type="text/javascript">
function jsonpCallback(result){
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://mydomain.com/jsonService?jsonp=jsonpCallback"></script>
注解:
jsonCallback是获取跨域服务器上的JSON数据后的客户端的回调函数。
http://mydomain.com/jsonService?jsonp=jsonpCallback是获取跨域服务器JSON数据的接口,参数为回调函数的名字。
返回的格式为:jsonpCallback({ msg:'this is json data'} )
4. jQuery与JSONP
从1.2版本开始,jQuery拥有对JSONP回调的本地支持。如果指定了JSONP回调,就可以加载位于另一个域的JSON数据.回调的语法为:url?callback=?。jQuery自动将?替换为要调用的生成函数名。
jQuery回调函数:
<script type="text/javascript">
jQuery.getJSON(url+"&callback=?",function(data){
alert("Name: " + data.name + ", Phone: " + data.phone);
});
</script>
为此,jQuery 将一个全局函数附加到插入脚本时需要调用的窗口对象。另外,jQuery 也能优化非跨域调用。如果向同一个域发出请求,jQuery 就将其转化为普通 Ajax 请求。
5. JSONP的安全问题
在JavaScript 程序中有多种方法可动态地生成代码,最著名的函数之一就是 eval()。该函数允许您将任意字符串做为 JavaScript 代码执行。然而,随意使用该函数是非常危险的。遗憾的是,一些使用广泛的 JavaScript 库在内部都直接使用 eval() 函数。JSON本身是安全的,不含有赋值和调用。但由于 JSON 是以 JavaScript 的一个子集为基础的,所以脚本内容会潜在地包含恶意代码。由于许多 JavaScript 库使用 eval() 函数将 JSON 转换成 JavaScript 对象,利用这点,攻击者就可以向这些库发送畸形的 JSON 对象,这样 eval() 函数就会执行这些恶意代码。为保护 JSON 的使用,可使用RFC 4627 中所定义的正则表达式确保 JSON 数据中不包含活动的部分
<script type="text/javascript">
var my_JSON_object =
!(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(text.replace(/"(\\.|[^"\\])*"/g,''))) && eval('(' + text + ')');
</script>
6. JSONP的缺陷
JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,必须认真考虑它们。
第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
第二, JSONP 被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
cript:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。
beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义
HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。
参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错
误信息、捕获的错误对象(可选)。
ajax事件函数如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的
dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。
该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如
{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。
processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM
树信息或者其他不希望转换的信息,请设置为false。
scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
同域内的ajax
/*xxx.json的数据如下*/
{"name":'张三',"age":25,"sex":"男"}
/*
同域ajax是同一个域名和站点下,例如:
本站是:http://wap.cmread.com
请求地址是http://wap.cmread.com/xxx.json
*/
var ajaxUrl = 'http://wap.cmread.com/xxx.json';
$.ajax({
type:'get',/*请求类型get还是post*/
url:ajaxUrl,/*请求地址*/
cache:false,/*是否缓存,false不缓存*/
success:function(returnData){/*请求成功之后的回调函数*/
console.log(returnData);
},
error:function(){/*失败后的回调函数*/
console.log('error');
}
});
/*
跨域ajax是不同域名和站点下的异步请求,例如:
本站是:http://wap.cmread.com/r
请求地址是http://wap.cmread.com/rbc/xxx.json
*/
/*xxx.json的数据如下*/
{"name":'张三',"age":25,"sex":"男"}
var ajaxUrl = 'http://wap.cmread.com/rbc/xxx.json';
/*下面这个是同一域名不同站点的跨域*/
$.ajax({
type:'get',/*请求类型get还是post*/
url:ajaxUrl,/*请求地址*/
dataType:'jsonp',
cache:false,/*是否缓存,false不缓存*/
success:function(returnData){/*请求成功之后的回调函数*/
console.log(returnData);
},
error:function(){/*失败后的回调函数*/
console.log('error');
}
});
/*下面这个是不同域名不同站点的跨域*/
/*
跨域ajax是不同域名和站点下的异步请求,例如:
本站是:http://wap.cmread.com/r
请求地址是http://www.baidu.com/xxx.json
一般这种跨域形式都会有一个callback回调函数返回,
需要前端和后端匹配callback使用才能成功进入到success函数,
否则都属于请求失败error
*/
/*xxx.json的数据如下*/
callback({"name":'张三',"age":25,"sex":"男"})
var ajaxUrl = 'http://www.baidu.com/xxx.json';
$.ajax({
type:'get',
url:ajaxUrl,
cache:false,
dataType:'jsonp',/*跨域数据类型jsonp不是json而是以一种script形式返回*/
jsonp:'jsonpCallback',/*重写回调函数名*/
jsonpCallback:'callback',/*重写回调函数名指定服务端返回的callback名*/
success:function(returnData){/*成功回调函数*/
console.log(returnData);
},
error:function(){/*失败回调函数*/
console.log('error');
}
});
jQuery的$.ajax的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 【原创经验分享】JQuery(Ajax)调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
- jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
- jquery管理ajax异步-deferred对象
今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...
- Struts2 使用jQuery实现Ajax
在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...
- JQuery中Ajax的操作
JQuery Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...
随机推荐
- JavaScript作用域
JavaScript作用域 JavaScript作用域一直是前端开发的难题,现在只要用五句话就可解决. 一.“JavaScript中无块级作用域” 在Java或C#中存在块级作用域,即:大括号也是一个 ...
- git init和git init -bare区别
1 Git init 和 git init –bare 的区别 用"git init"初始化的版本库用户也可以在该目录下执行所有git方面的操作.但别的用户在将更新push上来的 ...
- 记:MySQL 5.7.3.0 安装 全程截图
前言: 下一个班快讲MySQL数据库了,正好把服务器里面的MySQL卸了重装了一下. 截个图,作为笔记.也正好留给需要的朋友们. 目录: 下载软件 运行安装程序 安装程序欢迎界面 许可协议 查找更新 ...
- Linux测试环境搭建的学习建议
随着Linux应用的扩展许多朋友开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起.这里介绍学习Linux测试环境搭建的一些建议. 一.Linux测试环境搭建从基 ...
- C#中实现并发的几种方法的性能测试
C#中实现并发的几种方法的性能测试 0x00 起因 去年写的一个程序因为需要在局域网发送消息支持一些命令和简单数据的传输,所以写了一个C/S的通信模块.当时的做法很简单,服务端等待链接,有用户接入后开 ...
- 提升网速的路由器优化方法(UPnP、QoS、MTU、交换机模式、无线中继)
在上一篇<为什么房间的 Wi-Fi 信号这么差>中,猫哥从微波炉.相对论.人存原理出发,介绍了影响 Wi-Fi 信号强弱的几大因素,接下来猫哥再给大家介绍几种不用升级带宽套餐也能提升网速的 ...
- 一缕阳光:DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)?
写在前面 阅读目录: 问题根源是什么? <领域驱动设计-软件核心复杂性应对之道>分层概念 Repository(仓储)职责所在? Domain Model(领域模型)重新设计 Domain ...
- 自学MVC看这里——全网最全ASP.NET MVC 教程汇总
MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC技术的学习者提供一个整合学习入口.本文从 ...
- ABP(现代ASP.NET样板开发框架)系列之4、ABP模块系统
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之4.ABP模块系统 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...
- [译]ZOOKEEPER RECIPES-Queues
队列 分布式队列是一种常见的数据结构.为了在ZooKepeer中实现分布式队列,第一步是要使用一个znode代表队列本身.分布式客户端通过create()方法将内容放入一个名叫"queue- ...