AJAX es un conjunto de tecnologías que permite a los usuarios obtener datos de forma asíncrona sin interferir con la página existente. Podemos obtener varios tipos de datos usando AJAX como JSON, XML, HTML y archivos de texto.
En este artículo, veremos cómo obtener una respuesta JSON en Ajax.
Enfoque: para resolver este problema, primero consideraremos un archivo JSON llamado » capitals.json » e intentaremos obtener estos datos JSON como respuesta usando AJAX . Luego crearemos un archivo HTML «capitals.html» que contiene una tabla que usaremos para completar los datos que estamos obteniendo en respuesta. Por último, crearemos un archivo JavaScript llamado «capitals.js» para escribir código para obtener datos JSON. En nuestro código, usaremos JavaScript simple para lograr la tarea dada. Vamos a utilizar el objeto XMLHttpRequest para realizar una solicitud a un servidor y obtener su respuesta.
A continuación se muestra la implementación paso a paso del enfoque anterior.
Paso 1: Veamos el contenido JSON que estamos teniendo.
mayúsculas.json:
{
"countries_capitals":[
{
"country":"India",
"capital":"New Delhi"
},
{
"country":"Italy",
"capital":"Rome"
},
{
"country":"Germany",
"capital":"Berlin"
},
{
"country": "Egypt",
"capital":"Cairo"
},
{
"country": "Australia",
"capital":"Canberra"
}
]
}
Paso 2: archivo HTML que contiene una tabla llamada «Países y sus capitales», y un botón «Obtener» para hacer clic de modo que al hacer clic en él podamos completar los datos JSON en la tabla.
Capitals.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Countries and Capitals</title>
<style>
body {
text-align: center;
}
h1 {
color: #44A075;
}
table {
border: 2px solid #44A075;
}
caption {
margin: 10px 0;
}
tr {
height: 30px;
}
th,
td {
border: 1px solid #44A075;
width: 100px;
}
.info {
display: flex;
justify-content: center;
}
button {
margin: 20px 0;
height: 40px;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="info">
<table>
<caption>Countries and their capitals</caption>
<th>Countries</th>
<th>Capitals</th>
<tr>
<td class="countries"></td>
<td class="capitals"></td>
</tr>
<tr>
<td class="countries"></td>
<td class="capitals"></td>
</tr>
<tr>
<td class="countries"></td>
<td class="capitals"></td>
</tr>
<tr>
<td class="countries"></td>
<td class="capitals"></td>
</tr>
<tr>
<td class="countries"></td>
<td class="capitals"></td>
</tr>
</table>
</div>
<button id="fetchBtn" type="button" name="button">Fetch</button>
<script src="capitals.js" charset="utf-8"></script>
</body>
</html>
Producción:
Paso 3: Aquí está nuestro archivo JavaScript que contiene el código para obtener una respuesta JSON usando AJAX.
- Primero, tomaremos todos los elementos HTML que son nuestro botón «Obtener» y las columnas de la tabla » Países y sus capitales» para que podamos llenarlo dinámicamente usando la manipulación DOM.
- Adjuntaremos un detector de eventos en nuestro botón «Obtener» .
- Luego, crearemos un objeto XMLHttpRequest .
- Después de crear el objeto XMLHttpRequest , llamaremos a su método abierto para abrir la solicitud, el método abierto toma tres parámetros, un método HTTP (como GET, POST), la URL de los datos que queremos obtener y un valor booleano (verdadero significa solicitud asíncrona y falso significa solicitud síncrona).
- Luego, use el método getResponseHeader que devuelve la string que contiene el texto del encabezado especificado, aquí usará este método para definir qué tipo de datos estamos obteniendo.
- Después de esto, llamamos al método de carga que define qué hacer después de que la solicitud se complete con éxito. Aquí, en el método onload , primero estamos analizando el texto de respuesta e iterando a través de todas las columnas de países y capitales una por una usando forEach loop y llenándolo con nuestros datos de texto de respuesta analizados.
- Por último, enviaremos una solicitud al servidor utilizando el método de envío de objetos XMLHttpRequest .
capitals.js
const fetchBtn = document.getElementById("fetchBtn");
const countries = document.getElementsByClassName("countries");
const capitals = document.getElementsByClassName("capitals");
fetchBtn.addEventListener("click", buttonHandler);
// Defining buttonHandler function
function buttonHandler() {
// First create an XMLHttprequest object
const xhr = new XMLHttpRequest();
xhr.open("GET", "capitals.json", true);
xhr.getResponseHeader("Content-type", "application/json");
xhr.onload = function() {
const obj = JSON.parse(this.responseText);
Array.from(countries).forEach((country, index) => {
country.innerText = obj.countries_capitals[index].country;
});
Array.from(capitals).forEach((capital, index) => {
capital.innerText = obj.countries_capitals[index].capital;
});
}
xhr.send();
}
Ahora, si hacemos clic en el botón «Obtener» , podremos ver nuestros datos JSON en la tabla anterior llamada «Países y sus capitales».
Producción:
Publicación traducida automáticamente
Artículo escrito por raianjali523 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA