jsonp跨域请求

 

在web2.0的时代，ajax的盛行给web带来了翻天覆地的变化，容许在不干扰 Web 应用程序的显示和行为的状况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，容许客户端 JavaScript 经过 HTTP 链接到远程服务器。不过，因为受到浏览器的限制，该方法不容许跨域通讯。若是尝试从不一样的域请求数据，会出现安全错误。

在工做中，咱们常常会碰到跨域的问题，同源策略阻止从一个域上加载的脚本获取或操做另外一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。实现跨域的方式有不少，如：使用iframe隐藏，JSONP等。

如今主流的都是使用JSONP去实现跨域，什么是JSONP？简单的来讲就是JSON-Padding。

对不少新手来讲JSONP并非很理解，简单的说明下：

因为script的连接是能够跨域获取的，如：

<script src=“http://jsonp.js”> </script>

 

而jsonp.js里面有一段JS代码，浏览器会执行里面的代码。想到这个，前端页面咱们能够写一个函数，如：

function jsonp(data){ alert(data.name); } 

data为json格式的数据，而后再远程的jsonp.js里面，有一段代码为jsonp({“name”:”Demon”,”age”:”23”})，浏览器会根据这段代码执行函数，从而弹出”Demon”。

 

如何使用JSONP，使用JSONP，咱们必须带一 个参数传给程序员，在后面加一个callback=？的参数，“？”为前端页面JS函数的名称，若是不是使用JQ库的，这个须要根据前端工做人员来定义。 若是使用JQ库，那么这里比较方便了，JQ库会直接把返回过来的”？”进行解析，如图所示：

 

红色圈圈部分就是JQ自动解析成的函数名，而后执行。JQ实现JSONP方法很简单，代码以下：

 
   
   $.ajax({ type:"GET", url:"http://xxx.php?action=add&callback=?", dataType:"json", success: function(msg){ console.log(msg.status); }

 或者：

 
   
   $.ajax({ type:"GET", url:"http://xxx.php?action=add", dataType:"jsonp", success: function(msg){ console.log(msg.status); }

这里注意下，若是url中带了”callback=？”，那么dataType只要写json就能够，若是dataType为jsonp，那么url的连接能够不带”callback=？”，JQ会自动在连接中加上”callback=？”

程序接口如何实现：

注意的是这里程序须要配合，程序返回数据的时候，必须带上url中callback的参数，好比PHP中返回要写成 echo $_GET[‘callback’] . ’(’ . josn_encode($josnData) . ’)’;

JSONP虽然强大，可是也有一些缺陷：

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。若是动态脚本插入有效，就执行调用；若是无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或从新开始请求。在安全方面，若是不是信任的网站提供的接口，颇有可能会受到恶意的攻击。等等。