JS-JQuery(JSONP)调用WebService跨域若干技术点

1、JSONP:JSON With
Padding,让网页从别的网域获取信息,也就是跨域获取信息,可以当做是一种“工具”,大多数架构Jquery、EXTjs等都支持。

  由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.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跨域若干技术点,布布扣,bubuko.com

时间: 2024-10-07 06:28:48

JS-JQuery(JSONP)调用WebService跨域若干技术点的相关文章

利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据

1:跨域请求handler一般处理程序 using System; using System.Collections.Generic; using System.Web; using System.Web.Services; namespace CrossDomain { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.

jQuery中利用JSONP解决AJAX跨域问题

写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http:/

jquery Ajax 通过jsonp的方式跨域提交表单

Jquery Ajax可以通过jsonp的方式跨域提交表单,至于什么是跨域提交简单说就是你的客户端和服务端不在同一个域名下或端口号不同也可以叫做跨域. 前台代码: $.ajax({ type : 'get', async: false, url : '${pageContext.request.contextPath}/clue/uploadForm', dataType : 'jsonp', data: { mydata : JSON.stringify(obj,fm), formId : f

使用jsonp实现ajax跨域请求

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料并不是 JSON,

js利用form+iframe解决跨域post和get提交

JS跨域提交               ajax可以让我们对页面进行无刷新的操作,给我们前端和后台数据交互带来更多的体验,这里就不多说了,但ajax也有局限性,由于浏览器有安全机制,不 允许我们访问不同域的数据,也就是我们常说的"同源策略",大家可以去了解一下.但我们有时候又有这样的需求,下面我们浅谈一下,解决这种问题的办法. 1.jsonp格式 优点:跨域提交 缺点: 只能进行get方式访问 2.js+form+iframe+php 优点:跨域提交get和post的方式访问都是可以

关于JavaScript 访问基于SOAP的WebService跨域问题

关于JavaScript 访问基于SOAP的WebService跨域问题 最近,搭建好了一个基于SOAP的WebService服务器.结果,使用JavaScript访问WebService遇到了跨域的问题! 首先,声明代码中的WebService不是本人搭建,由于本人的服务器地址不方便公开. 这个是测试HTML <html> <meta charset="utf-8" /> <head> <title>通过ajax调用WebService

jsonp与cors跨域的一些理解(转)

CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的.CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求. 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全. 而W3C的官方文档目前还是工作草案,但是正在朝着W3C推荐的方向前进. 简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. 浏览器的同源策

js中ajax如何解决跨域请求

js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作. 跨域指的协议.域名.端口 有一个不同的情况下都是跨域 例:在本站点请求外站的数据是不允许的 //在本站点请求外站点的资源是不允许的 $(function () { $.ajax({ url: "http://127.0.0.1:14847/Web/jsonp.js", success

jsonp与cors跨域的一些理解

浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个网站的相关信息,很明显这是不安全的,所以同源策略避免了很多这样的问题. 但是同时也带来了一些问题,比如有时候你想通过自己的网站去获取另一个自己的网站的一些资料信息,但是由于两者域名不同,所以就被同源策略隔离了,那么这个时候就需要了解一下浏览器的跨域问题. 跨域常见的两种方式,分别是jsonp和新推出