JQuery中Ajax跨域解决方案 关于ajax跨域操作的jquery, django实践 基于jquery的ajax之跨域解决方案

 

由于现在跟其他站点合作，遇到跨域问题，在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('[email protected]', '[email protected]');

服务器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){
　　 $("").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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     这里填入播放页面http://i.9sky.com/Show/Play/429978197/483143" />do it

demo2.js

$(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('');          }        });           }); });  function MatchDemo(data) {   var r, re; // 声明变量。   re ='http://upload.9sky.com.*?.mp3'; // 创建正则表达式模式。   r = data.match(re); // 尝试匹配搜索字符串。   return(r);   }

 

后台页

test2.php

echo file_get_contents($_GET["url"]) ; ?>