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

您提供的网址会返回以下内容：

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

所以，基本上，它看起来像Javascript代码，其中：

调用jsonFlickrApi函数
将一个大的JSON对象作为参数传递给它。

首先，在这里，您正在使用JSON，因此您不应该使用任何与DOM相关的东西：DOM函数的目标是帮助操作XML。

相反，你应该：

写一个jsonFlickrApi函数，
确保从Flickr

关于这一点，你可以在这里找到更多的信息，例如：http://www.flickr.com/services/api/response.json.html

另外，在请求的URL末尾添加&nojsoncallback=1参数，您将得到纯JSON作为结果（而不是函数调用）。

这将允许您使用标准的JSON操作函数来处理该数据，而不必实现任何特定的功能。

在这些解决方案之间，由您决定选择哪一个： - ）

Answer 2

另一种选择是根本不使用JSON，而是使用XML。省略URL的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>

Answer 3

关于JSON的一个很酷的事情是它实际上是可执行代码。您不需要进行任何“手动”解析 - 只需运行代码即可。也许Flickr提供了一个名为jsonFlickrApi的函数及其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);

解析XMLHttpRequest的响应

3 个答案: