JSON с Ajax

AJAX - это асинхронный 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.

Детали игрока в крикет

имя	Страна
Бретт	Австралия