频道导航

JS跨域交互(jQuery+php)之jsonp使用心得

2019-01-05 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了JS跨域交互(jQuery+php)之jsonp使用心得，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

什么是jsonp？

说到jsonp，你可能最先想到JSON；它还真和JSON有关系；

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

效果：在页面尾部增加一条线，以及：getScript ok! ，后面紧跟被调用端返回的它接收到的请求地址：

PHP?_=1467261287339

后面为什么会多了个“?_=1467261287339”呢？

这是防止浏览器从缓存去加载这个URL地址的内容的！由jQuery自动添加；

被调用端，也可以说是服务端

服务端后台语言是PHP，通过Nginx代理的，端口为：80，所以访问地址是：PHP">http://localhost/test2.PHP

test2.PHP 文件的内容：

PHP;"> PHP echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; echo "fncallback({\"reqUrl\": reqUrl });";

浏览器访问：

通过浏览器访问，自然没有后面的参数，除非你自己手动加上；

跨域交互二：jQuery.getJSON

调用端：

注册页面加载完成回调函数（匿名） $(document).ready(function(){ //使用getJSON方法调用跨域脚本；注册匿名回调函数 $.getJSON("http://localhost/test.PHP?callback=?",function(data){ $(document.body).append("

getJSON ok!" + data.reqUrl); }); });

注意：我在请求的地址中添加了“?callback=?”，这是做什么用的呢？

目的是让jQuery为我自动生成一个回调函数的名称，并将我注册的匿名回调函数映射到这个“自动生成的回调函数名称”上；有点绕，我们来看看服务端返回的它收到的请求地址就明白了：

PHP?callback=jQuery1102031468501139651384_1467262280037&_=1467262280038

看到callback后面跟了参数值了吧，这就是jQuery自动生成的；再看服务端代码；

服务端

PHP echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; echo $_GET["callback"] . "({\"reqUrl\": reqUrl });";

通过 $_GET["callback"] 获取客户端传递过来的回调函数名称；看输出：

PHP?callback=jQuery1102019717387174726153_1467262461959&_=1467262461960"; jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });

跨域交互三：jQuery.ajax

调用端：

注册页面加载完成回调函数（匿名） $(document).ready(function(){ //使用ajax方法调用跨域脚本； $.ajax({ url:"http://localhost/test.PHP",dataType: 'jsonp',success: function(data){ $(document.body).append("

ajax ok!" + data.reqUrl); } }); });

注意：在请求的地址中不需要添加“?callback=?”，但我们使用“dataType: 'jsonp',”；

服务端

这个例子的服务端和上个是完全一样的！