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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
npm ci命令的基本使用方法
Sep 20 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
python中文乱码的解决方法
2013/11/04 Python
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
详解K-means算法在Python中的实现
2017/12/05 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python中元组的用法整理
2020/06/15 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
老师自我鉴定范文
2013/12/25 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
三年级学生评语大全
2014/12/26 职场文书
乱世佳人观后感
2015/06/08 职场文书
英语教学课后反思
2016/02/15 职场文书