Ajax Principios

¿Qué es Ajax?
https://www.youtube.com/playlist?list=PLK7sa90aSLe74eFKxktrvzMeXA1zilxaT
Ajax viene de Asynchronous JavaScript and XML. Es una técnica que sirve para:
- Actualizar una página web sin necesidad de recargar la pantalla.

- Recibir o enviar información hacia el servidor.
Imaginemos dos documentos, un index.html y un texto.txt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Curso de Ajax</title>
</head>
<body>
<script>
</script>
</body>
</html>
En el TXT solo tenemos el mensaje: “Este es un mensaje en el archivo TXT”
Usando Ajax visualizaremos este mensaje en la pantalla sin necesidad de recargarla. Iniciamos creando un <button>
y agregándole un evento onclick(), el cual ejecutará la función ejecutarAjax(). Debajo del botón crearemos un <div>
con un id=”mensaje” para mostrar el mensaje.
<body>
<button onclick="ejecutarAjax();">Mostrar Mensaje</button>
<div id="mensaje"></div>
<script>
</script>
</body>
En el <script> creamos la función ejecutarAjax(). Dentro de la función declaramos una variable (cualquier nombre)
que aquí llamaremos ajaxRequest. Luego debajo verificamos el tipo de navegador usando en un if
window.XMLHttpRequest para navegadores modernos e iniciar el objeto; para navegadores antiguos e internet
Explorer usamos el else utilizando ActiveXObject.
<script>
function ejecutarAjax() {
// inicia el objeto XMLHttpRequest dependiendo del navegador
var ajaxRequest;
if (window.XMLHttpRequest) {
ajaxRequest = new XMLHttpRequest();
} else {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
Ahora usaremos el objeto ajaxRequest junto con la propiedad onreadystatechange que se encargará de procesar la
respuesta enviada por el servidor. Agregamos una función anónima y adentro un condicional if como sigue:
<script>
function ejecutarAjax() {
// inicia el objeto XMLHttpRequest dependiendo del navegador
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
} else {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
}
}
}
</script>
La propiedad readyState puede tener valores de 0 a 4.
- 0: la petición no ha sido inicializada.

- 1: la petición ha sido establecida.
- 2: la petición ha sido enviada.
- 3: la petición está siendo procesada.
- 4: la petición ha sido finalizada.
La propiedad status == 200 indica que el estado de la petición ha sido exitosa.
Entonces, si la petición ha sido finalizada y es exitosa mostraremos nuestro mensaje.
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
document.getElementById("mensaje").innerHTML =
ajaxRequest.responseText;
}
Luego fuera de la función anónima y a continuación escribimos lo siguiente:
ajaxRequest.open("GET", "texto.txt", true);

ajaxRequest.send();
Los parámetros de open() son el tipo de método (tipo de petición), la dirección del servidor (como en este caso es
solo un documento, escribimos solo el nombre del documento), y true si queremos que la comunicación sea
asíncrona (sin recargar la pantalla). Finalmente llamamos al método send() para enviar la petición.
Guardamos cambios y testeamos el funcionamiento de Ajax:

JSON - ¿Cómo leer JSON usando Ajax?
Creemos un documento datosPersona.json con el siguiente objeto JSON:
{
"nombre": "Juan",
"apellido": "Hernández",
"edad": "28"
}
Creamos un index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Curso de Ajax</title>
</head>
<body>
<script>
</script>
</body>
</html>
Ahora creamos un <button> con el evento onclick(), que ejecutará la función obtenerJson(). Debajo creamos un <div
id=”info”> donde se mostrará la información del JSON.
<body>
<button onclick="obtenerJson();">Mostrar Mensaje</button>
<div id="info"></div>
<script>
</script>
</body>
Ahora creamos a la función obtenerJson().
function obtenerJson() {
var xmlhttp;
// obtenemos el objeto en base al navegador
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// utilizamos el objeto para ejecutar la petición de Ajax

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
}
}
}
Del ejemplo anterior, con ajaxRequest.responseText obtenemos la información como una cadena, pero
necesitamos convertirla a un objeto de JSON usando el método JSON.parse(), luego lo almacenamos en una variable.
Luego para ver los datos de la variable podemos usar console.log().
// utilizamos el objeto para ejecutar la petición de Ajax
var datos = JSON.parse(xmlhttp.responseText);
console.log(datos);
}
}
Luego a continuación de la función anónima escribimos:
xmlhttp.open("GET", "datosPersona.json", true);

xmlhttp.send();
Guardamos y testeamos:
Bien, ahora nuestro propósito es mostrar la información en la pantalla, para ello recordemos que toda la
información se almacena en la variable datos, por lo cual podemos iterar sobre ella. Fuera y arriba de la función
obtenerJson() creamos una referencia (div) a nuestro <div> que mostrará la información.
var myDiv = document.getElementById("info");
Borramos el console.log() en la función anónima y reemplazamos por:
for (var i in datos) {
myDiv.innerHTML += (i + ": " + datos[i] + "<br/>")
}
}
}
Guardamos y testeamos:
Si hacemos clic varias veces en el botón, se nos agregará la misma información continuamente. Para evitar esto
agregamos un if exterior al for que valide si el <div> se encuentra vacío; si esto es así entonces que se muestre la
información, sino que no se muestre.
if (myDiv.innerHTML == "") {
for (var i in datos) {
myDiv.innerHTML += (i + ": " + datos[i] + "<br/>")
}
}
}
}
Con esto queda el problema solucionado.

Ajax Principios

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ajax Principios

Caricato da

Copyright:

Formati disponibili

¿Qué es Ajax?

- Actualizar una página web sin necesidad de recargar la pantalla.

Imaginemos dos documentos, un index.html y un texto.txt:

En el TXT solo tenemos el mensaje: “Este es un mensaje en el archivo TXT”

La propiedad readyState puede tener valores de 0 a 4.

- 0: la petición no ha sido inicializada.

La propiedad status == 200 indica que el estado de la petición ha sido exitosa.

Entonces, si la petición ha sido finalizada y es exitosa mostraremos nuestro mensaje.

Luego fuera de la función anónima y a continuación escribimos lo siguiente:

ajaxRequest.open("GET", "texto.txt", true);

Guardamos cambios y testeamos el funcionamiento de Ajax:

Creemos un documento datosPersona.json con el siguiente objeto JSON:

Ahora creamos a la función obtenerJson().

// utilizamos el objeto para ejecutar la petición de Ajax

Luego a continuación de la función anónima escribimos:

xmlhttp.open("GET", "datosPersona.json", true);

var myDiv = document.getElementById("info");

Borramos el console.log() en la función anónima y reemplazamos por:

Con esto queda el problema solucionado.

Potrebbero piacerti anche