从原理上理解jsonp

时间:2022-10-07 16:08:12

大家都知道在实际应用中常常会遇到跨域请求的问题,由于第三方插件的封装,跨域请求已经不是什么难题,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指向你要请求的地址。

从原理上理解jsonp

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

从原理上理解jsonp

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

从原理上理解jsonp

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