跨域问题–JSONP实现（一）

json.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP</title>
</head>
<body>
    <script>
        var localHandler = function(data){
             alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
        };
    </script>
    <script src="http://localhost:8080/remote.php?a=7&b=2&cb=localHandler"></script>
</body>
</html>

remote.php

<?php
    $a = $_GET['a'];
    $b = $_GET['b'];
    $c = $a + $b;
    $cb = $_GET['cb'];

    echo "$cb({result: $c})"; //从前台获取a和b，将a+b结果返回到回调函数
?>

启动apache,在浏览器访问：http://localhost:8080/remote.php?a=7&b=2&cb=localHandler
显示文本：

localHandler({result: 9})

跟期望的结果一致。
用浏览器打开在jsonp.html，会弹出对话框打印计算后结果。

jquery对jsonp的支持

后台php代码保持不变，js代码用jquery $.ajax代替

 <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

   <script>
        $.ajax({
             type: "get",
             async: false,
             url: "http://localhost:8080/remote.php?a=7&b=1",
             dataType: "jsonp",
             jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"localHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(data){
                 alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
             },
             error: function(){
                 alert('fail');
             }
         });
   </script>

jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！
参考链接：
http://harttle.com/2015/10/10/cross-origin.html
https://segmentfault.com/a/1190000003710973