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

JSON是一种基于文本的数据交换方式，或者叫作数据描述格式，这篇文章主要介绍了JS跨域交互(jQuery+php)之jsonp使用心得的相关资料，很是不错，具备参考借鉴价值，须要的朋友一块儿学习吧

什么是jsonp？

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

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。因为同源策略，通常来讲位于 server1.example.com 的网页没法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页能够获得从其余来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并非 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

JSONP（JSON with Padding），我更倾向于把最后一个字母P理解为 protocol（协议，约定）；

JSON的优势：

　　一、基于纯文本，跨平台传递极其简单；

　　二、Javascript原生支持，后台语言几乎所有支持；

　　三、轻量级数据格式，占用字符数量极少，特别适合互联网传递；

　　四、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进以后仍是很容易识别的；

　　五、容易编写和解析，固然前提是你要知道数据结构；

　　JSON的缺点固然也有，但在做者看来实在是可有可无的东西，因此再也不单独说明。

有这么一个故事：

A男和B女居住在不一样的国家A国和B国，在一次去C国旅行的途中相遇了，双方聊的比较Happy，旅行结束都回国了；但A男老是会想B女，想联系上B女，无奈当时没有留下B女的电话、邮箱、微信、QQ号码这些能够更加即时的联系方式，只是闲聊间知道B女地址，那就只能写信吧去C国也不太现实；因而就写信把本身的各类即时联系方式都写进去了，一封信寄出去了过了一段时间没有回音又写一封，就是没有收到C友的电话等任何回音；对方收到了没有呢，肯定是收到了也看了。
这是为何呢？C女不想搭理他呗（没有按A男指定的方式回调）！

JSONP就是这么一回事，你知道对方的调用地址，告诉对方你的回调函数名称是什么，但对方若是不配合，就是不调用你约定的回调函数名称，你调用多少次也没用，因此JSONP的关键仍是要对方配合你才行。

js跨域交互实现原理

HTML <script> 标签，对就是它，世界因它而美好！

你可使用这个标签加载任何其它可访问到的网站的js文件试试，我就很少说了；

跨域交互一：jQuery.getScript

这个例子比较简单易懂，使用固定的回调函数名称：fncallback

调用端，也能够说是客户端：

我是在本地测试，跑了多个Web服务，本地页面访问地址：http://localhost:88/

网页中的JS代码以下：

<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
//定义名称为“fncallback”的回调函数，参数接收JSON对象； 
function fncallback(data){ 
$(document.body).append("<hr />getScript ok!" + data.reqUrl); 
} 
//注册页面加载完成回调函数（匿名） 
$(document).ready(function(){ 
//使用getScript方法调用跨域脚本； 
$.getScript("http://localhost/test2.php"); 

}); 
</script>

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

getScript ok!/test2.php?_=1467261287339

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

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

被调用端，也能够说是服务端

服务端后台语言是PHP，经过Nginx代理的，端口为：80，因此访问地址是：http://localhost/test2.php

test2.php 文件的内容：

<?php 
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo "fncallback({\"reqUrl\": reqUrl });";

浏览器访问：

经过浏览器访问，天然没有后面的参数，除非你本身手动加上；

跨域交互二：jQuery.getJSON

调用端：

<script type="text/javascript"> 
//注册页面加载完成回调函数（匿名） 
$(document).ready(function(){ 
//使用getJSON方法调用跨域脚本；注册匿名回调函数 
$.getJSON("http://localhost/test.php?callback=?", function(data){ 
$(document.body).append("<hr />getJSON ok!" + data.reqUrl); 
}); 
}); 
</script>

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

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

getJSON ok!/test.php?callback=jQuery1102031468501139651384_1467262280037&_=1467262280038

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

服务端

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

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

var reqUrl = "/test.php?callback=jQuery1102019717387174726153_1467262461959&_=1467262461960"; 
jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });

跨域交互三：jQuery.ajax

调用端：

<script type="text/javascript"> 
//注册页面加载完成回调函数（匿名） 
$(document).ready(function(){ 
//使用ajax方法调用跨域脚本； 
$.ajax({ 
url:"http://localhost/test.php", 
dataType: 'jsonp', 
success: function(data){ 
$(document.body).append("<hr />ajax ok!" + data.reqUrl); 
} 
}); 
}); 
</script>

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

服务端

这个例子的服务端和上个是彻底同样的！

使用总结

使用 getScript 的方式，你能够本身定义一个回调函数的名称，让服务端响应的时候使用你指定的回调函数名称；

使用 getJSON 的方式关键在于URL后面添加的“callback=?”；

使用 ajax 的方式关键在于参数中的数据类型设置“dataType: 'jsonp',”；

以上所述是小编给你们介绍的JS跨域交互(jQuery+php)之jsonp使用心得，但愿对你们有所帮助，若是你们有任何疑问请给我留言，小编会及时回复你们的。在此也很是感谢你们对脚本之家网站的支持！