JSON con Ajax

AJAX è Asynchronous JavaScript e XML, che viene utilizzato sul lato client come un gruppo di tecniche di sviluppo web correlate, al fine di creare applicazioni web asincrone. Secondo il modello AJAX, le applicazioni web possono inviare e recuperare dati da un server in modo asincrono senza interferire con la visualizzazione e il comportamento della pagina esistente.

Molti sviluppatori utilizzano JSON per passare gli aggiornamenti AJAX tra il client e il server. I siti web che aggiornano i risultati sportivi in diretta possono essere considerati un esempio di AJAX. Se questi punteggi devono essere aggiornati sul sito Web, devono essere memorizzati sul server in modo che la pagina Web possa recuperare il punteggio quando necessario. È qui che possiamo utilizzare i dati formattati JSON.

Tutti i dati aggiornati utilizzando AJAX possono essere archiviati utilizzando il formato JSON sul server web. AJAX viene utilizzato in modo che javascript possa recuperare questi file JSON quando necessario, analizzarli ed eseguire una delle seguenti operazioni:

Memorizza i valori analizzati nelle variabili per un'ulteriore elaborazione prima di visualizzarli sulla pagina web.
Assegna direttamente i dati agli elementi DOM nella pagina web, in modo che vengano visualizzati sul sito web.

Esempio

Il codice seguente mostra JSON con AJAX. Salvalo comeajax.htmfile. Qui la funzione di caricamento loadJSON () viene utilizzata in modo asincrono per caricare i dati 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>

Di seguito è riportato il file di input data.json, con dati in formato JSON che verranno caricati in modo asincrono quando si fa clic su Update Detailpulsante. Questo file viene conservato inhttp://www.tutorialspoint.com/json/

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

Il codice HTML sopra genererà la seguente schermata, dove puoi controllare AJAX in azione -

Dettagli giocatore di cricket

Nome	Nazione
Sachin	India

Quando fai clic sul file Update Detailpulsante, dovresti ottenere un risultato come segue. Puoi provare JSON con AJAX da solo, a condizione che il tuo browser supporti Javascript.

Dettagli giocatore di cricket

Nome	Nazione
Brett	Australia