JSON z Ajaxem

AJAX to asynchroniczny JavaScript i XML, który jest używany po stronie klienta jako grupa powiązanych ze sobą technik tworzenia aplikacji internetowych w celu tworzenia asynchronicznych aplikacji internetowych. Zgodnie z modelem AJAX aplikacje internetowe mogą wysyłać i pobierać dane z serwera asynchronicznie, bez zakłócania wyświetlania i zachowania istniejącej strony.

Wielu programistów używa formatu JSON do przekazywania aktualizacji AJAX między klientem a serwerem. Strony internetowe aktualizujące wyniki sportowe na żywo można uznać za przykład AJAX. Jeśli te wyniki muszą być aktualizowane na stronie internetowej, muszą być przechowywane na serwerze, aby strona internetowa mogła pobrać wynik, gdy jest to wymagane. W tym miejscu możemy wykorzystać dane w formacie JSON.

Wszelkie dane aktualizowane za pomocą AJAX można przechowywać przy użyciu formatu JSON na serwerze internetowym. AJAX jest używany, aby javascript mógł w razie potrzeby pobrać te pliki JSON, przeanalizować je i wykonać jedną z następujących operacji -

Przechowuj przeanalizowane wartości w zmiennych do dalszego przetwarzania przed wyświetleniem ich na stronie internetowej.
Bezpośrednio przypisuje dane do elementów DOM na stronie internetowej, dzięki czemu są one wyświetlane na stronie.

Przykład

Poniższy kod przedstawia JSON z AJAX. Zapisz to jakoajax.htmplik. Tutaj funkcja ładowania loadJSON () jest używana asynchronicznie do przesyłania danych 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>

Poniżej podano plik wejściowy data.json, mając dane w formacie JSON, które zostaną przesłane asynchronicznie po kliknięciu pliku Update Detailprzycisk. Ten plik jest przechowywany whttp://www.tutorialspoint.com/json/

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

Powyższy kod HTML wygeneruje następujący ekran, na którym możesz sprawdzić AJAX w akcji -

Cricketer Szczegóły

Nazwa	Kraj
Sachin	Indie

Po kliknięciu pliku Update Detailpowinieneś otrzymać następujący wynik. Możesz samodzielnie wypróbować JSON z AJAX , pod warunkiem, że Twoja przeglądarka obsługuje Javascript.

Cricketer Szczegóły

Nazwa	Kraj
Brett	Australia