从原理上理解jsonp

大家都知道在实际应用中常常会遇到跨域请求的问题，由于第三方插件的封装，跨域请求已经不是什么难题，jQuery就提供了很好的jsonp请求方法，大家也就习惯的使用着。但是虽然jQuery将jsonp的跨域请求封装进了$.ajax()方法中，让人觉得和普通的ajax请求没有区别，好像是一回事，但实际上，有着本质的区别。
首先，在浏览器没有提供XMLHttpRequest对象时，要想实现无刷新,只能使用古老的办法，一般都是会前后台一起配合，经过iframe、img或者script，指定src（请求后台的链接），实现前后台数据交互。其实jsonp，就是这种最原始的，石器时代的办法！至于现代化的ajax请求，请详看XMLHttpRequest对象，js原生的ajax请求。接下来我们将从代码上讲解jsonp跨域请求的原理。

前台代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf8'>
    <title></title>
    <script>
        function send(){
            var theurl='http://www.myhost.com/jsonp/back.php';
            theurl+='?name=lilei';
            theurl+='&age=28';
            theurl+='&callBack=success';

            //创建一个script,指定src为要请求的链接地址
            var childnode = document.createElement('script');
            childnode.setAttribute('id','create_requst');
            childnode.setAttribute('src',theurl);
            var parentnode = document.getElementsByTagName('head');
            parentnode[0].appendChild(childnode);

            //请求完毕删除创建的节点            
            var remove_node = document.getElementById('create_requst');
            remove_node.parentNode.removeChild(remove_node);
        }
        //请求成功后的回调函数
        function success( msg ){
            document.getElementById('back_data').innerHTML='yourname:'+msg.name+'---yourage:'+msg.age;
        }
    </script>
</head>
<body>

<a href="javascript:;" target="_self" onclick="send()">点击测试</a>
<h1 id="back_data"></h1>
</body>
</html>

后台代码如下：

<?php
$callBack = $_GET['callBack'];
$bak_data=$callBack."(".json_encode($_GET).")";
echo $bak_data;

点击后将在head中生成一个script标签，src指向你要请求的地址。

点击后

同时请求成功，其实返回的数据就是在回调函数success(),中传了一个object。

返回数据

回调函数success处理数据，将数据写入h1中。

请求成功

其实总体思路就是创建一个请求，然后后端返回给浏览器一个结果，而这个结果呢正好符合JavaScript执行的规范。callback参数指定的就是请求成功后，要调用的js函数。将数据扔到这个回调函数中去做处理，这样就绕开了浏览器的跨域限制。

从原理上理解jsonp

猜你喜欢