Учебники

JSON с Ajax

Июнь 11, 2019

AJAX — это асинхронный JavaScript и XML, который используется на стороне клиента как группа взаимосвязанных методов веб-разработки для создания асинхронных веб-приложений. Согласно модели AJAX, веб-приложения могут отправлять и извлекать данные с сервера асинхронно, не влияя на отображение и поведение существующей страницы.

Многие разработчики используют JSON для передачи обновлений AJAX между клиентом и сервером. В качестве примера AJAX можно рассматривать сайты, обновляющие результаты спортивных матчей. Если эти оценки должны быть обновлены на веб-сайте, они должны храниться на сервере, чтобы веб-страница могла получать оценки, когда это необходимо. Здесь мы можем использовать данные в формате JSON.

Любые данные, которые обновляются с использованием AJAX, могут храниться в формате JSON на веб-сервере. AJAX используется для того, чтобы javascript мог при необходимости извлекать эти файлы JSON, анализировать их и выполнять одну из следующих операций:

  • Сохраните проанализированные значения в переменных для дальнейшей обработки, прежде чем отображать их на веб-странице.

  • Он напрямую назначает данные элементам DOM на веб-странице, чтобы они отображались на веб-сайте.

Сохраните проанализированные значения в переменных для дальнейшей обработки, прежде чем отображать их на веб-странице.

Он напрямую назначает данные элементам DOM на веб-странице, чтобы они отображались на веб-сайте.

пример

Следующий код показывает JSON с AJAX. Сохраните его как файл ajax.htm . Здесь функция загрузки loadJSON () используется асинхронно для загрузки данных JSON.

Live Demo

<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, которые будут загружаться асинхронно при нажатии кнопки « Обновить данные» . Этот файл хранится в http://www.tutorialspoint.com/json/ 

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

Приведенный выше HTML-код создаст следующий экран, где вы можете проверить AJAX в действии:

Крикет Детали

название Страна
Сэчин
Индия

Когда вы нажимаете кнопку « Обновить детали» , вы должны получить результат примерно следующим образом. Вы можете попробовать JSON с AJAX самостоятельно, если ваш браузер поддерживает Javascript.

43
Share: