博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单透彻理解JSONP原理及使用
阅读量:5348 次
发布时间:2019-06-15

本文共 1399 字,大约阅读时间需要 4 分钟。

什么是JSONP

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

那么JSONP是什么呢? 

首先抛出浏览器同源策略这个概念,为了保证用户访问的安全,现代浏览器使用了同源策略,即不允许访问非同源的页面,详细的概念大家可以自行百度。这里大家只要知道,在ajax中,不允许请求非同源的URL就可以了,比如www.a.com下的一个页面,其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。

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

JSONP原理

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

JSONP具体实现

1.首先看下ajax中如果进行跨域请求会如何。 

前端代码在域www.practice.com下面,使用ajax发送了一个跨域的get请求

 GoJSONP       

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

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

 

当访问前端代码 时 chrome报以下错误 

这里写图片描述
提示了不同源的URL禁止访问

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

 GoJSONP       

这里调用了跨域的remote.js脚本,remote.js代码如下:

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

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

这里写图片描述

3.将前端代码再进行修改,代码如下:

 GoJSONP       

 

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

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的方式,代码如下:

 GoJSONP      

转载于:https://www.cnblogs.com/mei123/p/9272448.html

你可能感兴趣的文章
Ubuntu改坏sudoers后无法使用sudo的解决办法
查看>>
NEYC 2017 游记
查看>>
[搬运] 写给 C# 开发人员的函数式编程
查看>>
Python之旅Day14 JQuery部分
查看>>
core--线程池
查看>>
redux-effect
查看>>
Android轻量级的开源缓存框架ASimpleCache
查看>>
他山之石:加载图片的一个小问题
查看>>
shell - 常识
查看>>
mssql sqlserver 使用sql脚本 清空所有数据库表数据的方法分享
查看>>
分层图最短路【bzoj2763】: [JLOI2011]飞行路线
查看>>
linux下编译复数类型引发的错误:expected unqualified-id before '(' token
查看>>
codeforces 1041A Heist
查看>>
Spring Cloud Stream消费失败后的处理策略(三):使用DLQ队列(RabbitMQ)
查看>>
bzoj1048 [HAOI2007]分割矩阵
查看>>
Java中的编码
查看>>
PKUWC2018 5/6
查看>>
As-If-Serial 理解
查看>>
洛谷P1005 矩阵取数游戏
查看>>
在Silverlight中使用HierarchicalDataTemplate为TreeView实现递归树状结构
查看>>