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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
vue路由的配置和页面切换详解
Sep 09 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
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
JS实现滑动插件
2020/01/15 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
老公爱的承诺书
2014/03/31 职场文书
环境保护标语
2014/06/20 职场文书
调研座谈会发言材料
2014/08/23 职场文书
明星邀请函
2015/02/02 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android