Comment puis-je charger un objet JSON à partir d'un fichier avec ajax?

J'utilise JSON pour transférer des données.

De quoi ai-je besoin dans ma page HTML pour lire un fichier avec Ajax qui ne comprend qu'un objet JSON dans mon script?

Ai-je besoin de jQuery aussi, ou est-il possible de charger ce fichier JSON avec Ajax?

Est-ce différent sur les différents navigateurs?

Vous n'avez besoin d'aucune bibliothèque, tout est disponible dans vanilla javascript pour récupérer un fichier json et l'analyser:

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

Le moyen le plus efficace est d'utiliser JavaScript simple:

 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(); 

Dans le passé, Ajax était différent dans différents navigateurs (et est encore si vous devez supporter d'anciens navigateurs dont un bon nombre d'utilisateurs sont malheureusement encore utilisés). Pour les navigateurs plus anciens, vous devriez avoir besoin d'une bibliothèque comme JQuery (ou votre propre code équivalent) pour gérer les différences de navigateur. En tout cas, pour un débutant, je pourrais recommander jQuery pour de bons docs, une API simple et commencer rapidement, bien que MDN soit utile pour JavaScript lui-même (et vous devriez de plus en plus comprendre les API JavaScript / DOM, même si vous êtes principalement Compter sur jQuery).

Je préfère utiliser ajax jquery. Jquery rend la vie beaucoup plus facile.

Ce que vous pouvez, par exemple, faire sur le côté serveur, je suppose que vous utilisez 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 } 

Du côté client, vous pouvez faire ce qui suit en utilisant 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 });