四、 跨域AJAX请求
跨域AJAX请求是不可能的,但是的确存在一些方法以利用一种服务器端语言来解决这个问题。在这一节中,我要讨论如何使用PHP来创建AJAX请求和一个远程RSS回馈之间的一个桥接,进而实现成功地跨域请求之目的。我想你很可能会对它如此容易的实现感到惊讶。
PHP中提供了一个称为file_get_contents的本地方法,它能够把整个文件内容读取到一个字符串中。如果启动fopen包装器的话,这个文件可以是一个远程文件;在你安装PHP时默认情况下是启动的。如果在php.ini文件内把allow_url_fopen设置为off它才处于禁止状态。下列代码相应于该bridge.php文件的内容,当提交表单时我们使用index.html发送请求:
<? header("Content-Type: application/xml; charset=UTF-8"); echo file_get_contents($_GET['feed']); ?> |
Aggregator = new Object(); Aggregator.feedCollection = new Array(); Aggregator.Read = function() { if(Ajax.checkReadyState('loading') == "OK") { var title = Ajax.getResponse().getElementsByTagName('title')[0].firstChild.data; var _link = Ajax.getResponse().getElementsByTagName('link')[0].firstChild.data; var items = Ajax.getResponse().getElementsByTagName('item'); var feed = new Feed(Aggregator.feedCollection.length, title, _link, items); Aggregator.feedCollection.push(feed); Aggregator.displayFeedTitles(feed); } } |
Aggregator.displayFeedTitles = function(feed) { document.getElementById('titles').innerHTML += feed.GetTitle(); Aggregator.DisplayTitles(feed.id); } |
Aggregator.DisplayTitles = function(id) { var titleArray = Aggregator.feedCollection[id].GetAllTitles(); var titles = document.createElement("div"); titles.id = "subTitle_"+ id; document.getElementById('title_'+id).appendChild(titles); for(var i=0; i<titleArray.length; i++) { titles.innerHTML += titleArray[i] +"<br />"; } } |
Aggregator.ToggleTitles = function(id) { var titles = document.getElementById('subTitle_'+id); titles.style.display = (titles.style.display == '') ? 'none' : ''; } Aggregator.DisplayFeed = function(feedId, id) { var details = Aggregator.feedCollection[feedId].GetDetails(id); document.getElementById('description').innerHTML = details; } |