20

JSONを使用してデータを転送しています。

スクリプトに1つのJSONオブジェクトのみを含むAjaxでファイルを読み取るには、HTMLページに何が必要ですか？

jQueryも必要ですか、それともそのJSONファイルをAjaxでロードすることは可能ですか？

ブラウザによって違いますか？

4

4 に答える 4

60

ライブラリは必要ありません。JSON ファイルを取得して解析するために、すべてバニラ JavaScript で利用できます。

function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send(); 
}

// this requests the file and executes a callback with the parsed result once
//   it is available
fetchJSONFile('pathToFile.json', function(data){
    // do something with your data
    console.log(data);
});
于 2013-01-17T21:32:44.560 に答える
4

最も効率的な方法は、プレーンな JavaScript を使用することです。

var a = new XMLHttpRequest();
a.open("GET","your_json_file",true);
a.onreadystatechange = function() {
  if( this.readyState == 4) {
    if( this.status == 200) {
      var json = window.JSON ? JSON.parse(this.reponseText) : eval("("+this.responseText+")");
      // do something with json
    }
    else alert("HTTP error "+this.status+" "+this.statusText);
  }
}
a.send();
于 2013-01-17T21:33:01.240 に答える
1

私はajax jqueryを使用することを好みます。Jquery はライブをより簡単にします。

たとえば、サーバー側でできることは、phpを使用していると仮定します。

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
    // if it's an ajax request

    $json['success'] = 1;
    $json['html'] = '<div id="test">..[more html code here].. </div>';
    echo json_encode($json);
}else{
    // if it's an non ajax request


}

クライアント側では、jquery ajax を使用して次のことができます。

    $.ajax({
          type: "POST",
          url: "[your request url here]",
          data: { name: "JOKOOOOW OOWNOOO" },
          complete: function(e, xhr, settings){
              switch(e.status){
                  case 500:
                     alert('500 internal server error!');
                     break;
                  case 404:
                      alert('404 Page not found!');
                     break;
                  case 401:
                      alert('401 unauthorized access');     
                     break;       
              }
          }           
        }).done(function( data ) {
            var obj = jQuery.parseJSON(data)

            if (obj.success == 1){

                  $('div#insert_html_div').html(obj.html);

            }else if (obj.error == 1){


                            }


            // etc

        });
于 2013-01-17T22:51:20.363 に答える
1

これまで、Ajax はブラウザーごとに異なっていました (残念ながら多くのユーザーがまだ使用している古いブラウザーをサポートする必要がある場合は、今でもそうです)。古いブラウザーの場合、ブラウザーの違いを処理するために、JQuery (または独自の同等のコード) などのライブラリーが必要になります。いずれにせよ、初心者には、優れたドキュメント、シンプルな API、すぐに使い始めるために jQuery をお勧めしますが、 MDNは JavaScript 自体にも役立ちます (そして、JavaScript/DOM API をますます理解する必要があります。 jQuery に依存します）。

于 2013-01-17T21:32:37.620 に答える