JSON com Ajax

AJAX é Asynchronous JavaScript and XML, que é usado no lado do cliente como um grupo de técnicas de desenvolvimento web inter-relacionadas, a fim de criar aplicações web assíncronas. De acordo com o modelo AJAX, os aplicativos da web podem enviar e recuperar dados de um servidor de forma assíncrona, sem interferir na exibição e no comportamento da página existente.

Muitos desenvolvedores usam JSON para passar atualizações AJAX entre o cliente e o servidor. Os sites que atualizam placares esportivos ao vivo podem ser considerados um exemplo de AJAX. Se essas pontuações precisarem ser atualizadas no site, elas deverão ser armazenadas no servidor para que a página da web possa recuperar a pontuação quando for necessário. É aqui que podemos usar os dados formatados em JSON.

Quaisquer dados atualizados usando AJAX podem ser armazenados usando o formato JSON no servidor da web. AJAX é usado para que o javascript possa recuperar esses arquivos JSON quando necessário, analisá-los e realizar uma das seguintes operações -

  • Armazene os valores analisados ​​nas variáveis ​​para processamento posterior antes de exibi-los na página da web.

  • Ele atribui os dados diretamente aos elementos DOM na página da web, para que sejam exibidos no site.

Exemplo

O código a seguir mostra JSON com AJAX. Salvar comoajax.htmArquivo. Aqui, a função de carregamento loadJSON () é usada de forma assíncrona para fazer upload de dados 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>

Abaixo está o arquivo de entrada data.json, tendo dados no formato JSON que serão carregados de forma assíncrona quando clicarmos no Update Detailbotão. Este arquivo está sendo mantido emhttp://www.tutorialspoint.com/json/

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

O código HTML acima irá gerar a seguinte tela, onde você pode verificar o AJAX em ação -

Detalhes do jogador de críquete

Nome País
Sachin
Índia

Quando você clica no Update Detailbotão, você deve obter um resultado como a seguir. Você mesmo pode experimentar JSON com AJAX , desde que seu navegador suporte Javascript.

Detalhes do jogador de críquete

Nome País
Brett
Austrália