原理:借助script可以跨域的思想,将跨域请求放在script中,当页面解析到改script标签时,就会向该src指向的地址发出一个请求,达到跨域请求的目的。
服务器端配合处理: 在前端传入事件处理函数如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.")"; //拼接字符串 ?>
结果如下
这种方法实现的话,每个请求都要重新生成数据,可以采用动态生成脚本的方式,将数据放到脚本中,脚本中存放数据
优缺点:
使用JSON的优点在于:
JSON也有一些劣势:
尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。
第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。
原文:http://www.cnblogs.com/lydialee/p/4868393.html