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 ...
随机推荐
- Node debug
node-inspector & node --debug-brk test.js 在 chrome 中调试 'use strict'; var P2PSpider = require(' ...
- notepad++的CoolFormat代码格式化插件使用
因为notepad++的NppAStyle插件只支持格式化C.C++.C#.Java这四种编程语言的代码,所以本人推荐使用这个CoolFormat的插件,相比于NPPAStyle,CoolFormat ...
- python实践——批量统计mongodb数据库的集合大小
#!/usr/bin/env python import os,sys list = [] for i in range(3,50): l = os.popen("/bin/echo 'sh ...
- MVC后台数据赋值给前端JS对象
Controller中的数据,不管是使用的是ViewModel 还是ViewBag.Data,要将他传递到View中,这个很容易,但是如果要将它传递给JS中的某个对象,这个改如何处理呢? 后台的数据格 ...
- 真正解决问题:maven eclipse tomcat java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
在使用eclipse进行整合springmvc时经常会碰到这样的异常: java.lang.ClassNotFoundException:org.springframework.web.context ...
- 判断当前VC是不是正在展示的活跃页面
viewController.isViewLoaded && viewController.view.window
- 使用JS脚本获取url中的参数
第一种方式:使用分隔符及循环查找function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href. ...
- Linux 安装node.js ---- 源码编译的方式
一 : 普通用户: 安装前准备环境: 1.检查Linux 版本 命令: cat /etc/redhat-release 2.检查 gcc.gcc-c++ 是否安装过 命令: rpm -q gcc rp ...
- PHP数组合并 array_merge 与 + 的差异
在PHP数组合并出过几次问题都没记住,写下来加强一点记忆 PHP数组在合并时,使用 array_merge 与 + 的差异: 1.array_merge(array $array1 [, array ...
- ng-repeat && ng-options的故事
ng-repeat && ng-options的故事 1. <select class="input-small" ng-model="newH ...