JSON với Ajax

AJAX là JavaScript và XML không đồng bộ, được sử dụng ở phía máy khách như một nhóm các kỹ thuật phát triển web có liên quan với nhau, để tạo các ứng dụng web không đồng bộ. Theo mô hình AJAX, các ứng dụng web có thể gửi và truy xuất dữ liệu từ máy chủ một cách không đồng bộ mà không can thiệp vào việc hiển thị và hoạt động của trang hiện có.

Nhiều nhà phát triển sử dụng JSON để chuyển các bản cập nhật AJAX giữa máy khách và máy chủ. Các trang web cập nhật tỷ số thể thao trực tiếp có thể được coi là một ví dụ của AJAX. Nếu những điểm số này phải được cập nhật trên trang web, thì chúng phải được lưu trữ trên máy chủ để trang web có thể lấy điểm khi nó được yêu cầu. Đây là nơi chúng ta có thể sử dụng dữ liệu được định dạng JSON.

Mọi dữ liệu được cập nhật bằng AJAX đều có thể được lưu trữ bằng định dạng JSON trên máy chủ web. AJAX được sử dụng để javascript có thể truy xuất các tệp JSON này khi cần thiết, phân tích cú pháp chúng và thực hiện một trong các hoạt động sau:

Lưu trữ các giá trị đã phân tích cú pháp trong các biến để xử lý thêm trước khi hiển thị chúng trên trang web.
Nó trực tiếp gán dữ liệu cho các phần tử DOM trong trang web, để chúng được hiển thị trên trang web.

Thí dụ

Đoạn mã sau đây hiển thị JSON với AJAX. Lưu nó thànhajax.htmtập tin. Ở đây, hàm tải loadJSON () được sử dụng không đồng bộ để tải lên dữ liệu 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>

Dưới đây là tệp đầu vào data.json, có dữ liệu ở định dạng JSON sẽ được tải lên không đồng bộ khi chúng tôi nhấp vào Update Detailcái nút. Tệp này đang được lưu giữ tronghttp://www.tutorialspoint.com/json/

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

Đoạn mã HTML trên sẽ tạo ra màn hình sau, nơi bạn có thể kiểm tra AJAX đang hoạt động:

Chi tiết về Cricketer

Tên	Quốc gia
Sachin	Ấn Độ

Khi bạn nhấp vào Update Detail, bạn sẽ nhận được một kết quả như sau. Bạn có thể tự mình thử JSON với AJAX , miễn là trình duyệt của bạn hỗ trợ Javascript.

Chi tiết về Cricketer

Tên	Quốc gia
Brett	Châu Úc