jsonp与ajax

jsonp思维导图:
1、定义
2、为什么用
3、json原理
4、优缺点
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术?

JSON和JSONP??
虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。

1、定义
跨域:就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下的对象或数据。简单理解同一个域就是:相同域名、相同端口、相同协议!
跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
即:可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
其实JSONP跨域技术本质上是创建<script>标签,并通过其src指向跨域地址而实现跨域获取数据。
利用具有跨域能力的标签(<script></script> <img> <iframe> <link>)
2、为什么用
ajax不能解决跨域,引出jsonp来实现跨域。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。
同源策略:就是阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。即受到请求的URL的域必须与当前Web页面的域相同,意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。
解决跨域
参考理论一:在浏览器中不能直接来跨域访问,而在服务器端没有跨域安全限制。
这样的话,可以在服务端完成跨域访问,而在客户端来取得结果就可以了。
参考理论二:同源策略不阻止动态脚本元素插入,脚本访问可以跨域。
用服务器端的XmlHttpRequest代理实现跨域访问
只要让用户添加一个script标签,这个script标签的src属性指向我们api的url,并提供 api需要的一些参数,通常其中包括了一个作为callback的js函数名。针对这个脚本请求,我们服务器端的http handler会根据url中携带的参数,生成并返回相应的脚本,通常这个脚本的内容是调用callback函数,并传入用户需要的数据作为参数。
可以通过script标签远程引用其他域名下的脚本文件的。而且,script标签的 src属性不一定必须是一个存在的js文件,也可以是一个http handler的url,只要这个http handler返回的是一个text/javascript类型的响应就可以了。
“同源策略”的意义
“同源策略”有效地阻止了一些危险行为,如你同时打开多个网站时,其中有一个木马网站,那么木马网站就有可能窃取其他网站上关于你的信息或资料(因为多个网站间是可以相互通信的),给网上用户带来很大的泄密风险。正是由于有了“同源策略”,才大大降低了这种风险,由于木马网站与其他你浏览的网站不同源,因此无法相互间通信访问、获取数据等。
“同源策略”的不足
虽然“同源策略”在一定程度上保护了用户的网络安全,但如果有时就是需要让www.aaa.com取得www.bbb.com上的数据,同样是因为”同源策略”造成无法从自己信任的其他网页上取得数据。
3、jsonp原理
JSONP(JSON with Padding),就是异步请求跨域的服务器端时,不是直接返回数据,而是返回一个js方法,把数据作为参数传过来。如果只是跨域传递数据那么这种方式是比较好的。字面理解就是:利用内填充的原理,将json填充到一个box中的概念。

4、优缺点

------------------------------------------------------------------

1、被jquery简化的ajax
eg:$.ajax({
url:"", //请求路径
type:"post/get", 默认get
data:{name:name}, //发送数据以键值对格式发送
async:true/false, 默认异步true; 同步false
success:function(e){ e只是形参
//ajax返回值
}
})
可选项参数[options]为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器相应后回调的数据。

Ajax在Jquery中的实现
在Jquery中的Ajax是js的封装,常用的Ajax操作的方法
1、$(选择器).load(url,[data],[callback]) 加载html格式的数据
2、$.get() 加载xml格式的数据
3、$.post()
载入远程HTML文件到DOM ,返回数据,字符串 $.get(url,data,callback)
4、$.getJSON(url,[data],[callback]) 直接返回数据就是json对象格式
5、$.ajax()
6、$.getScript():加载js格式的数据
注:参数url表示请求的地址,可选项[data]参数表示发送到服务器的数据,其格式为key/value。可选项[callback]参数表示加载成功时执行的回调函数。

时间: 2024-10-13 17:39:00

jsonp与ajax的相关文章

JSON、JSONP、Ajax的区别

什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的: 5.容易编写和解析,当然前提是你要知道数据结构: JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明. JSON的格式或者叫规则: JS

Jsonp实现Ajax跨域Demo

JSONP 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如script.img.iframe): 3.于是可以判断,当前阶段如果想通过纯web端(ActiveX控件.服务端代理.属于未来的HTML5之Websocket等方式不算)跨域访问数据就

使用jsonp实现ajax跨域请求

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料并不是 JSON,

jQuery中利用JSONP解决AJAX跨域问题

写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http:/

JsonP / Google AJAX Libraries API / Mashup

最近经常上豆瓣,也关注了一下他们最近推出的API服务,据说淘宝也将开放API,google更是不用说,开始为众多的ajax库提供服务器端分发服务.越来越多的网站开始提供API服务,也表示有越来越多的Mashup可能性,抛砖引玉,希望越来越多的开发者加入到这个领域. 一.JsonP + API:Javascrpt中跨域调用数据 先了解下JsonP(JSON with Padding):利用script标签,通过特定的src地址的调用,来执行一个客户端的js函数,在服务器端生成相对的数据(json格

JFinal,Jsonp,Jquery,Ajax,跨域

JFinal的Controller返回的时候如下: 这里的content就是我的Json字符串 renderJson("innerSignCallBack(" + content+")");//跨域的请求,jsonp 页面的Ajax如下: var url = 'http://xxx.com/getJson'; $.ajax({ type : "get", //必须get,不填也行 url : url, //这里的url不需要在最后加上&i

说说JSON和JSONP,浅析JSONP解决AJAX跨域问题

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决. 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域.而这就是本文将要讲述的内容. JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互

【转】Php+ajax+jsonp解决ajax跨域问题

首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : "ajax.php", dataType : "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"jsonpcallb

JSONP解决ajax跨域问题

在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested resource. 在响应头中加入一个属性:response.setHeader("Access-Control-Allow-Origin", "*"); 可以解决,但都说有安全问题... 那么就用jsonp的方式解决. 下面是转的文章: JSONP是如何工作的? 我对这