JS-JQuery(JSONP)调用WebService跨域若干技术点
1、JSONP:JSON With Padding,让网页从别的网域获取信息,也就是跨域获取信息,可以当做是一种“工具”,大多数架构Jquery、EXTjs等都支持。
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server2.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
2、WebService,这里使用VS2010自带,不使用WCF。
说明:jsoncallback是针对前台网页的函数声明,不要问web服务方法为什么这个样写,目的是为了跨域调用需要;此方法发布到IIS后直接调用是执行不了,会出现【HttpContext.Current.Request.Params["jsoncallback"].ToString()】这句代码出错返回NullReferenceException。
|
[WebMethod] public void GetSingleInfo(string x, string y) { HttpContext.Current.Response.ContentType = "application/json;charset=utf-8"; string jsonCallBackFunName = HttpContext.Current.Request.Params["jsoncallback"].ToString(); //上面代码必须 //中间代码执行自己的业务操作,可返回自己的任意信息(多数据类型) GetAttrData gad = new GetAttrData(); string result = gad.GetSingleInfo(x, y); //下面代码必须 HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, result)); HttpContext.Current.Response.End(); } |
3、WebService的Web.config配置,是服务端,和Web服务一起。
Protocols声明网页Get/Post方式,务必要增加这个节点,在system.web节点内。
|
<system.web> <!-- 。。。其他节点 --> <webServices> <protocols> <add name="HttpPost"/> <add name="HttpGet"/> </protocols> </webServices> </system.web> |
4、客户端网页(aspx,asp,jsp,html)跨域调用——Jquery为例
|
<!—头部引用 --> <script type="text/javascript" src="/js/jquery-1.4.4.js"></script> <!-- 解决jquery和其他引入的JS的$存在冲突,可选 <script type="text/javascript">var JQ=$;</script> --> <!—在功能执行JS调用Web服务的函数内 --> JQ.ajax({ type: "get", url: "http://10.0.0.29/TheDimDataService/GetDataString.asmx/GetSingleInfo?jsoncallback=?", dataType: "jsonp", jsonp: "jsoncallback", data: {x:xv,y:yv}, //传输的数据 success: function (result){}, //得到调用服务结果 error:OnError }); |
参考
[1] JSONP之百度百科
另WCF Ajax、Jquery跨域访问点开见此。
JS-JQuery(JSONP)调用WebService跨域若干技术点的更多相关文章
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
1:跨域请求handler一般处理程序 using System; using System.Collections.Generic; using System.Web; using System.W ...
- ajax调用webservice 跨域问题
用js或者jquery跨域调用接口时 对方的接口需要做jsonp处理,你的ajax jsonp调用才可以 egg 接口中已经做了jsonp处理,所以可以跨域调用 //$.ajax({ // url: ...
- Sliverlight调用WebService跨域问题解决
在SilverlightApplication正常添加webservice(承载网站中建webservice,这样就不存在跨域问题了,即域名一样如:localhost:4676) http://loc ...
- ajax 调用webservice 跨域问题
注意两点 1. 在webservice的config中加入这段位置 (注意不是调用webservice的webconfig中加入) <system.webServer> <! ...
- silverlight调用webservice跨域
下载下面的任何文件放在webservice的根目录下 http://files.cnblogs.com/files/jichunhu/crossdomain.xml http://files.cnbl ...
- JS、JQuery和ExtJs的跨域处理
1.什么是跨域?跨域,JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a. ...
- 利用jquery的ajax实现跨域,内部其实是jsonp协议了,不是XHRhttp协议
一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...
- jsonp与cors跨域的一些理解(转)
CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...
- 通过JSONP实现完美跨域
通过JSONP实现完美跨域 三水清 2010-06-11 20:17:47 以前我经常在博客说JSONP,例如我的WordPress天气插件就是通过JSONP来调用的天气数据,今天就说说通过JSONP ...
随机推荐
- 有关于java反编译工具的使用
有时候想去查看jar包中的class文件中的代码,但是class文件如果没有进行反编译操作的话,代码无法直观的查看.这时候可以使用jadeclipse对class文件进行反编译的操作. 1.首先这里需 ...
- android ListView子布局中按钮响应点击事件
只需要在子布局的根布局中添加以下属性即可: android:descendantFocusability="blocksDescendants"
- python学习笔记4-redis multi watch实现锁库存
python 关于redis的基本操作网上已经很多了,这里主要介绍点个人觉得有意思的内容1.redis的事务操作以及watch 乐观锁:后面描述2.tornado下异步使用redis的方式 ...
- 永久解决火狐浏览器出现的flash版本更新问题
最近使用的火狐浏览器又出问题了,老是出现flash版本太旧,以至于在火狐的版本出现“该版本存在安全隐患,应当更新”的字样.对于火狐浏览器,我很早就开始使用了,flash版本更新的问题,我也有我的一些小 ...
- [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序
本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...
- HDU 1285 确定比赛名次 拓扑排序模板题
http://acm.hdu.edu.cn/showproblem.php?pid=1285 #include <cstdio> #include <cstdlib> #inc ...
- Chain Of Responsibility(职责连)-对象行为型模式
1.意图 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 2.动机 给多个对象处理一个请求的机会,从而 ...
- LeetCode OJ 112. Path Sum
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...
- [转]VS2013自带SQL Server 的启用方法
本文转自:http://www.icharm.me/vs2013%E8%87%AA%E5%B8%A6%E7%9A%84%E6%95%B0%E6%8D%AE%E5%BA%93sql-server-exp ...
- json对象
//数组var arr=[1,2,3,3];//json对象var obj={width:'200px',height:'200px',background:'green'}; alert(obj[' ...