前端之家收集整理的这篇文章主要介绍了
JSONP原理及使用，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面.
JSONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
JSONP具体实现
1.首先看下ajax中如果进行跨域请求会如何。
前端代码在域www.newton.com下面，使用ajax发送了一个跨域的get请求
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
<!DOCTYPE html>
<html>
head>
title>GoJSONP
</title>
head>
body>
script type=
"text/javascript">
function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } script>
"text/javascript" src=
"jquery-1.8.3.min.js">
"text/javascript">
$(document).ready(function(){ $.ajax({ type : "get",async: false,url : "http://www.newton_xt.com/student.PHP?id=1",type: "json",success : (data) { jsonhandle(data); } }); }); html>
后端PHP代码放在域www.newton_xt.com下，简单的输出一段json格式的数据
1
2
3
4
jsonhandle({ "age" : 15,"name": "John",})
当访问前端代码http://www.newton.com/gojsonp/index.html时 chrome报以下错误
提示了不同源的URL禁止访问
2.下面使用JSONP，将前端代码中的ajax请求去掉，添加了一个script标签，标签的src指向了另一个域www.newton_xt.com下的remote.js脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
"http://www.newton_xt.com/remote.js">
这里调用了跨域的remote.js脚本，remote.js代码如下：
也就是这段远程的js代码执行了上面定义的函数，弹出了提示框
3.将前端代码再进行修改，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
(){ var url =
"http://www.newton_xt.com/student.PHP?id=1&callback=jsonhandle";
var obj = $(
'<script><\/script>'); obj.attr(
"src",url); $(
"body").append(obj); });
这里动态的添加了一个script标签，src指向跨域的一个PHP脚本，并且将上面的js函数名作为callback参数传入，那么我们看下PHP代码怎么写的：
1
2
3
4
5
6
7
8
9
10
<?PHP $data = array( 'age' => 20,0); Box-sizing: border-Box;">'name' => '张三',); $callback = $_GET['callback']; echo $callback."(".json_encode($data).")"; return;
PHP代码返回了一段JS语句，即
"张三",85); font-family:'microsoft yahei'; font-size:14px; line-height:35px"> 此时访问页面时，动态添加了一个script标签，src指向PHP脚本，执行返回的JS代码，成功弹出提示框。
所以JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。
4.最后jQuery提供了方便使用JSONP的方式，代码如下：
"jsonp",jsonp:"callback", jsonpCallback: "jsonhandle",0); Box-sizing: border-Box;">//要执行的回调函数 success : (data) { alert("name:" + data.name); } }); }); html> 原文链接：https://www.f2er.com/json/289006.html
