JSON กับ Ajax

AJAX คือ Asynchronous JavaScript และ XML ซึ่งใช้ในฝั่งไคลเอ็นต์เป็นกลุ่มของเทคนิคการพัฒนาเว็บที่สัมพันธ์กันเพื่อสร้างเว็บแอปพลิเคชันแบบอะซิงโครนัส ตามแบบจำลอง AJAX เว็บแอปพลิเคชันสามารถส่งและดึงข้อมูลจากเซิร์ฟเวอร์แบบอะซิงโครนัสโดยไม่รบกวนการแสดงผลและลักษณะการทำงานของเพจที่มีอยู่

นักพัฒนาจำนวนมากใช้ JSON เพื่อส่งผ่านการอัปเดต AJAX ระหว่างไคลเอนต์และเซิร์ฟเวอร์ เว็บไซต์ที่อัปเดตผลการแข่งขันสดถือได้ว่าเป็นตัวอย่างของ AJAX หากต้องอัปเดตคะแนนเหล่านี้บนเว็บไซต์จะต้องจัดเก็บคะแนนเหล่านี้ไว้บนเซิร์ฟเวอร์เพื่อให้เว็บเพจสามารถเรียกดูคะแนนได้เมื่อจำเป็น นี่คือที่ที่เราสามารถใช้ประโยชน์จากข้อมูลที่จัดรูปแบบ JSON

ข้อมูลใด ๆ ที่อัพเดตโดยใช้ AJAX สามารถจัดเก็บโดยใช้รูปแบบ JSON บนเว็บเซิร์ฟเวอร์ AJAX ถูกใช้เพื่อให้ javascript สามารถดึงไฟล์ JSON เหล่านี้ได้เมื่อจำเป็นแยกวิเคราะห์และดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้ -

เก็บค่าที่แยกวิเคราะห์ไว้ในตัวแปรสำหรับการประมวลผลเพิ่มเติมก่อนที่จะแสดงบนเว็บเพจ
จะกำหนดข้อมูลให้กับองค์ประกอบ DOM ในหน้าเว็บโดยตรงเพื่อให้แสดงบนเว็บไซต์

ตัวอย่าง

โค้ดต่อไปนี้แสดง JSON พร้อม AJAX บันทึกเป็นไฟล์ajax.htmไฟล์. ที่นี่ฟังก์ชั่นการโหลด loadJSON () ใช้แบบอะซิงโครนัสเพื่ออัปโหลดข้อมูล 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>

ด้านล่างเป็นไฟล์อินพุต data.jsonมีข้อมูลในรูปแบบ JSON ซึ่งจะถูกอัปโหลดแบบอะซิงโครนัสเมื่อเราคลิกไฟล์ Update Detailปุ่ม. ไฟล์นี้ถูกเก็บไว้ในhttp://www.tutorialspoint.com/json/

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

โค้ด HTML ด้านบนจะสร้างหน้าจอต่อไปนี้ซึ่งคุณสามารถตรวจสอบการทำงานของ AJAX ได้ -

รายละเอียดคริกเก็ต

ชื่อ	ประเทศ
ซาชิน	อินเดีย

เมื่อคุณคลิกที่ไฟล์ Update Detailคุณควรได้รับผลลัพธ์ดังนี้ คุณสามารถลองใช้JSON กับ AJAX ได้ด้วยตัวเองหากเบราว์เซอร์ของคุณรองรับ Javascript

รายละเอียดคริกเก็ต

ชื่อ	ประเทศ
Brett	ออสเตรเลีย