JSON avec Ajax

AJAX est JavaScript asynchrone et XML, qui est utilisé côté client comme un groupe de techniques de développement Web interdépendantes, afin de créer des applications Web asynchrones. Selon le modèle AJAX, les applications Web peuvent envoyer et récupérer des données d'un serveur de manière asynchrone sans interférer avec l'affichage et le comportement de la page existante.

De nombreux développeurs utilisent JSON pour transmettre les mises à jour AJAX entre le client et le serveur. Les sites Web mettant à jour les résultats sportifs en direct peuvent être considérés comme un exemple d'AJAX. Si ces scores doivent être mis à jour sur le site Web, ils doivent être stockés sur le serveur afin que la page Web puisse récupérer le score lorsque cela est nécessaire. C'est ici que nous pouvons utiliser des données au format JSON.

Toutes les données mises à jour à l'aide d'AJAX peuvent être stockées au format JSON sur le serveur Web. AJAX est utilisé pour que javascript puisse récupérer ces fichiers JSON si nécessaire, les analyser et effectuer l'une des opérations suivantes -

  • Stockez les valeurs analysées dans les variables pour un traitement ultérieur avant de les afficher sur la page Web.

  • Il attribue directement les données aux éléments DOM de la page Web, afin qu'ils soient affichés sur le site Web.

Exemple

Le code suivant montre JSON avec AJAX. Enregistrez-le sousajax.htmfichier. Ici, la fonction de chargement loadJSON () est utilisée de manière asynchrone pour télécharger des données JSON.

<html>
   <head>
      <meta content = "text/html; charset = ISO-8859-1" http-equiv = "content-type">
		
      <script type = "application/javascript">
         function loadJSON() {
            var data_file = "http://www.tutorialspoint.com/json/data.json";
            var http_request = new XMLHttpRequest();
            try{
               // Opera 8.0+, Firefox, Chrome, Safari
               http_request = new XMLHttpRequest();
            }catch (e) {
               // Internet Explorer Browsers
               try{
                  http_request = new ActiveXObject("Msxml2.XMLHTTP");
					
               }catch (e) {
				
                  try{
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
					
               }
            }
			
            http_request.onreadystatechange = function() {
			
               if (http_request.readyState == 4  ) {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(http_request.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").innerHTML = jsonObj.name;
                  document.getElementById("Country").innerHTML = jsonObj.country;
               }
            }
			
            http_request.open("GET", data_file, true);
            http_request.send();
         }
		
      </script>
	
      <title>tutorialspoint.com JSON</title>
   </head>
	
   <body>
      <h1>Cricketer Details</h1>
		
      <table class = "src">
         <tr><th>Name</th><th>Country</th></tr>
         <tr><td><div id = "Name">Sachin</div></td>
         <td><div id = "Country">India</div></td></tr>
      </table>

      <div class = "central">
         <button type = "button" onclick = "loadJSON()">Update Details </button>
      </div>
		
   </body>
		
</html>

Ci-dessous est le fichier d'entrée data.json, ayant des données au format JSON qui seront téléchargées de manière asynchrone lorsque nous cliquons sur le Update Detailbouton. Ce fichier est conservé danshttp://www.tutorialspoint.com/json/

{"name": "Brett", "country": "Australia"}

Le code HTML ci-dessus générera l'écran suivant, où vous pourrez vérifier AJAX en action -

Détails du joueur de cricket

Nom Pays
Sachin
Inde

Lorsque vous cliquez sur le Update Detailbouton, vous devriez obtenir un résultat comme suit. Vous pouvez essayer vous-même JSON avec AJAX , à condition que votre navigateur prenne en charge Javascript.

Détails du joueur de cricket

Nom Pays
Brett
Australie