前端使用Jquery的getJSON方法，后台使用PHP，解决IE和火狐Firefox中存在的跨域ajax请求问题。

今天上午花了2个小时研究解决了一个问题，就是使用Jquery，在发送跨域ajax请求的情况下，IE和火狐下面的表现是不一样的。

昨天在本地编写代码，非常方便的使用Jquery的$.post()，发送请求到远程的服务器，在360浏览器中，返回的结果是正确的。

在IE中，会有提示访问远程地址，面临完全问题。在火狐中，则完全没有数据。

原来的代码如下：

<mce:script type="text/javascript" src="../lib/jquery-1.4.2.min.js" mce_src="lib/jquery-1.4.2.min.js"></mce:script>
<script type="text/javascript">
$(document).ready(function(){
$.post("http://vis/topwin/test.php",{modifiedDate:"yes"},
function(data){
alert("Data load:"+data);
$("#modifiedTime").html(data);
}
);
});

简单的测试代码，但是在IE中的结果：



然后提示正确结果：



在360浏览器中没有最上面的警告框，显示正确，而在firefox中，提示的结果为空：结果如下：



我在其他很多网站查找了一些相关的消息，总是有些觉得不明确：

比如在Javaeye中，有篇是比较简单的介绍了一下，可是我比较怀疑它是否能正确显示：

<a>http://www.javaeye.com/topic/169765
</a>(主题：Jsonp 方式跨域获取 json 数据原理
)

他是这样描述的：

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback
函数里.（动态执行回调函数）

我实在也没有完全读懂这段话。不通俗。

还有另一位同行：
http://www.javaeye.com/topic/260647（ href="topic/260647" target=_blank>主题：Jquery的跨域调用
），采用的jsp方法写的，我想应该也可以返回。

String jsoncallback=request.getParameter("jsoncallback");

...

out.print(jsoncallback+"({/"account/":/"XX/",/"passed/":/"true/",/"error/":/"null/"})");

Jquery取得的数据可能如下：

JQUET0988788({"account":"XX","passed":"true","error":"null"})

总结，用JSONP要做两件事：

1/请求地址加参数：jsoncallback=?

2/服务器段把jsoncallback的值作为方法名传回来，如JQUET098788(...)

我按照他的思路，也没有搞定，很郁闷，我就觉得很奇怪了，在JQUERY手册中，有个现实的例子，

HTML 代码:

<div id="images"></div>
jQuery 代码:

$.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;
});
});

我测试过了，在不同的浏览器中完全能得到图片。于是我决定使用getJSON()的方法进行跨域请求。

html页面的js代码如下：

$.getJSON("http://vis/topwin/getDate.php?jsoncallback=?",
function(data){
alert("Data load:"+data.modify);
$("#modifiedTime").html(data.modify);
}
);

结果是所有的浏览器都没有数据了。我想一定是我的服务器端代码的什么地方出现了错误。

服务器端的代码如下：

if(isset($_GET['jsoncallback'])){
$timeFile = "/select/scbx.txt";	//服务器上面的一个可读写文本
if(file_exists($timeFile)){
$modifiedTime = date("Y-m-d",filemtime($timeFile));
}else{
$modifiedTime = date('Y-m-d');
}

$result = "(".json_encode(array("modify"=>$modifiedTime)).")";
echo $result;
}

问题依旧。

我通过使用Firebug进行了详细的调试，我在我的浏览器中输入：
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json

jsonFlickrFeed({

"title": "Recent Uploads tagged cat",

"link": "http://www.flickr.com/photos/tags/cat/",

"description": "",

"modified": "2010-06-11T02:37:21Z",

"generator": "http://www.flickr.com/",

"items": [

{

"title": "",

"link": "http://www.flickr.com/photos/nijntje/4689263097/",

"media": {"m":"http://farm5.static.flickr.com/4022/4689263097_83d02815a9_m.jpg"},

"date_taken": "2010-06-11T11:37:21-08:00",

"description": " <p><a href=/"http://www.flickr.com/people/nijntje//">nijntjee<//a> posted a photo:<//p> <p><a href=/"http://www.flickr.com/photos/nijntje/4689263097//" title=/"/"><img src=/"http://farm5.static.flickr.com/4022/4689263097_83d02815a9_m.jpg/" width=/"240/" height=/"161/" alt=/"/" /><//a><//p> ",

"published": "2010-06-11T02:37:21Z",

"author": "nobody@flickr.com (nijntjee)",

"author_id": "22628426@N06",

"tags": "film cat 35mm pentax takumar spotmatic sp2 kodakgold"

}

]

});

返回了上面的一段代码，可惜我没法找到对应的服务器端代码。只能猜测。

结合firebug提示的错误，猜测我返回的json数据格式不合法。

最后在准备放弃的时候，在

http://www.butlife.com/index.php/archives/634

找到了一篇文档，



$callback
=
$_GET
[
'callback'
]
;

$t
=
$_GET
[
't'
]
;

echo
$callback
.
"({webname:'$t
'})"
;
//注意这里

从上面的一句，可以看出，它需要把请求的callback回传回去。

莫非我传过来的jsoncallback=?这里的?有值？我立刻修改了服务器端的代码：

	  if(isset($_GET['jsoncallback'])){
$timeFile = "/usr/local/apache2/htdocs/vis/data/research/data/select/scbx.txt";
if(file_exists($timeFile)){
$modifiedTime = date("Y-m-d",filemtime($timeFile));
}else{
$modifiedTime = date('Y-m-d');
}
$k = $_GET['jsoncallback'];
echo $k."({modify:".json_encode($modifiedTime)."})";exit;
// $result = "(".json_encode(array("modify"=>$modifiedTime)).")";
}


果然在火狐的firebug中看到了返回的字符串：

[code]jsonp1276229008805({modify:"2010-05-21"})

证明?的确是有值的。因为我没有把请求的参数回传给客户端，所以它始终无法进行正确的解析。注意返回的一定要是jsonp的格式：

$result = $callback."({
modify:".json_encode($modifiedTime)."})
";

传递的字符串的值，需要进行json转化，否则传回的值是通过json解码后的值。

比如：2010-05-21，没有进行json编码，就回传回去，总是提示1984，我总觉非常莫名其妙，莫非程序能识别我出生于1984年？

未免太巧了。最后一想，可能是没有json编码的原因，呵呵，。

希望对大家有帮助。

[/code]