博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jsonp的理解
阅读量:5075 次
发布时间:2019-06-12

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

众所周知:在开发过程中,有时候需要客户端从服务器接收或向服务器发送一些数据;如果使用普通的ajax,则会遇到跨域访问无权限的问题。

要解决这个问题,就需要了解一下jsonp了:

1. ajax请求普通文件存在跨域访问无权限的问题。

2. 但是当远程请求js文件时则不受跨域影响,而且只要是有src属性的标签都有跨域的能力
3. 如果想通过纯web端跨域访问数据就只有一种可能,就是在服务端设法把数据封装进js文件中,给客户端
4. 刚好json的数据格式是被js支持的

 

有了以上4点,解决方案就呼之欲出了,先来个简单的例子(django):

首先创建一个api.js:

alert('我在服务器上!')

然后在index页面上加载js:

{% load staticfiles %}    
主页

我是主页

接下来启动服务器访问一下:

这样似乎没有什么意义,它们在同一个域中! 那现在我们在本地桌面上新建立一个index.html文件来模拟跨域:

    
主页

我是主页

可以看到,在本地的index.html中调用了远程服务器的api.js文件;下面用浏览器打开本地index.html:

可以看到远程服务器的js被本地执行了。

现在改进一下:

在本地index.html中定义一个函数:

    
主页

我是主页

服务器上的api.js也修改一下:

localHandler({
"result":"我是远程js带来的数据"});

有点意思,远程服务器要执行本地的函数;我们用浏览器打开本地index.html看看效果:

很完美,本地的函数被远程服务器跨域执行了,而且本地也得到了服务器发来的数据。这样一个跨域就实现了。 但问题是,这些数据都是写死的,

怎么让远程服务器端知道本地的函数名呢,然后返回不同的数据呢?毕竟服务端是要服务很多客户的,这些客户的需求是不一样的。

如果客户端能传递一个参数给服务器,告诉服务器“我要XX函数的数据,请返回给我”, 于是服务端就可以按照客户端的请求响应数据了。

 

再改进一下,动态响应客户端

先修改一下本地的Index.html,   为了满足各种需求,那么请求url的参数就不能被写死,要动态生成;可以使用动态生成<script>标签的方法来实现:

    
主页

我是主页

服务端,首先要创建一个url, 然后views, 服务端接收到客户端发来的参数后,动态生成了localHandler这个函数的javascript代码并返回给客户端:

urlpatterns = [    url(r'^api/', views.base_api),    url(r'^index/$', views.index),]
def base_api(request):    if request.method == "GET":        code = request.GET.get('code')        callback = request.GET.get('callback')        if code == '1':            msg = "%s({'result':'你给我1, 我就给你1111'})" % callback            print('msg:', msg)            return HttpResponse(msg)    return HttpResponse('我是服务器!')

浏览器运行index.html :

 

客户端成功获取到了服务端返回的数据。jsonp的执行过程全部完成。

转载于:https://www.cnblogs.com/huangxm/p/5931499.html

你可能感兴趣的文章
http://yusi123.com/
查看>>
文件文本的操作
查看>>
Ubuntu linux下gcc版本切换
查看>>
记一次Web服务的性能调优
查看>>
Linux常用命令大全
查看>>
jQuery.form.js使用
查看>>
【ztree】zTree节点增删改
查看>>
不变(Immutable)模式
查看>>
react-native run-android时 SDK location not found.报错
查看>>
75)编写嗅发器
查看>>
内存池原理大揭秘
查看>>
快速探索,音视频技术不再神秘
查看>>
惊喜!腾讯云豪掷660万代金券!助力直通硅谷创业大赛
查看>>
(转)linux sort,uniq,cut,wc命令详解
查看>>
关于ExecuteNonQuery执行的返回值(SQL语句、存储过程)
查看>>
UVa540 Team Queue(队列queue)
查看>>
mysql数据增删改查
查看>>
shell中下载最新版本或指定版本的办法(Dockerfile 中通用)
查看>>
极客时间-左耳听风-程序员攻略-分布式架构工程设计
查看>>
akka之种子节点
查看>>