Jak załadować obiekt JSON z pliku za pomocą ajax?

Question

Używam JSON do przesyłania danych.

Co jest potrzebne na mojej stronie HTML do odczytania pliku z Ajaxem, który zawiera tylko jeden obiekt JSON w moim skrypcie?

Czy potrzebuję również jQuery, czy jest możliwe załadowanie tego pliku JSON z Ajaxem?

Czy różni się w różnych przeglądarkach?

Answer 1

Nie trzeba żadnej biblioteki, wszystko jest dostępne w wanilii JavaScript, żeby pobrać plik json i przetwarza go:

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

W przeszłości Ajax wyglądał inaczej w różnych przeglądarkach (i nadal jest, jeśli trzeba obsługiwać starsze przeglądarki, których niestety wciąż używa duża liczba użytkowników). W starszych przeglądarkach potrzebna jest biblioteka taka jak JQuery (lub twój własny kod równoważny) do obsługi różnic w przeglądarce. W każdym razie dla początkujących mogę polecić jQuery dla dobrych dokumentów, prostego interfejsu API i szybkiego rozpoczęcia pracy, choć jest to również przydatne dla samego JavaScriptu (i naprawdę powinniście lepiej zrozumieć API JavaScript/DOM, nawet jeśli przede wszystkim polegać na jQuery).

Answer 3

Najskuteczniejszym sposobem jest użycie zwykłego 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

Wolę używać jquery ajax. Jquery sprawia, że ​​życie jest o wiele łatwiejsze.

Co można zrobić na przykład na serwerze strona jest taka, że ​​zakładamy, że używasz 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 


} 

po stronie klienta można wykonać następujące czynności przy użyciu 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 

     });