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

最新推荐文章于 2025-04-11 09:53:42 发布

cngkqy

最新推荐文章于 2025-04-11 09:53:42 发布

阅读量9.4k

点赞数

分类专栏： Ajax 文章标签： jquery ajax django function callback jsonp

Ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用jQuery的$.getJSON实现跨域请求，并提供了一个具体的示例，展示了前后端代码及实现流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于现在跟其他站点合作，遇到跨域问题，在JQuery中的$.get有一个彩蛋可以使用
服务器A(192.168.0.102)：test.jsp

<% @ 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

< HTML >
2

< HEAD >
3

< script language ="JavaScript" src ="/common/js/jquery-1.2.1.pack.js" ></ script >
4

</ 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

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>

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('<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"]) ;