ajaxを使用してファイルからJSONオブジェクトをロードするにはどうすればよいですか？

Question

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

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

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

ブラウザによって異なるのですか？

Answer 1

、すべてが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); 
}); 

Answer 2

以前は、Ajaxはさまざまなブラウザで異なっていました（ただし、残念ながらまだ多くのユーザーが使用している古いブラウザをサポートする必要がある場合は、そのままです）。古いブラウザでは、ブラウザの違いを処理するためにJQuery（またはそれに相当するコード）のようなライブラリが必要です。いずれにしても、初心者の方には、良いドキュメント、簡単なAPI、そしてすぐに始めることをお勧めします。MDNもJavaScript自体に役立ちます（JavaScript/DOM APIについては、 jQueryに依存しています）。あなたが任意のライブラリを必要としない

Answer 3

最も効率的な方法は、プレーン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(); 

Answer 4

私はajax jqueryを使うことを好みます。 Jqueryはライブをもっと簡単にします。例えば、サーバー側で何ができるか

は、私はあなたがPHPを使用していると仮定し、次のとおりです。

$.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 

     });