深入分析jsonp协议原理_json-js-Tutorial-php.cn

今天在开发联调的过程中，需要跨域的获取数据，因为使用的jquery，当然使用dataType:'jsonp'就能够很easy的解决了。
但是因为当时后端没有支持jsonp来访问，后来他在实现这个功能的时候问了我一句，jsonp形式返回的格式是怎么样子的？我一直以来只知道怎么使用，迷迷糊糊的却没有答上来。。。

虽然后来解决了，但是对于喜欢解决问题的我，心里却一直耿耿于怀，必须得把这个研究透彻了，于是我开始翻阅资料，看到后面真有种豁然开朗的感觉，于是打算做个笔记与大家分享。

JSON和JSONP的区别

JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种跨域数据交互的协议，使用JSONP方法获取到的仍然是json格式的数据。

说白了，用JSON来传数据，靠JSONP来跨域。

JSONP详细阐述

我们都知道，一个页面的ajax只能获取和此页面同域的数据。，所以当我们需要跨域获取数据的时候就需要使用到JSONP方法来获取了。

如下图所示，就是使用json格式获取跨域数据返回的错误提示：

那么该如何解决呢？使用框架的前端童鞋们可能都有自己相应的办法，比如jquery就是把dataType设为jsonp就能解决了，但是我们在使用的时候有没有想过，为什么这样就能解决呢？中心思想又是什么呢？

下面就开始为大家详细阐述，首要思想就是利用scirpt标签来引入跨域的数据。我们从最开始慢慢来深入jsonp的过程。

引导步骤1

编写b.com/b.js内容：

复制代码代码如下:

alert(‘hello');

然后编写a.com/a.html内容：

复制代码代码如下:

运行a.html，结果很明显，肯定会弹出hello。

引导步骤2

修改b.com/b.js文件内容：

复制代码代码如下:

myFunction('hello');

然后修改a.com/a.html内容：

Nach dem Login kopieren

运行a.html 结果是弹出‘hello world'。这个应该也毫无疑问。

引导步骤3

让我们再看一下上面的步骤2，b.js中的‘hello'就是b.com域名下的数据了，而能够在a.com／a.html中执行显示出来，这不就已经实现了跨域请求数据了吗？

另外，因为script标签中的src 不一定要指向js文件，而可以指向任何地址。

所以，我们把上面步骤2中a.html的内容：


          Nach dem Login kopieren

protected void page_load(object sender, EventArgs e){ if(this.IsPostBack == false){ string callback = ''; if(Request["callback"] != null){ callback = request["callback"]; string data = "hello"; Response.Write(callback+"("+ data + ")"); //接口页面返回的数据格式“函数（参数）”的格式。 } } }

$.ajax({ url: 'b.com/b.json', //不同的域 type: 'GET', // jsonp模式只有GET是合法的 dataType: 'jsonp', // 数据类型 jsonp: 'callback', // 指定回调函数名，与服务器端接收的一致，并回传回来 success: function(data) { console.log(data); } })

if (s.dataType == "jsonp") {　　 // 构建jsonp请求字符集串。jsonp是跨域请求，要加上callback=？后面将会加函数名　　　　　　　　　　　　　 if (type == "GET") { //使get的url包含 callback=？后面将会进行加函数名 if (!s.url.match(jsre))　　　　　 s.url += (s.url.match(/?/) ? "&" : "?") + (s.jsonp || "callback") + "=?";　　　　　 } // 构建新的s.data，使其包含 callback=function name else if (!s.data || !s.data.match(jsre))　　　 s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?"; s.dataType = "json"; } //判断是否为jsonp,如果是，进行处理。 if (s.dataType == "json" && (s.data && s.data.match(jsre) || s.url.match(jsre))) {　　 jsonp = "jsonp" + jsc ++; //为请求字符集串的callback=加上生成回调函数名 if (s.data) s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");　　 s.url = s.url.replace(jsre, "=" + jsonp + "$1"); // 我们需要保证jsonp 类型响应能正确地执行　　 //jsonp的类型必须为script。这样才能执行服务器返回的　　 //代码。这里就是调用这个回调函数。 s.dataType = "script"; //window下注册一个jsonp回调函数有，让ajax请求返回的代码调用执行它， window[jsonp] = function(tmp) {　　　 data = tmp; success(); complete();　　 // 垃圾回收,释放联变量，删除jsonp的对象，除去head中加的script元素　　 window[jsonp] = undefined;　　　 try {　 delete window[jsonp];　　　　　 } catch (e) {}　　　 if (head)　 head.removeChild(script);　　　 };　　 } if (s.data && type == "GET") {　　　 // data有效，追加到get类型的url上去 s.url += (s.url.match(/?/) ? "&" : "?") + s.data;　　　 // 防止IE会重复发送get和post data s.data = null; } if (s.dataType == "script"　 && type == "GET" && parts && (parts[1] && parts[1] != location.protocol || parts[2] != location.host)) {　　　 // 在head中加上 var head = document.getElementsByTagName("head")[0];　　　 var script = document.createElement("script");　　　 script.src = s.url;　　　 if (s.scriptCharset) script.charset = s.scriptCharset; if (!jsonp) {　　//如果datatype不是jsonp，但是url却是跨域的。采用scriptr的onload或onreadystatechange事件来触发回调函数。 var done = false;　// 对所有浏览器都加上处理器 script.onload = script.onreadystatechange = function() {　　　　　 if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {　　　　　　　　　 done = true;　 success();　　　　　　　　 complete(); head.removeChild(script);　　　　　　　 }　　　 };　　 }　　 head.appendChild(script); // 已经使用了script 元素注射来处理所有的事情 return undefined; }