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

本文链接：https://blog.csdn.net/jallin2001/article/details/5663748

今天上午花了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（主题：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 代码:

jQuery 代码:

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

html页面的js代码如下：

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

服务器端的代码如下：

问题依旧。

我通过使用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中看到了返回的字符串：




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





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



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



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



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



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



希望对大家有帮助。