解析来自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>