JQuery中Ajax跨域解决方案 关于ajax跨域操作的jquery, django实践 基于jquery的ajax之跨域解决方案
2008-11-13 16:12
766 查看
由于现在跟其他站点合作，遇到跨域问题，在JQuery中的$.get有一个彩蛋可以使用
服务器A(192.168.0.102)：test.jsp
1
<%
@ page contentType="text/html; charset=GBK" %>
2
<%
request.setCharacterEncoding("GBK");%>
3
var cardNames = new Array('hh', 'unser');
4
var cardMails = new Array('unser@gd165.com', 'gdunser@gmail.com');
服务器B(192.168.0.101)：test.htm
1
<HTML>
2
<HEAD>
3
<script language="JavaScript" src="/common/js/jquery-1.2.1.pack.js"></script>
4
5
</HEAD>
6
<BODY>
7
<SCRIPT>
8
$.get("http://192.168.0.102/test.jsp",
9
{ names: "c" },
10
function(data)
{
11
alert("Data Loaded: " + cardNames);
12
13
for (i=0;i<cardNames.length;i++)
14
{
15
alert(cardNames[i]);
16
}
17
},
18
"script"
19
);
20
</SCRIPT>
21
</BODY>
22
</HTML>
-------------------------------------------------------------------------------------------------------------------------------
ajax应用的越来越广泛。以前我一直使用jquery的.post，和.get来做
ajax操作，很方便。但是.post和.get是不支持跨域操作的，例如:
在a.com通过他们调用b.com，会返回uri denied。今天要实现一个feature
要ajax跨域操作，就研究了一下。
jquery从1.2开始，.getJSON就支持跨域操作了。这个是官方给出的例子。
http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
这里的jsoncallback是一个jsonp的callback。不指定就是用?，jquery会自动
把？替代。这个大家可能还不太理解，一会就明白了。
我用django做web开发的framework。那么提供json数据的view func应该如何写呢？
def api(request, id):
try:
info = Info.objects.get(id=id)
data = {
'name':info.name,
'gendar':info.gendar,
}
except:
status = {}
callback = request.GET['callback']
return HttpResponse('%s(%s)' % (callback,
simplejson.dumps(status)))
这里的callback就是一个jsonp的func名字，通常是jsonp1214803701549这样的串。
HttpResponse的返回值一定是jsonp1214803701549({'name':xxx, 'gendar':xxxx})。
因为这样才能回调到你的客户端的function。这个浪费了我不少时间。
html客户端代码就更简单。
$.getJSON("http://xxx.com?callback=?",
function(data){
alert(data.name);
}
});
到此，ajax的跨域操作就完成了。网上关于这方面的资料不多，而且都不详细。上面是我用firebug跟踪HttpResponse,HttpRequest的参数的总结的。可能有理解不当，或者有更好的方法，欢迎大家一起交流
--------------------------------------------------------------------------------------------------------------------------------------------
基于jquery的ajax之跨域解决方案
今天突然发现原来ajax无法跨域，网上主流的解决方法兜了一圈都十分的无爱，apache rewrite即使我自己的apache能够实现也无法保证以后提供商给你这么好的服务，iframe法：多出来一个这么大个东东总不是滋味。代理：速度受到影响。。。还看到包括modello，squid等办法，个人推荐modello的办法，通过google可以搜到相关教程，使用起来非常方便，经本人测试支持ie6,ie7,firefox，不过有一个缺点就是速度慢了半拍，执行geturl以后要等10s左右才给反映，有可能是提取的页面大了的原因，具体也没有进一步的测试，最后自己决定自己给自己写一个中转页面
例子是一个从九天网播放页动态提取mp3地址进行播放，当按下按钮，通过jquery的ajax传递一个播放页面url地址给后台test.php ，后台返回页面的内容串给js，然后正则加工提取地址交给前台播放器，加工部分当然也可以在后台页交给php完成（当然这不是本文重点）。
-----------------------------------------------------------------------------
点击按钮前
点击按钮后，几乎没有延迟，开始缓冲，（用modello的话，从点击到开始缓冲之间约要等10s）
demo： http://ondineyuga.net63.net/test/test.php（因为用的国外免费空间速度可能比较慢）
-----------------------------------------------------------------------------
代码：
前台页
test.php
demo2.js
后台页
test2.php
服务器A(192.168.0.102)：test.jsp
1
<%
@ page contentType="text/html; charset=GBK" %>
2
<%
request.setCharacterEncoding("GBK");%>
3
var cardNames = new Array('hh', 'unser');
4
var cardMails = new Array('unser@gd165.com', 'gdunser@gmail.com');
服务器B(192.168.0.101)：test.htm
1
<HTML>
2
<HEAD>
3
<script language="JavaScript" src="/common/js/jquery-1.2.1.pack.js"></script>
4
5
</HEAD>
6
<BODY>
7
<SCRIPT>
8
$.get("http://192.168.0.102/test.jsp",
9
{ names: "c" },
10
function(data)
{
11
alert("Data Loaded: " + cardNames);
12
13
for (i=0;i<cardNames.length;i++)
14
{
15
alert(cardNames[i]);
16
}
17
},
18
"script"
19
);
20
</SCRIPT>
21
</BODY>
22
</HTML>
-------------------------------------------------------------------------------------------------------------------------------
ajax应用的越来越广泛。以前我一直使用jquery的.post，和.get来做
ajax操作，很方便。但是.post和.get是不支持跨域操作的，例如:
在a.com通过他们调用b.com，会返回uri denied。今天要实现一个feature
要ajax跨域操作，就研究了一下。
jquery从1.2开始，.getJSON就支持跨域操作了。这个是官方给出的例子。
http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
这里的jsoncallback是一个jsonp的callback。不指定就是用?，jquery会自动
把？替代。这个大家可能还不太理解，一会就明白了。
我用django做web开发的framework。那么提供json数据的view func应该如何写呢？
def api(request, id):
try:
info = Info.objects.get(id=id)
data = {
'name':info.name,
'gendar':info.gendar,
}
except:
status = {}
callback = request.GET['callback']
return HttpResponse('%s(%s)' % (callback,
simplejson.dumps(status)))
这里的callback就是一个jsonp的func名字，通常是jsonp1214803701549这样的串。
HttpResponse的返回值一定是jsonp1214803701549({'name':xxx, 'gendar':xxxx})。
因为这样才能回调到你的客户端的function。这个浪费了我不少时间。
html客户端代码就更简单。
$.getJSON("http://xxx.com?callback=?",
function(data){
alert(data.name);
}
});
到此，ajax的跨域操作就完成了。网上关于这方面的资料不多，而且都不详细。上面是我用firebug跟踪HttpResponse,HttpRequest的参数的总结的。可能有理解不当，或者有更好的方法，欢迎大家一起交流
--------------------------------------------------------------------------------------------------------------------------------------------
基于jquery的ajax之跨域解决方案
今天突然发现原来ajax无法跨域，网上主流的解决方法兜了一圈都十分的无爱，apache rewrite即使我自己的apache能够实现也无法保证以后提供商给你这么好的服务，iframe法：多出来一个这么大个东东总不是滋味。代理：速度受到影响。。。还看到包括modello，squid等办法，个人推荐modello的办法，通过google可以搜到相关教程，使用起来非常方便，经本人测试支持ie6,ie7,firefox，不过有一个缺点就是速度慢了半拍，执行geturl以后要等10s左右才给反映，有可能是提取的页面大了的原因，具体也没有进一步的测试，最后自己决定自己给自己写一个中转页面
例子是一个从九天网播放页动态提取mp3地址进行播放，当按下按钮，通过jquery的ajax传递一个播放页面url地址给后台test.php ，后台返回页面的内容串给js，然后正则加工提取地址交给前台播放器，加工部分当然也可以在后台页交给php完成（当然这不是本文重点）。
-----------------------------------------------------------------------------
点击按钮前
点击按钮后，几乎没有延迟，开始缓冲，（用modello的话，从点击到开始缓冲之间约要等10s）
demo： http://ondineyuga.net63.net/test/test.php（因为用的国外免费空间速度可能比较慢）
-----------------------------------------------------------------------------
代码：
前台页
test.php
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script src="jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript" src="demo2.js"></script> </head> <body> 这里填入播放页面<input id='addr' value="http://i.9sky.com/Show/Play/429978197/483143" /><button id="doit">do it</button> <div id="test"> <EMBED type=application/x-mplayer2 id='mp3player' src="" width=100% height=68 console="video" showstatusbar="1" EnableContextMenu="0" volume="-400" autostart="1" loop="-1"> </EMBED> </div> </body> </html> |
| $(document).ready(function(){ $("#doit").click(function(){ $.ajax({ url: "test2.php?url="+$("#addr").val(), type: 'GET', dataType: 'html', timeout: 30000, error: function(){$("#test").html("页面处理超时");}, success: function(data){ var rr=MatchDemo(data); $("#test").html('<EMBED type=application/x-mplayer2 id="mp3player" src='+rr+' width=100% height=68 console="video" showstatusbar="1" EnableContextMenu="0" volume="-400" autostart="1" loop="-1">'); } }); }); }); function MatchDemo(data) { var r, re; // 声明变量。 re ='http://upload.9sky.com.*?.mp3'; // 创建正则表达式模式。 r = data.match(re); // 尝试匹配搜索字符串。 return(r); } |
test2.php
| <?php echo file_get_contents($_GET["url"]) ; ?> |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 、 Ajax跨域问题 1． 跨域介绍 1.1． 什么是跨域； 跨域解决方案；jQuery解决跨域操作
- JQuery的Ajax跨域请求的解决方案
- 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案
- jQuery的ajax，当async为false时，同步操作失败。解决方案
- JQuery的 Ajax 跨域请求的解决方案
- jQuery的Ajax跨域请求的解决方案
- php+jquery+ajax+json实现跨域调用 php pdo操作oracle数据库
- 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案
- 关于jQuery+ajax 跨域调用问题
- JQuery的Ajax跨域请求的解决方案
- JQuery的Ajax跨域请求的解决方案
- 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
- JQuery的Ajax跨域请求的解决方案
- JQuery的Ajax跨域请求的解决方案
- JQuery的Ajax跨域请求的解决方案
- jQuery.ajax 跨域请求webapi设置headers的解决方案
- JQuery的Ajax跨域请求的解决方案
- 关于jquery+ajax+json+ssh框架整合，数值异步的问题（暂时解决方案--延迟加载（lazy）改为急加载）
- JQuery的Ajax跨域请求的解决方案