开发者社区> 木头先生> 正文

使用JSONP实现跨域

简介: 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。 什么是JSONP? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。
+关注继续查看

什么是跨域?

简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。

什么是JSONP?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

JSONP跨域的基本原理

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。 

举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:

  1. {"id": 123, "name" : 张三, "age": 17}

那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下: 

  1. foo({"id": 123, "name" : 张三, "age": 17});

当然,如果服务端考虑得更加充分,返回的数据可能如下: 

  1. try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo: 

便可以使用foo函数来调用返回的数据了。 

 

JSONP跨域原理探秘

我们知道,使用 XMLHTTPRequest 对象发送HTTP请求时,会遇到 同源策略 问题,域不同请求会被浏览器拦截。

那么是否有方法能绕过 XMLHTTPRequest 对象进行HTTP跨域请求呢?

换句话说,不使用 XMLHTTPRequest 对象是否可以发送跨域HTTP请求呢?

细心的你可能会发现,像诸如:

<script type="text/javascript" src="http://www.a.com/scripts/1.js"></script>

<img src="http://www.b.com/images/1.jpg" />

<link rel="stylesheet" href="http://www.c.com/assets/css/1.css" />

这种标签是不会遇到"跨域"问题的,严格意义上讲,这不是跨域,跨域是指在脚本代码中向非同源域发送HTTP请求,这只是跨站资源请求。

那么,我们是否可以利用跨站资源请求这一方式来实现跨域HTTP请求呢?

以<script></script>标签为例进行探索,先看一段代码:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jsonp demo</title>

    <!-- JavaScript片断1 -->

    <script type="text/javascript">

        function handler(data) {

            alert(data);

            // our code here...

        }

    </script>

 

    <!-- JavaScript片断2 -->

    <script type="text/javascript">

        handler('success');

    </script>

</head>

<body>

    A JSONP demo.

</body>

</html>

这段代码中,有2个JavaScript片断,第1个片断中定义了一个处理函数handler(),这个处理函数比较简单,没有对数据做任何处理,只是把它alert出来;第2个片断调用了它,运行这个页面浏览器会弹出"success"。

我们假设第2个JavaScript片断存储在别的地方,然后我们使用<script src="" />的方式把它引入进来,像这样:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jsonp demo</title>

    <!-- JavaScript片断1 -->

    <script type="text/javascript">

        function handler(data) {

            alert(data);

            // our code here...

        }

    </script>

 

    <!-- JavaScript片断2 -->

    <script type="text/javascript" src="http://service.a.com/script/1.js"></script>

</head>

<body>

    A JSONP demo.

</body>

</html>

service.a.com/script/1.js:

handler('success');

这种方法和把JavaScript代码直接写在页面是等效的,但是,我们由此可以联想到什么?

我们是否可以事先在本页面定义处理程序,服务端返回JS脚本,脚本的内容就是对处理程序的回调,服务返回的数据通过参数的形式传回:

handler('服务返回的数据');

然后通过动态向当前页面head节点添加<script src="服务地址"></script>节点的方式来“伪造”HTTP请求?

于是,可以编写这样一个简单的测试用例:

先写服务端,非常简单的一个服务,返回字符串"Hello World",一般处理程序Service.ashx:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace JSONPDemo.Service

{

    /// <summary>

    /// Service2 的摘要说明

    /// </summary>

    public class Service2 : IHttpHandler

    {

 

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Response.Write("handler('Hello World');");

        }

 

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

再写客户端,一个简单的静态Web页,index.html:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        // 跨域发送HTTP请求,从服务端获取字符串"Hello World"

        function getHello() {

            var script = document.createElement('script');

            script.setAttribute('src', 'http://localhost:8546/Service.ashx');

            document.querySelector("head").appendChild(script);

        }

        // 处理函数

        function handler(data) {

            alert(data);

            // our code here...

        }

    </script>

</head>

<body>

    <input type="button" value="发送跨域HTTP请求,获取Hello World" onclick="getHello()" />

</body>

</html>

 

测试成功!

在这个测试例子中,我们使用一般处理程序编写了一个简单的返回Hello World的服务,然后使用动态创建<script></script>节点的方式实现了跨域HTTP请求。

由于<script>、<img>标签资源请求是异步的,所以我们就实现了一个跨域的异步HTTP请求。

但是这么做是不够的,一个页面可能会有多个HTTP请求,而上面这个示例的处理程序只有一个——handler。

不同的请求应该由不同的处理程序来处理,对上面的代码稍做修改,只需要给<script>标签的src属性中的URL添加一个参数来指定回调函数的名称就可以了:

服务端:

public void ProcessRequest(HttpContext context)

{

    context.Response.ContentType = "text/plain";

    // 前端指定的回调函数名称

    var callbackFuncName = context.Request.QueryString["callback"];

    var responseData = "Hello World";

    // 回调脚本,形如:handler('responseData');

    var scriptContent = string.Format("{0}('{1}');", callbackFuncName, responseData);

    context.Response.Write(scriptContent);

}

Web客户端:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>jsonp demo</title>

    <script type="text/javascript">

        // 跨域发送HTTP请求,从服务端获取字符串"Hello World"

        function getHello() {

            var script = document.createElement('script');

            script.setAttribute('src', 'http://localhost:8546/Service.ashx?callback=handler');//callback指定回调函数名称

            document.querySelector("head").appendChild(script);

        }

        // 处理函数

        function handler(data) {

            alert(data);

            // our code here...

        }

    </script>

 

</head>

<body>

    <input type="button" value="发送跨域HTTP请求,获取Hello World" onclick="getHello()" />

</body>

</html>

 

使用jQuery的JSONP跨域

jQuery的ajax方法对JSONP式跨域进行了封装,如果使用jQuery进行JSONP原理式的跨域HTTP请求,将会变得非常简单:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>jQuery jsonp demo</title>

    <script src="jquery-1.11.0.min.js"></script>

    <script type="text/javascript">

        $.ajax({

            type: "get",

            async: false,

            url: "http://localhost:8546/Service.ashx",

            dataType: "jsonp",

            success: function (data) {

                alert(data);

            },

            error: function () {

                alert('fail');

            }

        });

    </script>

</head>

<body>

    使用jQuery一切将会变得非常简单。

</body>

</html>

只需要将dataType设置为"jsonp"就可以进行跨域请求了,一切就像发送非跨域请求那样简单。

jQuery为我们封装好了回调函数,一般情况下不需要我们单独去写,如果你不想在success中处理,想单独写处理函数,那么可以通过设置这2个参数来实现:

  • jsonp: "callback",//传递给服务端的回调函数名称参数,如果不设置此项,则默认是"callback"
  • jsonpCallback: "handler",//传递给服务端的回调函数名称,如果不设置此项,则默认是形如"jQuery111007837897759742043_1460657212499"的由jQuery自动生成的函数名称

 

必须要强调的是:

1.JSONP虽然看起来很像一般的ajax请求,但其原理不同,JSONP是对文章第一小节原理的封装,是通过<script>标签的动态加载来实现的跨域请求,而一般的ajax请求是通过XMLHttpRequest对象进行;

2.JSONP不是一种标准协议,其安全性和稳定性都不如 W3C 推荐的 CORS

3.JSONP不支持POST请求,即使把请求类型设置为post,其本质上仍然是一个get请求。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web APi之手动实现JSONP或安装配置Cors跨域(七)
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器、Action方法,以及过滤器、模型绑定等等,想想也是心痛不已,水太深了,摸索原理关键是太枯燥和乏味了,但是呢,从情感上还是挺乐意去摸索原理,而情绪上不太乐意去探究原理,于是乎,本文就由此诞生了,借此文缓解下枯燥的心情和压抑的情绪。
1309 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29215 0
浏览器跨域问题 jsonp
惯例: 我是温浩然: 诚实一点,学得别人的,就是转载的。 网址:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 只有浏览器有跨域的问题,所以说,这篇文章是为了解决浏览器的跨域问题。 跨域传输数据用jsonp格式。至于想知道什么是jsonp,看上面的网址去。大神写的。 根据文章的
1087 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20725 0
+关注
138
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载