java+jQuery解决ajax跨域小demo - 备忘录之胡言乱语 - ITeye技术网站
博客分类：
1、在服务端设置请求头信息
前台JS代码：
$("#but4").click(function(){
var vesion=parseInt($.browser.version);
if($.browser.msie && vesion&=8 && vesion&11){//判断浏览器版本是否为IE
xdr = new XDomainRequest();
xdr.open("POST", "/test1/test1!getAjaxData.action?type=IE");
xdr.send();
xdr.onload=function(){
alert("返回结果:"+xdr.responseText);
url:'/test1/test1!getAjaxData.action',
type:'post',
data:{random:Math.random()},
success:function(data){
alert(data);
后台java代码：
public void getAjaxData() throws IOException{
PrintWriter out = this.getResponse().getWriter();
this.getResponse().setContentType("text/charset=UTF-8");
this.getResponse().addHeader("Access-Control-Allow-Origin","*");//'*'表示允许所有域名访问，可以设置为指定域名访问，多个域名中间用','隔开
//如果IE浏览器则设置头信息如下
if("IE".equals(this.getRequest().getParameter("type"))){
this.getResponse().addHeader("XDomainRequestAllowed","1");
out.print("success");
out.close();
a、在使用此方法时在后端为了安全起见最好设置允许那些域进行跨域访问，如“"，多个域名直接用“,”分开；
b、由于IE8-IE10不支持通过设置Access-Control-Allow-Origin头的方式，所以对于IE需要按照IE提供的方案使用XDomainRequest对象解决，
2、服务端以js代码的方式给前台返回数据
前台JS代码：
$("#but6").click(function(){
$.getScript('/test1/test1!getJavaScriptData.action',function(){
//前台获取后台返回数据
alert(remote.test);
后台java代码：
public void getJavaScriptData() throws IOException{
PrintWriter out = this.getResponse().getWriter();
this.getResponse().setContentType("text/charset=UTF-8");
out.print("var s=23; var a='444'; var f=[2,1];var remote={test:'hello'}; ");//给前台返回js代码
out.close();
浏览 12545
浏览: 209961 次
来自: 北京
学习啦！谢谢
很是不错！
楼主，我安装你的方法，调不通啊。起producer的时候报错j ...
/django_mast ...
文字写的很好，谢谢分享。但是要调通的话 要修改一下posts - 32,&
comments - 99,&
trackbacks - 0
浅析JSONP-解决Ajax跨域访问问题
&&& 很久没有写随笔了，总是感觉没时间，其实时间就是。。。废话少说，前几天，工作上有一新需求，需要前端web页面异步调用后台的Webservice方法返回信息。实现方法有多种，本例采用jQuery+Ajax，完成后，在本地调试了一切ok，但是部署到服务器上以后就出现问题了，后台服务调用没有响应，怎么回事？代码没怎么改动，唯一修改的地方就是jQuery的ajax方法中的url地址。难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为&Same- Origin Policy&（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档或脚本 在同一域名下的内容。不同域名下的脚本不能互相访问，即便是子域也不行。关于同源策略，读者可百度更详细的解释，这里不再赘述。
但是有时候又不可避免地需要进行跨域操作，这时候&同源策略&就是一个限制了，怎么办呢？采用JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并探讨下JSONP跨域的原理。
这里提到了JSONP，那有人就问了，它同JSON有什么区别不同和区别呢，接下我们就来看看，百度百科有以下说明：
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)。
JSONP(JSON with Padding)是的 一种&使用模式&，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于
的网页无法与不是 的服务器沟通，而 HTML 的&script& 元素是一个例外。利用 &script& 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
到这里，应该明白了，JSON是一种轻量级的数据交换格式，像xml一样，是用来描述数据间的。JSONP是一种使用JSON数据的方式，返回的不是JSON对象，是包含JSON对象的javaScript脚本。
那JSONP是如何工作的呢，我们知道，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。若要跨域请求出于安全性考虑是不行的，但是我们发现，Web页面上调用js文件时则不受是否跨域的影响，而且拥有&src&这个属性的标签都拥有跨域的能力，比如&script&、&img&、&iframe&，这时候，聪明的程序猿就想到了变通的方法，如果要进行跨域请求， 通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据，然后包装成script脚本回传，着不就突破同源策略的限制，解决了跨域访问的问题了么。
下面我们就看下怎么实现：
前端代码：
function CallWebServiceByJsonp() {
$("#SubEquipmentDetails").html('');
type: "GET",
cache: false,
url: "http://servername/webservice/webservice.asmx/GetSingleInfo",
data: { strCparent: $("#Equipment_ID").val() },
dataType: "jsonp",
//jsonp: "callback",
jsonpCallback: "OnGetMemberSuccessByjsonp"
function OnGetMemberSuccessByjsonp(data) {
//处理data
alert(data);
后端的WebService代码：
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public void GetSingleInfo(string strCparent)
string ret = string.E
HttpContext.Current.Response.ContentType = "application/charset=utf-8";
string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString();
//string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim();
//上面代码必须
//中间代码执行自己的业务操作，可返回自己的任意信息（多数据类型）
BLL.equipment eq_bll = new BLL.equipment();
List&Model.equipment& equipmentList = new List&Model.equipment&();
equipmentList = eq_bll.GetModelEquimentList(strCparent);
ret = JsonConvert.SerializeObject(equipmentList);
//下面代码必须
HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret));
HttpContext.Current.Response.End();
如上所示，前端的CallWebServiceByJsonp方法采用jQuery的ajax方法调用后端的Web服务GetSingleInfo方法，后台的GetSingleInfo方法，使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的JSON对象，返回给前端一段javascript片段执行。巧妙的解决了跨域访问问题。
JSONP的缺点：
JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。
阅读(...) 评论()1345人阅读
本文通过设置Access-Control-Allow-Origin来实现跨域。
例如：客户端的域名是client.w3cschool.cc,而请求的域名是server.w3cschool.cc。
如果直接使用ajax访问，会有以下错误：
XMLHttpRequest cannot load http://server.w3cschool.cc/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.w3cschool.cc' is therefore not allowed access.
1、允许单个域名访问
指定某域名（http://client.w3cschool.cc）跨域访问，则只需在http://server.w3cschool.cc/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:http://client.w3cschool.cc');
2、允许多个域名访问
指定多个域名（http://client1.w3cschool.cc、http://client2.w3cschool.cc等）跨域访问，则只需在http://server.w3cschool.cc/server.php文件头部添加如下代码:
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
'http://client1.w3cschool.cc',
'http://client2.w3cschool.cc'
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
3、允许所有域名访问
允许所有域名访问则只需在http://server.w3cschool.cc/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:*');
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：892964次
积分：15676
积分：15676
排名：第622名
原创：653篇
评论：181条
文章：18篇
阅读：6835
文章：12篇
阅读：2227
文章：17篇
阅读：36414
阅读：16456
文章：22篇
阅读：27269
阅读：3975
文章：22篇
阅读：37630
文章：62篇
阅读：94981
文章：15篇
阅读：26639
文章：72篇
阅读：133145
文章：147篇
阅读：222408
文章：84篇
阅读：99124
文章：114篇
阅读：110800
(37)(26)(13)(6)(8)(14)(12)(18)(19)(18)(11)(9)(23)(19)(12)(5)(8)(6)(22)(21)(41)(39)(49)(50)(72)(11)(20)(7)(4)(8)(15)(11)(2)(1)(3)(7)(15)Posts - 5,
Articles - 0,
Comments - 54
不對!骷髏代表著信念!怎麼可能是毒藥!对！我是驯鹿!可是...我也是个男子汉啊!
16:52 by 快乐乔巴, ... 阅读,
取不到数据！
　　上周客户新买了服务器，原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net)，在客户的主页中有一个动态显示最新消息的处理，这个处理就是通过ajax异步从那个后台程序中取得的。由于又购买了新的服务器，客户想把web主页和那个后台程序分开来，后台程序被部署到了新的服务器上。不过这个项目是我的同事小福同志开发的，也就由他来把程序分开部署，然后进行一些小改动。
　　"怎么最新消息取不到了，异步处理的url也已经添加上新服务器的地址(/.../news.ashx)，奇怪了..."小福在一边抱怨，我看了看IE7下还出了个脚本错误"アクセスが拒否されました"的错误(环境是日文的，意思是访问被拒绝了)。网上查了下中文环境应该是"没有权限"吧。在Firefox和Chrome上是看不到任何脚本错误的，不过可以通过Firebug工具测出这个错误（"Permission denied to call method XMLHttpRequest.open"）。
&　　为什么会出这样的错误呢？这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释：
　　同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
　　这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？没错，我们现在可以进入正题，来了解下什么是JSONP了。
JSON和JSONP
　　JSONP和JSON好像啊，他们之间有什么联系吗？
　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去上了解下，简单易懂。
　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度
　　JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)， 我们先看下面的小例子然后再详细介绍。
跨域的简单原理
　　光看定义还不是很明白，那首先我们先来手动做个简单易懂的小测试。新建一个asp.net的web程序，添加sample.html网页和一个test.js文件，代码如下：
sample.html的代码：
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&2 &html xmlns="http://www.w3.org/1999/xhtml" &3 &head&4
&title&test&/title&5
&script type="text/javascript" src="test.js"&&/script&6 &/head&7 &body&8 &/body&9 &/html&
test.js的代码：
1 alert("success");
　　打开sample.html后会跳出"success&这样的这样的信息框，这似乎并不能说明什么，&跨域问题到底怎么解决呢？好，现在我们模拟下非同源的环境，刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序)，现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序)，将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。两个程序都运行起来后，Visual Studio会启动内置服务器，假设A程序是localhost:20001,B程序是localhost:20002，这就模拟了一个非同源的环境了(虽然域名相同但端口号不同，所以是非同源的)。
　　OK，我们接下来应该改下sample.html里的代码，因为test.js文件在B程序上了，url也就变成了localhost:20002。
sample.html部分代码：
1 &script type="text/javascript" src="http://localhost:20002/test.js"&&/script&
　　请保持AB两个Web程序的运行状态，当你再次刷新localhost:20001/sample.html的时候，和原来一样跳出了"success"的对话框，是的，成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。
　　&script&标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。
JSONP的实现模式--CallBack
　　刚才的小例子讲解了跨域的原理，我们回上去再看看JSONP的定义说明中讲到了javascript callback的形式。那我们就来修改下代码，如何实现JSONP的javascript callback的形式。
程序A中sample的部分代码：
1 &script type="text/javascript"&2 //回调函数3 function callback(data) {4
alert(data.message);5 }6 &/script&7 &script type="text/javascript" src="http://localhost:20002/test.js"&&/script&
程序B中test.js的代码：
1 //调用callback函数，并以json数据形式作为阐述传递，完成回调2 callback({message:"success"});&
　　这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。
　　将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。
　　一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。
&程序A中sample的部分代码：
1 &script type="text/javascript"& 2
function callback(data) { 3
alert(data.message); 4
//添加&script&标签的方法 6
function addScriptTag(src){ 7
var script = document.createElement('script'); 8
script.setAttribute("type","text/javascript"); 9
script.src =10
document.body.appendChild(script);11
window.onload = function(){14
addScriptTag("http://localhost:20002/test.js");15
}16 &/script&
　　程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。
　　上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：&
　　q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：
1 &script type="text/javascript"& 2
//添加&script&标签的方法 3
function addScriptTag(src){ 4
var script = document.createElement('script'); 5
script.setAttribute("type","text/javascript"); 6
script.src = 7
document.body.appendChild(script); 8
window.onload = function(){11
//搜索apple，将自定义的回调函数名result传入callback参数中12
addScriptTag("/ajax/services/search/web?v=1.0&q=apple&callback=result");13
//自定义的回调函数result16
function result(data) {17
//我们就简单的获取apple搜索结果的第一条记录中url数据18
alert(data.responseData.results[0].unescapedUrl);19
}20 &/script&
像这样的JSONP服务还有很多(以下信息来自)：
Digg API：来自 Digg 的头条新闻：
　　/stories/top?appkey=http%3A%&type=javascript&callback=?
Geonames API：邮编的位置信息：
　　http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
Flickr JSONP API：载入最新猫的图片：
　　/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：
　　/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?
　　接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。
程序B的MyService.ashx代码：
public class MyService : IHttpHandler 2
public void ProcessRequest(HttpContext context) 4
//获取回调函数名 6
string callback = context.Request.QueryString["callback"]; 7
//json数据 8
string json = "{\"name\":\"chopper\",\"sex\":\"man\"}"; 9 10
context.Response.ContentType = "application/json";11
//输出：回调函数名(json数据)12
context.Response.Write(callback + "(" + json + ")");13
public bool IsReusable16
return false;20
程序A的sample代码中的调用：
1 &script type="text/javascript"& 2
function addScriptTag(src){ 3
var script = document.createElement('script'); 4
script.setAttribute("type","text/javascript"); 5
script.src = 6
document.body.appendChild(script); 7
window.onload = function(){10
//调用远程服务11
addScriptTag("http://localhost:20002/MyService.ashx?callback=person");12
//回调函数person15
function person(data) {16
alert(data.name + " is a " + data.sex);17
}18 &/script&　　
&　　这就完成了一个最基本的JSONP服务调用了，是不是很简单，下面我们来了解下JQuery是如何调用JSONP的。
jQuery对JSONP的实现
　　jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：
&script type="text/javascript" src="/jquery-latest.js"&&/script&&script type="text/javascript"&
$.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
alert(data.name + " is a a" + data.sex);
});&/script&
　　结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看，比如jQuery。
　　当然，加入说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现(参数较多，详细可以参考)。先来看看如何实现吧：
&script type="text/javascript" src="/jquery-latest.js"&&/script&&script type="text/javascript"&
url:"http://localhost:20002/MyService.ashx?callback=?",
dataType:"jsonp",
jsonpCallback:"person",
success:function(data){
alert(data.name + " is a a" + data.sex);
});&/script&
　　没错，jsonpCallback就是可以指定我们自己的回调方法名person，远程服务接受callback参数的值就不再是自动生成的回调名，而是person。dataType是指定按照JSOPN方式访问远程服务。
　　利用jQuery可以很方便的实现JSONP来进行跨域访问。先暂时写到这吧。2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2016年1月 Java大版内专家分月排行榜第二2015年12月 Java大版内专家分月排行榜第二2015年8月 Java大版内专家分月排行榜第二2015年3月 Java大版内专家分月排行榜第二2015年1月 Java大版内专家分月排行榜第二2014年12月 Java大版内专家分月排行榜第二2014年11月 Java大版内专家分月排行榜第二2014年6月 Java大版内专家分月排行榜第二2014年4月 Java大版内专家分月排行榜第二2014年1月 Java大版内专家分月排行榜第二2013年11月 Java大版内专家分月排行榜第二
2015年9月 Java大版内专家分月排行榜第三2015年6月 Java大版内专家分月排行榜第三2015年5月 Java大版内专家分月排行榜第三2015年2月 Java大版内专家分月排行榜第三2014年3月 Java大版内专家分月排行榜第三2013年12月 Java大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。