JSON dengan Ajax

AJAX adalah Asynchronous JavaScript dan XML, yang digunakan di sisi klien sebagai sekumpulan teknik pengembangan web yang saling terkait, untuk membuat aplikasi web asinkron. Menurut model AJAX, aplikasi web dapat mengirim dan mengambil data dari server secara asinkron tanpa mengganggu tampilan dan perilaku halaman yang ada.

Banyak pengembang menggunakan JSON untuk meneruskan pembaruan AJAX antara klien dan server. Situs web yang memperbarui skor olahraga langsung dapat dianggap sebagai contoh AJAX. Jika skor ini harus diperbarui di situs web, maka skor tersebut harus disimpan di server sehingga halaman web dapat mengambil skor saat diperlukan. Di sinilah kita dapat menggunakan data yang diformat JSON.

Setiap data yang diperbarui menggunakan AJAX dapat disimpan menggunakan format JSON di server web. AJAX digunakan agar javascript dapat mengambil file JSON ini jika diperlukan, mengurai, dan melakukan salah satu operasi berikut -

Simpan nilai yang diurai dalam variabel untuk diproses lebih lanjut sebelum menampilkannya di halaman web.
Ini secara langsung menetapkan data ke elemen DOM di halaman web, sehingga mereka ditampilkan di situs web.

Contoh

Kode berikut menunjukkan JSON dengan AJAX. Simpan sebagaiajax.htmmengajukan. Di sini fungsi pemuatan loadJSON () digunakan secara asinkron untuk mengunggah data 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>

Diberikan di bawah ini adalah file input data.json, memiliki data dalam format JSON yang akan diunggah secara asinkron ketika kita mengklik Update Detailtombol. File ini disimpan dihttp://www.tutorialspoint.com/json/

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

Kode HTML di atas akan menghasilkan layar berikut, di mana Anda dapat memeriksa AJAX beraksi -

Rincian Cricketer

Nama	Negara
Sachin	India

Saat Anda mengklik Update Detailtombol, Anda akan mendapatkan hasil sebagai berikut. Anda dapat mencoba JSON dengan AJAX sendiri, asalkan browser Anda mendukung Javascript.

Rincian Cricketer

Nama	Negara
Brett	Australia