昨天在项目中需要做远程数据加载并渲染页面,本地测试,远程访问,怎么都没有数据,FF的Response永远为空,一直很是懊恼,于是放下一切,上网找资料查文档,Jquery的文档被我看穿了有木有?应该有吧。直到晚上一点才隐约意识到ajax跨域请求的问题,查看Jquery文档,里面赫然提到ajax跨域请求的解决方式,jsonp一下子出现在我眼前,于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。
API原文(摘):如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。
客户端一个小示例:
<script type="text/javascript"> $.ajax({ type : "get", async:false, url : "http://chinese.tradingfloor.com/index.php/cycling/", dataType : "jsonp", jsonp: "callback_param",//服务端用于接收callback调用的function名的参数 jsonpCallback:"callback_handler",//callback的function名称 success : function(data){ var str = ''; $.each(data, function(key, val) { var race_date= val['race_date'] == null?'':val['race_date']; var road = val['road'] == null?'休息日':val['road']; var dis = val['distination']== null?'':val['distination']+'km'; var name = val['champion_name'] == null ? '':val['champion_name']; if(val!=null){ str += "<tr><td>"+race_date+ "</td><td>"+road+ "</td><td>"+dis+ "</td><td>"+name+ "</td></tr>"; } }); races.append(str); }, error:function(readyState,statusText,throwable){ alert(readyState); alert(statusText); alert(throwable); } }); </script>