jsonp的理解

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

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

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

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

首先创建一个api.js:

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

然后在index页面上加载js:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h1>我是主页</h1>

    <script src="{% static ‘jsnpapp/api.js‘ %}"></script>
</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h1>我是主页</h1>

    <script src="http://localhost:8000/static/jsnpapp/api.js"></script>
</body>
</html>

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

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

现在改进一下:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h1>我是主页</h1>

    <script>
    var localHandler = function(data) {
        alert(‘我是本地的函数,我要跨域调用,远程js带来的数据是:‘+data.result);
    }
    </script>
    <script src="http://localhost:8000/static/jsnpapp/api.js"></script>
</body>
</html>

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <h1>我是主页</h1>

    <script>
        var localHandler = function(data) {
            alert(‘我是本地的函数,我要跨域调用,远程js带来的数据是:‘+data.result);
        }

         // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
         var url = "http://localhost:8000/jsnpapp/api?code=1&callback=localHandler";
         // 创建script标签,设置其属性
         var script = document.createElement(‘script‘);
         script.setAttribute(‘src‘, url);
         // 把script标签加入head,此时调用开始
         document.getElementsByTagName(‘head‘)[0].appendChild(script);

    </script>
</body>
</html>

服务端,首先要创建一个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的执行过程全部完成。

时间: 2024-08-08 05:20:09

jsonp的理解的相关文章

对jsonp原理理解

对于javascript程序员来说,发送ajax请求获取后台数据然后把数据和模板拼接成字符串渲染回DOM实现无刷新更新页面这样的操作可谓是轻车熟路.但众所周知,ajax有一个不好,就是不能跨域传输数据,而跨域传输有时候又是必须用到的,比如我们可能需要调用第三方网站提供的某些API来获取某些信息,提供给我们网站的用户. 例如,要开发一个天气应用,你可能需要调用第三方的天气API,这个时候就必然涉及到跨域请求数据,因为毕竟我们不可能为了开发一个天气应用就自己搭建一个天气API.在少数情况下,如果第三

深入理解jsonp解决跨域访问

在我们做的这个项目中充分利用jsonp跨域这一个特性,完成了简单的单点登录功能和权限统一认证控制,实现思路并不复杂同各种实现单点登录的产品相比可以说微不足道,各有各的好处.各有各的优点,选择什么方式实现完全取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了目前开发项目的整体架构. 这不是一项凭空产生的新东西,仅仅是JS的一个特性而已之前没有被我们提及也没有被我们注意到原来经常使用的js还可以跨域呢,觉的我们对已经学过的东西理解还不是不够深入.有些肤浅,JS绝大多数在浏览器中运行

你不知道的jQuery Item11 -- ajax jsonp跨域方法详解

文章从JSON和JSONP区别开始讲起,用实例来对比他们之间的不同之处,然后详细讲解了jQuery中的ajax jsonp的使用并给出了示例及详细参数说明. 1.JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON),你要跨域请求别人的东西,你肯定要包裹起来,不要污染了别人的东西,把Json数据包裹

深入了解jsonp解决跨域访问

在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了眼下开发项目的总体架构. 这不是一项凭空产生的新东西.不过JS的一个特性而已之前没有被我们提及也没有被我们注意到原来常常使用的js还能够跨域呢,觉的我们对已经学过的东西理解还不是不够深入.有些肤浅,JS绝大多数在浏览器中执行完毕各种动态效果,开发js的人一開始应该就考虑到了浏览器的

同源策略、jsonp、阻塞事件

同源策略: 举个例子,你在访问 某个网页的时候比如 www.xxxx.com ,返回的html页面中存在的js在执行的时候只会在 xxxxx 这里执行,如果同时存在另一个tab 是 www.yyyyy.com 其中的js 在执行的时候只在 yyyyy 返回的这个首页网页中执行. 浏览器加载js的时候会判断 js 所属的 1.域名 2.端口 3.协议 jsonp: json 是数据表达格式,类似于xml 当然,我说的类似值得的是它们都是数据表达格式,但是实现方式和格式都不同,在此不多说. json

webApp 阅读器项目实践

这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader. 项目属于麻雀虽小,但五脏俱全的类型,对于前端新手来说,还是很有学习价值. 一.项目成果展示 二.项目所用技术 语言:Html,css,js 插件: zepto.js: 使用于移动端的js库,语法与jquery相似,但增加了触摸等移动端事件,去掉了对浏览器兼容的代码,因此更轻量级 jquery.ba

jquery中ajax跨域设置http header

一.ajax请求,没有跨域,有设置http header头部 $.ajax({ type: "post", url:"http://abc.cc/qrcode3/index.php/home/index/testpost", dataType: "json" data: {"value":"{$encodeString}"}, // headers : {'Authorization':'Base bmVv

关于跨域和同源策略的一点总结

这几天在chrome跑项目的时候遇到了一点问题,如下: 接着通过这个错误,引申出了在这次的问题中所要学习的东西: 1.什么是跨域,什么情况下才会产生跨域呢? 2.针对跨域有什么样子的解决办法? 3.同源策略指的是? 4.针对这次问题是如何产生的? 针对以上的问题,通过结合网上的资料,完成了下面的答案: 1.什么是跨域,什么情况下才会产生跨域呢? 跨域指的是不同域名之间相互访问.例如我的电脑上有两个服务器192.168.0.11和192.168.0.12,如果第一个服务器上的页面要访问第二个服务器

关于Access Control Allow Origin错误的问题

前天第一次使用jquery向服务器发送Get请求.结果吸拜了...查看console提示说"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.",嗯好吧,google了一下才知道是跨域问题. 跨域访问:AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面