jsonp跨域实现

 

原理：借助script可以跨域的思想，将跨域请求放在script中，当页面解析到改script标签时，就会向该src指向的地址发出一个请求，达到跨域请求的目的。

两点：（1）主要是利用了 <script/>标签的跨域性 （2）script标签对javascript文档的动态解析来实现

服务器端配合处理： 在前端传入事件处理函数如url?callback=fun，后台获取这个callback参数，通过字符串拼接，组合成函数调用的形式，将数据也拼接进去，构造js代码，返回给前端的script标签，在前端script标签会自动执行返回的代码。（因为后台没法直接执行函数调用），所以是在后台返回一个拼接的调用形式，返回给前端，script标签会自动执行，从而实现跨域。

demo：

<script>
    function handlerData(data){ alert('获取到数据');
        console.log(data);  
    }
</script>
<script src='http://webgis.ecnu.edu.cn/beta/cross.php?callback=handlerData'></script>

服务器端：

<?php
$callback = $_GET['callback'];
$data ='["hello","world"]';
echo $callback."(".$data.")";   //拼接字符串   或者 "try" $callback."($data)". "catch(e){}"
?>

结果如下

 

  这种方法实现的话，每个请求都要重新生成数据，可以采用动态生成脚本的方式，将数据放到脚本中，脚本中存放数据,向客户端返回一个js

 

 

缺点：返回的函数执行出错时，没有错误提示，只能看控制台下的报错信息。

优缺点：

使用JSON的优点在于：

• 比XML轻了很多，没有那么多冗余的东西。
• JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
• 在JavaScript中处理JSON很简单。
• 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：

• JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
• 如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

 

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

 

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。