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

もう 1 つの方法は、JSON をまったく使用せず、代わりに XML を使用することです。URLのformat=json一部を省略すると、データが XML として取得されます。この XML は、たとえばDOMParser()試した方法やthis.responseXML. ただし、JS オブジェクトではなく DOM ツリーをブラウズしているため、JSON と比較して XML を使用する場合の「ロジスティクス」は少し複雑です。

アップデート：

AJAX のあいまいな詳細の 1 つを次に示します。ブラウザーによっては、ドメイン間で 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 の優れた点は、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 に答える