解析來自XMLHttpRequest的響應

Question

我正在努力解析來自XMLHttpRequest的響應。響應是JSON格式：

http://flickr.com/services/rest/?method=flickr.photos.search&api_key=75564008a468bf8a284dc94bbd176dd8&tags=paris&format=json 

，以確保它確實進來這樣我測試了它：

document.getElementById('info').innerHTML = this.responseText 

返回我一個頁面，寫JSON格式數據的長線。可能有人幫我找出爲了從即所有的標題

的列表響應中提取數據的下一步驟，我做了一些研究和碰到這個傳來：

response = this.responseText ; 
var doc = new DOMParser().parseFromString(response, "text/xml"); 

我需要什麼，下一步該怎麼做？ （注：我希望這樣做手工即不jQuery的或類似工具的幫助下）

基於以下部分以及Flickr page on that matter的建議[編輯]

，我已經試過如下：

request.onreadystatechange = function() 
{ 
... 
      if (this.responseXML != null) 
      { 
       jsonFlickrApi(this.responseText) ; 

       function jsonFlickrApi(rsp){ 

        for (var i=0; i<rsp.photos.photo.length; i++){ 

         var blog = rsp.photos.photo[i]; 

         var div = document.createElement('div'); 
         var txt = document.createTextNode(photo.owner); 

         div.appendChild(txt); 
         //document.body.appendChild(div); 
         document.getElementById('info').innerHTML.appendChild(div); 
        } 
... 
} 

這不會返回任何可見的東西。

[EDIT2]

進一步的故障診斷顯示：

rsp = this.responseText ; 
document.getElementById('info').innerHTML = rsp.stat ; 

打印undefined

Answer 1

約JSON很酷的事情是，它實際上是可執行代碼。你不需要做任何「手動」解析 - 只需運行代碼即可。也許Flickr提供了一個叫做jsonFlickrApi的函數，它們提供了API庫供他們使用，但你也可以提供自己的API庫。

function parseFlickrJson(jsonstring){ 
    var data=null; 

    var jsonFlickrApi=function(d){ 
     data = d; 
    } 

    eval(jsonstring); 

    return data; 
} 

myreturndata = parseFlickrJson(response); 

// Try getting something from the object 
alert(myreturndata.photos.pages); 

Answer 2

你給的回報somethins這樣的網址：

jsonFlickrApi({"photos":{"page":1, "p ... , "stat":"ok"}) 

所以，基本上，它l ooks像Javascript代碼，其中：

• 調用jsonFlickrApi功能，
• 傳遞一個大的JSON對象作爲參數。

首先，在這裏，您正在使用JSON工作，所以你不應該使用任何DOM相關的東西：DOM功能的目標是幫助操作XML。

相反，你應該：

• 寫jsonFlickrApi功能，
• 確保當您從Flickr的接收數據

關於這一點，你shuld找了一下，它被稱爲更多信息和示例，在這裏：http://www.flickr.com/services/api/response.json.html

否則，在請求的URL末尾添加&nojsoncallback=1參數，您將得到純粹的JSON結果（而不是函數調用）。

這將允許您使用標準的JSON操作函數來處理該數據，而不必實現任何特定的功能。

這些解決方案之間，由你來選擇，你更喜歡哪一個:-)

Answer 3

另一種方法是不使用JSON，而是使用XML代替。將網址的format=json部分留出，並以XML形式獲取數據。例如，您可以使用您嘗試的DOMParser()方法或使用this.responseXML來解析此XML。然而，與JSON相比，使用XML的「後勤」稍微複雜一些，因爲您瀏覽DOM樹而不是JS對象。

更新：

所以這裏有AJAX的陰暗細節之一。根據瀏覽器的不同，您不能僅在域之間進行XML請求。以下代碼將在Safari上運行（返回一些有用的內容），但不適用於Firefox或Chrome。 （在那裏，它將返回null或空字符串。）但是，沒有在所有瀏覽器上，JSON請求似乎都能正常工作。

<script> 
function createXHR(){ 
    if (window.XMLHttpRequest){ 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    return new XMLHttpRequest(); 
    } 
    if (window.ActiveXObject){ 
    // code for IE6, IE5 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    return null; 
} 

function getFlickr(){ 
    xmlhttp=createXHR(); 

    url="http://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=75564008a468bf8a284dc94bbd176dd8&tags=paris&"; 
    xmlhttp.onreadystatechange=stateChanged; 
    xmlhttp.open("GET",url,true); 
    xmlhttp.send(null); 
} 

function stateChanged(){ 
    if (xmlhttp.readyState==4){ 
    alert(xmlhttp.getAllResponseHeaders()); 
    alert(xmlhttp.responseXML) 
    alert(xmlhttp.responseText) 
    var xmlDoc=xmlhttp.responseXML.documentElement; 

    } 
} 

getFlickr(); 
</script>