js---JSONP原理及使用

时间 2019-11-10

原文原文链接

极简解释：javascript

利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通信的目的。当须要通信时，本站脚本建立一个<script>元素，地址指向第三方的API网址，形如：
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或经过地址参数传递）。
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数，并传递解析后json对象做为参数。本站脚本可在callback函数里处理所传入的数据。

如下文章转载自 http://blog.csdn.net/u011897301/article/details/52679486php

什么是JSONP

首先提一下JSON这个概念，JSON是一种轻量级的数据传输格式，被普遍应用于当前Web应用中。JSON格式数据的编码和解析基本在全部主流语言中都被实现，因此如今大部分先后端分离的架构都以JSON格式进行数据的传输。html

那么JSONP是什么呢？
首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不容许访问非同源的页面，详细的概念你们能够自行百度。这里你们只要知道，在ajax中，不容许请求非同源的URL就能够了，好比www.a.com下的一个页面，其中的ajax请求是不容许访问www.b.com/c.php这样一个页面的。前端

JSONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？java

JSONP原理

ajax请求受同源策略影响，不容许进行跨域请求，而script标签src属性中的连接却能够访问跨域的js脚本，利用这个特性，服务端再也不返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。jquery

JSONP具体实现

1.首先看下ajax中若是进行跨域请求会如何。
前端代码在域www.practice.com下面，使用ajax发送了一个跨域的get请求ajax

<!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> <script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.practice-zhao.com/student.php?id=1", type: "json", success : function(data) { jsonhandle(data); } }); }); </script> </body> </html>

后端PHP代码放在域www.practice-zhao.com下，简单的输出一段json格式的数据chrome

jsonhandle({ "age" : 15, "name": "John", })

当访问前端代码http://www.practice.com/gojsonp/index.html 时 chrome报如下错误

提示了不一样源的URL禁止访问json

2.下面使用JSONP，将前端代码中的ajax请求去掉，添加了一个script标签，标签的src指向了另外一个域www.practice-zhao.com下的remote.js脚本后端

<!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> <script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script> </body> </html>

这里调用了跨域的remote.js脚本，remote.js代码以下：

jsonhandle({ "age" : 15, "name": "John", })

也就是这段远程的js代码执行了上面定义的函数，弹出了提示框

3.将前端代码再进行修改，代码以下：

<!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> <script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle"; var obj = $('<script><\/script>'); obj.attr("src",url); $("body").append(obj); }); </script> </body> </html>

这里动态的添加了一个script标签，src指向跨域的一个php脚本，而且将上面的js函数名做为callback参数传入，那么咱们看下PHP代码怎么写的：

<?php $data = array( 'age' => 20, 'name' => '张三', ); $callback = $_GET['callback']; echo $callback."(".json_encode($data).")"; return;

PHP代码返回了一段JS语句，即

jsonhandle({ "age" : 15, "name": "张三", })

此时访问页面时，动态添加了一个script标签，src指向PHP脚本，执行返回的JS代码，成功弹出提示框。
因此JSONP将访问跨域请求变成了执行远程JS代码，服务端再也不返回JSON格式的数据，而是返回了一段将JSON数据做为传入参数的函数执行代码。

4.最后jQuery提供了方便使用JSONP的方式，代码以下：

<!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.practice-zhao.com/student.php?id=1", dataType: "jsonp", jsonp:"callback", //请求php的参数名 jsonpCallback: "jsonhandle",//要执行的回调函数 success : function(data) { alert("age:" + data.age + "name:" + data.name); } }); }); </script> </body> </html>