ajax跨域调用webservice的实现代码


Posted in Javascript onMay 09, 2016

最近ajax访问webservice遇到跨域的问题,网上搜索资料,总结如下(很多都是觉得人家总结不错的复制下来)

<<用JSON来传数据,靠JSONP来跨域>>

先上我的已实现代码:

前端代码:

$.ajax({
 type: "get",
 url: "http://localhost/Service1.asmx/getElevatorStatusJsonData?jsoncallback=?",
 dataType: "jsonp",
 jsonp: "json",
 data: "",
 success: function (result) {
 var data = eval(result);
 for (var i = 0; i < data.length; i++) {
 alert(data[i].ID + "--" + data[i].Name);
 }
 },
 error: function (a, b, c) {
 alert(c);
 }
 });

服务端代码:

/// <summary>
 /// 获取状态数据信息
 /// </summary>
 /// <returns></returns>
 [WebMethod]
 public void getElevatorStatusJsonData()
 {
 List<List<DeviceInfo>> elevatordatas = new List<List<DeviceInfo>>();
 List<SendDicdate> searchList = XmlSerializeHelper.XmlDeserializeFromFile<List<SendDicdate>>(@ConfigUtil.servicePath + ConfigUtil.getConfigByKey("xmlPath") + "查询指令信息.xml", Encoding.UTF8);
 foreach (SendDicdate item in searchList)
 {
 string key = item.portno + "-" + item.bordrate + "-" + item.sendtype;
 List<DeviceInfo> deviceInfoList = (List<DeviceInfo>)Context.Cache.Get(key);
 elevatordatas.Add(deviceInfoList);
 }

 String result = "";
 DataContractJsonSerializer json = new DataContractJsonSerializer(elevatordatas.GetType());
 using (MemoryStream stream = new MemoryStream())
 {
 json.WriteObject(stream, elevatordatas);
 result = Encoding.UTF8.GetString(stream.ToArray());
 }
 String jsoncallback = HttpContext.Current.Request["jsoncallback"];
 result = jsoncallback + '(' + result + ')';
 HttpContext.Current.Response.Write(result);
 HttpContext.Current.Response.End();

 }

c#

 以上是调用c#服务端的实现代码,下面的是java端的,参数可能有差异,但原理是相通的

java:

String callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { \"name\":\"John\"}])");

  PS:客户端的jsonp参数是用来通过url传参,传递jsonpCallback参数的参数名,比较拗口,通俗点讲:

jsonp: ""

jsonpCallback:""

顺带一提:在chrome浏览器里,还可以在服务端设置header信息context.Response.AddHeader("Access-Control-Allow-Origin", "*");来达到跨域请求的目的,并且不需要设置ajax以下参数

dataType : "jsonp",
jsonp: "callbackparam",

jsonpCallback:"jsonpCallback1"

以正常ajax请求方式就可以获得数据。

下面是原理,看别人讲解的,感觉很有道理:

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback 参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数 据了。

聪明的开发者很容易想到,只要服务端提供的js脚本是动态生成的就行了呗,这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script type="text/javascript">// 得到航班信息查询结果后的回调函数var flightHandler =function(data){
 alert('你查询的航班结果是:piao价 '+ data.price +' 元,'+'余piao '+ data.tickets +' 张。');
 }; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)var url ="http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签,设置其属性var script = document.createElement('script');
 script.setAttribute('src', url); 
 // 把script标签加入head,此时调用开始 
//document.getElementsByTagName('head')[0].appendChild(script); 
</script></head><body></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title><script type="text/javascript" src=jquery.min.js"></script><script type="text/javascript">
 jQuery(document).ready(function(){
 $.ajax({
 type: "get",
 async: false,
 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
 dataType: "jsonp",
 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){
 alert('您查询到航班信息:piao价: '+ json.price +' 元,余piao: '+ json.tickets +' 张。');
 },
 error: function(){
 alert('fail');
 }
 });
 }); </script></head><body></body></html>

是不是有点奇怪?为什么我这次没有写flightHandler这个函数呢?而且竟然也运行成功了!哈哈,这就是jQuery的功劳了,jquery在处理jsonp类型的ajax时(还是忍不住吐槽,虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用,是不是很爽呀?

Javascript 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
Javascript动画效果(3)
Oct 11 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
vue实现拖拽效果
Dec 23 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 #Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 #Javascript
jQuery实现三级菜单的代码
May 09 #Javascript
Boostrap入门准备之border box
May 09 #Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 #Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 #Javascript
jQuery绑定事件的几种实现方式
May 09 #Javascript
You might like
php输出文字乱码的解决方法
2019/10/04 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python实现定制交互式命令行的方法
2014/07/03 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
幼儿发展评估方案
2014/06/11 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
刘胡兰观后感
2015/06/16 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书