JSON con Ajax

AJAX es JavaScript asincrónico y XML, que se utiliza en el lado del cliente como un grupo de técnicas de desarrollo web interrelacionadas, para crear aplicaciones web asincrónicas. Según el modelo AJAX, las aplicaciones web pueden enviar y recuperar datos de un servidor de forma asincrónica sin interferir con la visualización y el comportamiento de la página existente.

Muchos desarrolladores usan JSON para pasar actualizaciones AJAX entre el cliente y el servidor. Los sitios web que actualizan resultados deportivos en vivo pueden considerarse un ejemplo de AJAX. Si estas puntuaciones deben actualizarse en el sitio web, deben almacenarse en el servidor para que la página web pueda recuperar la puntuación cuando sea necesario. Aquí es donde podemos hacer uso de datos con formato JSON.

Cualquier dato que se actualice usando AJAX se puede almacenar usando el formato JSON en el servidor web. AJAX se utiliza para que JavaScript pueda recuperar estos archivos JSON cuando sea necesario, analizarlos y realizar una de las siguientes operaciones:

Almacene los valores analizados en las variables para su posterior procesamiento antes de mostrarlos en la página web.
Asigna directamente los datos a los elementos DOM en la página web, para que se muestren en el sitio web.

Ejemplo

El siguiente código muestra JSON con AJAX. Guardarlo comoajax.htmarchivo. Aquí, la función de carga loadJSON () se usa de forma asincrónica para cargar datos 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>

A continuación se muestra el archivo de entrada data.json, teniendo datos en formato JSON que se subirán de forma asincrónica cuando hagamos clic en el Update Detailbotón. Este archivo se guarda enhttp://www.tutorialspoint.com/json/

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

El código HTML anterior generará la siguiente pantalla, donde puede verificar AJAX en acción:

Detalles del jugador de críquet

Nombre	País
Sachin	India

Cuando haces clic en el Update Detail, debería obtener un resultado similar al siguiente. Puede probar JSON con AJAX usted mismo, siempre que su navegador admita Javascript.

Detalles del jugador de críquet

Nombre	País
Brett	Australia

↰ Previous page Next page ↱