[聚合文章] jsonp 的原理和使用

jsonp 是一种非正式的传输协议（数据的调用方式），是解决跨域请求的一种常规方式。它和json的区别是json是一种纯文本，跨平台和语言的数据描述格式。

跨域

跨域，指浏览器因为同源策略，不能执行其他网站的脚本。

同源策略是浏览器的一种安全机制，防止用户信息窃取，判断两个网站是否同源，必须满足三个数据完全一致：协议，域名，端口。

原理

jsonp是利用script标签请求js文件时添加callback参数，在服务器返回数据时，通过该参数作为函数名称包裹json数据返回浏览器，然后按照常规方式处理数据。

使用

我们现在创建两个跨域文件

(a) demo.html 保存localhost:3000

(b) testCallback.js 保存 https://io.github.com

testCallback.js

testCallback({
    name:'bojue'
});

我们通过jsonp可以完成js对浏览器的跨域请求，一般有两种常用的调用方式：

第一种是直接使用script标签添加callback参数的方式

第二种是调用Jquery库的ajax方法。

1.script标签

demo.html 一段js文件

function testCallback(data) {
    console.log(data) // name: bojue
} 

var ele = document.createElement("script");
ele.type = "text/javascript";
ele.src = "https://io.github.com?callback=testCallback";
document.getElementsByTagName("head")[0].appendChild(ele);

2.ajax

demo.html 一段js文件,前提引入了Jquery库

$.ajax({
     url: "https://io.github.com",
     dataType: "JSONP",
     jsonpCallback: 'testCallback', 
     success: function(data){
         console.log(data); 
   }
});

欢迎访问： 个人主页