3.9 KiB
| title | localeTitle |
|---|---|
| AJAX | AJAX |
AJAX
AJAX significa JavaScript asíncrono y XML . No es un lenguaje de programación. Es una tecnología para desarrollar aplicaciones web mejores, más rápidas e interactivas utilizando HTML, CSS, JavaScript y XML.
- HTML: el lenguaje de marcado de hipertexto (HTML) se utiliza para definir la estructura de una aplicación web.
- CSS: la hoja de estilo en cascada (CSS) se usa para proporcionar apariencia y estilo a una aplicación web.
- JavaScript: JavaScript se utiliza para hacer que una aplicación web sea interactiva, interesante y fácil de usar.
- XML: Extensible Markup Language (XML) es un formato para almacenar y transportar datos desde el servidor web.
¿Cuál es el significado de asíncrono en AJAX?
Asíncrono significa que la aplicación web podría enviar y recibir datos del servidor web sin actualizar la página. Este proceso en segundo plano de enviar y recibir datos del servidor junto con la actualización de diferentes secciones de una página web define la propiedad / característica asíncrona de AJAX.
¿Cómo funciona AJAX ?
AJAX utiliza un objeto XMLHttpRequest integrado en el navegador para solicitar datos de un servidor web y HTML DOM para mostrar o usar los datos.
Objeto XMLHttpRequest : es una API en forma de objeto cuyos métodos ayudan en la transferencia de datos entre un navegador web y un servidor web.
HTML DOM : cuando se carga una página web, el navegador crea un modelo de objeto de documento de la página.
Crear un objeto XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Propiedades del objeto XMLHttpRequest:
readystate es una propiedad del objeto XMLHttpRequest que mantiene el estado de XMLHttpRequest.
- 0: solicitud no inicializada
- 1: conexión de servidor establecida
- 2: solicitud recibida
- 3: solicitud de procesamiento
- 4: solicitud terminada y respuesta esta lista
onreadystatechange es una propiedad del objeto XMLHttpRequest que define una función a la que se llama cuando cambia la propiedad readyState.
status es una propiedad del objeto XMLHttpRequest que devuelve el número de estado de una solicitud
- 200: "ok"
- 403: "Prohibido"
- 404 No encontrado"
Métodos del objeto XMLHttpRequest: Para enviar una solicitud a un servidor web, usamos los métodos open () y send () del objeto XMLHttpRequest.
xhttp.open("GET", "content.txt", true);
xhttp.send();
Crea una función changeContent () usando JavaScript:
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("foo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
}
Ejemplo de AJAX para cambiar el contenido de una página web:
<!DOCTYPE html>
<html>
<body>
<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>
<script>
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("foo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
}
</script>
</body>
</html>
El archivo content.txt debe estar presente en el directorio raíz de la aplicación web.