JSONP跨域GET请求解决Ajax跨域访问问题


Posted in Javascript onDecember 31, 2014

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息。实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址。难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档或脚本 在同一域名下的内容。不同域名下的脚本不能互相访问,即便是子域也不行。关于同源策略,读者可百度更详细的解释,这里不再赘述。

但是有时候又不可避免地需要进行跨域操作,这时候“同源策略”就是一个限制了,怎么办呢?采用JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并探讨下JSONP跨域的原理。

这里提到了JSONP,那有人就问了,它同JSON有什么区别不同和区别呢,接下我们就来看看,百度百科有以下说明:

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成(网络传输速度快)。

JSONP(JSON with Padding)是JSON的 一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

到这里,应该明白了,JSON是一种轻量级的数据交换格式,像xml一样,是用来描述数据间的。JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。

那JSONP是如何工作的呢,我们知道,由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。若要跨域请求出于安全性考虑是不行的,但是我们发现,Web页面上调用js文件时则不受是否跨域的影响,而且拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>,这时候,聪明的程序猿就想到了变通的方法,如果要进行跨域请求, 通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据,然后包装成script脚本回传,着不就突破同源策略的限制,解决了跨域访问的问题了么。

下面我们就看下怎么实现:

前端代码:

function CallWebServiceByJsonp() {

        $("#SubEquipmentDetails").html('');

        $.ajax({

            type: "GET",

            cache: false,

            url: "http://servername/webservice/webservice.asmx/GetSingleInfo",

            data: { strCparent: $("#Equipment_ID").val() },

            dataType: "jsonp",

            //jsonp: "callback",

            jsonpCallback: "OnGetMemberSuccessByjsonp"

        });

}

function OnGetMemberSuccessByjsonp(data) {

    //处理data

    alert(data);

}

后端的WebService代码:

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]

public void GetSingleInfo(string strCparent)

{

    string ret = string.Empty;

    HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";

    string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString();

    //string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim();

    //上面代码必须

    //中间代码执行自己的业务操作,可返回自己的任意信息(多数据类型)

    BLL.equipment eq_bll = new BLL.equipment();

    List<Model.equipment> equipmentList = new List<Model.equipment>();

    equipmentList = eq_bll.GetModelEquimentList(strCparent);

    ret = JsonConvert.SerializeObject(equipmentList);

    //下面代码必须

    HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret));

    HttpContext.Current.Response.End();

}

如上所示,前端的CallWebServiceByJsonp方法采用jQuery的ajax方法调用后端的Web服务GetSingleInfo方法,后台的GetSingleInfo方法,使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的JSON对象,返回给前端一段javascript片段执行。巧妙的解决了跨域访问问题。

JSONP的缺点:

JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。

小伙伴们是否对JSONP跨域GET请求解决Ajax跨域访问问题有所了解了呢,本文的思路还是非常不错的,推荐给大家。

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js命名空间写法示例
Dec 18 Javascript
原生js编写焦点图效果
Dec 08 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
JavaScript中的异常捕捉介绍
Dec 31 #Javascript
JavaScript中对象介绍
Dec 31 #Javascript
JavaScript中用字面量创建对象介绍
Dec 31 #Javascript
javascript设计模式之中介者模式Mediator
Dec 30 #Javascript
javascript实现window.print()去除页眉页脚
Dec 30 #Javascript
Javascript访问器属性实例分析
Dec 30 #Javascript
Javascript中数组sort和reverse用法分析
Dec 30 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python的subprocess模块总结
2014/11/07 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python paramiko模块学习分享
2017/08/23 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
python基于递归解决背包问题详解
2019/07/03 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
银行奉献演讲稿
2014/09/16 职场文书
学习退步检讨书
2014/09/28 职场文书
个人党性锻炼总结
2015/03/05 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
简单的辞职信模板
2015/05/12 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
SpringBoot Http远程调用的方法
2022/08/14 Java/Android