1

我正在为如何解析来自 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 页面，我尝试了以下方法：

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);
                    }
...
}

这还没有返回任何可见的东西。

[编辑2]

进一步的故障排除显示：

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

印刷undefined

4

3 回答 3

2

您提供的 URL 返回如下内容：

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


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

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

在这些解决方案之间，由您选择您喜欢的解决方案:-)

于 2011-03-19T16:28:36.527 回答
1

另一种选择是根本不使用 JSON，而是使用 XML。省略format=jsonURL 的一部分，您将获得 XML 格式的数据。可以解析此 XML，例如使用DOMParser()您尝试过的方法或使用this.responseXML. 但是，与 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>
于 2011-03-19T16:44:46.163 回答
0

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);
于 2011-03-19T16:37:12.650 回答