JS跨域请求之JSONP

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的。但是JSONP到底是个什么东西呢,实现的原理又是什么呢。在项目的空闲时间可以好好的来研究一下了。

JSONP的产生

1.众所周知,Ajax请求资源受同域的限制,不管是静态资源,动态页面,web服务都不行

2.同时我们发现web页面上调用JS文件时则不受跨域的影响(不仅如此,我们还发现凡是拥有‘src’这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>等)

3.可想而知,当前阶段如果想通过web端(ActiveX控件、服务器代理、HTML5的websocket等方式不算)跨域访问数据就只有一种可能,那就是服务端把数据装进JS格式的文件里,供客户端调用和处理

4.数据的传输,我们知道一种叫JSON的纯字符数据格式可以简洁的描述复杂的数据结构,而且还被JS原生支持,在客户端可以很容易的处理这种格式的数据

5.这样解决方案的一目了然了,web端通过和调用脚本一模一样的方式,来调用跨域服务器上动态生成的JS文件。服务器之所以要动态生成JS文件,目的在于获取客户端的回调函数名并把客户端需要的数据通过JSON(也可以是纯字符串)的格式传进去

6.在客户端对JS文件调用成功后,也就获取到了回调函数里的参数,剩下的就是对数据的处理了,这种方法和Ajax看起来很像,但是却并不一样(Jquery将JSONP和Ajax封装在一起,如果不了解的人会混为一谈)

7.为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了

好了,不知道大家对JSONP理解了没有,如果没有的话,鄙人就出来总结一下,说的不好,不要打我。

其实原理就是,客户端请求一个链接,并把需要的参数加上,callback表示是一个JSONP的请求(这个前端和后台可以自己统一),后台解析这个请求链接,发现是一个JSONP的请求,然后生成一个调用方法,并根据请求参数动态生成一个字符串(可以是JSON,也可以是纯字符串)塞进调用方法里,这样客户端就可以那到数据并做后续的处理了。

说了这么多,不上代码不是我的风格啊,上代码。。

function test(data){
 console.log(data)
}
var url="http://www.x.com/test?a=1&callback=test"//向x.com/test传递参数a值为1,并告诉他要调用的函数名是“test”
//后台拦截到callback,知道要生成一个调用方法,方法名是test,并传递参数,后台处理生成如下(数据虚构)
test("aaaaaa")
test({a:1,b:2})
//然后前端通过script标签去访问并执行,上面的东西
var script = document.createElement(‘script‘);
    script.setAttribute(‘src‘, url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName(‘head‘)[0].appendChild(script);
//然后就会调用页面的test方法,这就是jsonp的实现原理。

关于Jquery中JSONP的现实

$.ajax({
    type: "GET",
    url: "http://x.d.cn/asych/adv.html?loc=8&callBack=?",//告诉后台这是一个jsonp请求,需要调用什么方法,如果为“?”,jq会帮你自动生成(如果使用jq一般都设置为“?”,这样才能在成功时触发jq的回调函数)
    type:"post",//jsonp只能发get请求,就算我设置请求类型为post
    dataType:"jsonp",//告诉jquery这是一个jsonp的数据,需要生成script标签来加载js
    data:{
        a:"1"
    },
    /*success: function (data) {//成功后jq会执行的方法(如果callback参数为“?”)
       $("body").append(data);
    },*/
    error: function (XMLHttpRequest, textStatus, errorThrown) {
         //alert(errorThrown);
    }

}).done(function(data){
    $("body").append(data);
});

看了上面的代码和注释,相信大家都明白了吧,虽然Jquery将JSONP封装到Ajax中,但是本质上是不同的。

Ajax的核心是通过XmlHttpRequest获取非本页内容,而JSONP的核心则是动态添加<script>标签来调用服务器提供的js脚本。

所以Ajax和JSONP的区别不在于是否跨域,Ajax通过服务端代理一样可以实现跨域,JSONP本身也不排斥同域数据的获取。

还有上面说到过,JSONP和Ajax的数据格式不一定要是JSON,也可以是纯字符串。

总而言之,JSONP不是Ajax的一个子集,即使Jquery将JSONP封装进Ajax,也不能改变这一点。

时间: 2024-10-11 20:49:18

JS跨域请求之JSONP的相关文章

js跨域请求方式 ---- JSONP原理解析

这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而

跨域请求之JSONP

跨域恳求的方法有很多种, 1,iframe 2,document.domain 3,window.name 4,script 5,XDomainRequest (IE8+) 6,XMLHTTPRequest (Firefox3.5+) 7,postMessage (HTML5) 8,后台代理 ... 它们有各自的优缺点,回来的数据格局也各不同,应根据需要慎重挑选.比方iframe回来html片段就对比适合,费老劲用它回来JSON就因小失大了.这篇开端我将打造一个有用的跨域恳求东西Sjax.运用s

跨域请求:JSONP

在JavaScript中,有一个很重要的安全性限制,被称为"同源策略".即JavaScript只能访问与包含它的文档在同一域下的内容.然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻.JSONP跨域请求是一个常用的解决方案. JSONP:<script>元素可以作为一种Ajax传输机制,只须设置<script>元素的src属性(假如它还没有插入到document中,需要插入进去),然后浏览器就会发送一个HTT

js跨域请求数据的3种常用的方法

由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <script

js 跨域请求

可通过jsonp解决 php代码中加一行 $callback = $_GET['callback'];  输出 $callback.'('.json_encode($data) . ')'; jqeury调用jsonp格式 dataType:"jsonp", jsonp:'callback', <?php $name = $_SERVER["QUERY_STRING"]; $callback = $_GET['callback']; function getf

Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域

JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback)),然后以JavaScript语 法的方式,生成一个function 2.接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端. 3.最后客户端浏览器动态的解析script标签,

Ajax+Spring MVC实现跨域请求(JSONP)

JSONP解释 在解释JSONP之前,我们需要了解下"同源策略"这个概念,这对理解跨域有帮助.基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载额文档的属性.有点绕,说的简单点就是浏览器限制脚本只能和同协议.同域名.同端口的脚本进行交互. JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议.他允许服务端生成script tags返回值客户端,通过javascript call

JS跨域请求

1. 同源策略 所有的浏览器都遵守同源策略,这个策略能够保证一个源的动态脚本不能读取或操作其他源的http响应和cookie,这就使浏览器隔离了来自不同源的内 容,防止它们互相操作.所谓同源是指协议.域名和端口都一致的情况.举例来说,首先在Nginx上配置两个虚拟主机,一个监听80端口,另一个监听81端 口: server {           listen 80;           server_name localhost;                      location /

js跨域请求实现

js代码 var url = zfba2url + "/fzyw/xzfy/smcl/autoUpdateByWS.action"; var data = { "writid": writid, "reportName": reportname }; $.ajax({ contentType: "application/x-www-form-urlencoded;charset=UTF-8", type : "pos