ajax跨域调用webservice的实现代码_javascript技巧

小辰同学_4543

小辰同学_4543

2016-05-16

4144人浏览

原创

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

  >

  先上我的已实现代码:

  前端代码:

$.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 

  服务端代码:

 /// <summary>
 /// 获取状态数据信息
 /// </summary>
 /// <returns></returns>
 [WebMethod]
 public void getElevatorStatusJsonData()
 {
 List<list>> elevatordatas = new List<list>>();
 List<senddicdate> searchList = XmlSerializeHelper.XmlDeserializeFromFile<list>>(@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();

 }
</deviceinfo></deviceinfo></list></senddicdate></list></list>

  c#

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

  java:

  

AJAX技术—无刷新获取数据相关课件
AJAX技术—无刷新获取数据相关课件

AJAX技术—无刷新获取数据相关课件

下载
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脚本并响应了。

<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><title>Untitled Page</title><script type="text/javascript" src="jquery.min.js%22"></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>

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

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

ajax

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

60

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

20

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

20

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

20

12

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

2026.09.22

20

13

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

2026.09.22

20

19

loomy官网入口地址合集
loomy官网入口地址合集

本专题汇总了 Loomy 桌面 AI 助理的官方入口地址合集及使用指南。提供 macOS 与 Windows 客户端下载 。Loomy 是讯飞推出的桌面级 AI 工作搭子,支持文件整理、数据分析、网页操作及通过飞书/钉钉远程操控电脑,助你高效完成本地办公任务 。

2026.09.22

20

19

NumPy常见函数使用方法
NumPy常见函数使用方法

本专题整理 NumPy 常见函数使用方法相关教程,覆盖函数大全、参数用法、数组运算、统计聚合、排序处理、where 条件筛选、linspace 创建数列等常用场景,帮助读者快速掌握 NumPy 函数调用思路和实际数据处理技巧。

2026.09.22

40

21

NumPy性能优化版本更新与常见报错排查
NumPy性能优化版本更新与常见报错排查

本专题整理 NumPy 性能优化、版本更新与常见报错排查相关教程,覆盖向量化计算、广播性能、内存布局、NumPy 2.0 升级、版本兼容冲突、安装导入报错、dtype 溢出、矩阵运算异常和 broadcasting 报错修复,帮助读者系统掌握 NumPy 性能调优与问题定位方法。

2026.09.22

60

25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery官方API文档
jQuery官方API文档

共0课时 | 0人学习

Symfony教程(入门篇+基础篇)
Symfony教程(入门篇+基础篇)

共18课时 | 1.8万人学习