当前位置:首页 > php > 正文

解决IE和火狐Firefox中存在的跨域ajax请求问题,页面无刷新的文件提交

常用场景:

一个页面需要提交各种文字数据,还包括图片或者文档数据,如何实现页面无刷新的提交;

很久以前我的一篇博文是这样处理的:

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

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

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

原来的代码如下:

简单的测试代码,但是在IE中的结果:

然后提示正确结果:

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

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

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

http://www.javaeye.com/topic/169765(主题: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进行了详细的调试,我在我的浏览器中输入:

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

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

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

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

找到了一篇文档,

$callback = $_GET[‘callback’];

$t = $_GET[‘t’];

echo $callback . “({webname:’$t’})”;
//注意这里

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

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

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

jsonp1276229008805({modify:”2010-05-21″})

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

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

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

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

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

而现在我会这样处理,其实非常简单:

例如:

服务器端输出:

暂无评论

发表评论