En ajax el objecto XMLHttpRequest es la base de todo
- Crear un objeto XMLHttpRequest
- Definir una función de devolución de llamada
- Abra el objeto XMLHttpRequest
- Enviar una solicitud a un servidor
El bjecto XMLHttpRequest
Todos los navegadores modernos admiten el objecto XMLHttpRequest
Los objectos XMLHttpRequest se pueden utilizar para cambiar datos con un servidor web por detras de las escenas.
quiero decir que se puede cambiar solo una parte de la pagina sin recargar la misma
...Crear un objecto XMLHttpRequest
Para crear un obejecto XMLHttpRequest es tan simple como crear una variable
Definir una función de devolución de llamada
Una función de devolución de llamada es una función que se pasa como parámetro a otra función.
En este caso, la función de devolución de llamada debe contener el código para ejecutar cuando el la respuesta está lista
Ejemplo
Enviar una solicitud
Para enviar una solicitud a un servidor, puede usar los métodos open() y send() del objeto: XMLHttpRequest
Codigo de ejemplo
Acceso a través de dominios
Por razones de seguridad, los navegadores modernos no permiten el acceso entre dominios.
Esto significa que tanto la página web como el archivo XML que intenta cargar deben estar ubicados en el mismo servidor.
Métodos de objeto XMLHttpRequest
| Methodo | Descripcion |
|---|---|
| new XMLHttpRequest() | Crea un nuevo objeto XMLHttpRequest |
| abort() | Cancela la solicitud actual |
| getAllResponseHeaders() | Devuelve información de encabezado |
| getResponseHeader() | Devuelve información de encabezado específica |
| open(method, url, async, user, psw) | Especifica la solicitud método: el tipo de solicitud GET o POST url: la ubicación del archivo async: verdadero (asincrónico) o falso (sincrónico) usuario: nombre de usuario opcional psw: contraseña opcional |
| send() | Envía la solicitud al servidor.Utilizado para solicitudes GET |
| send(string) | Envía la solicitud al servidor.Utilizado para solicitudes POST |
| setRequestHeader() | Agrega un par de etiqueta/valor al encabezado que se enviará |
Propiedades del objeto XMLHttpRequest
| Propriedad | Descripcion |
|---|---|
| onload | Define una función que se llamará cuando se reciba (cargue) la solicitud |
| onreadystatechange | Define una función que se llamará cuando cambie la propiedad readyState |
| readyState | Contiene el estado de XMLHttpRequest. 0: solicitud no inicializada 1: conexión de servidor establecida 2: solicitud recibida 3: solicitud de procesamiento 4: solicitud finalizada y respuesta lista |
| responseText | Devuelve los datos de respuesta como una cadena. |
| responseXML | Devuelve los datos de respuesta como datos XML |
| status | Devuelve el número de estado de una solicitud 200: "Está bien" 403: "Prohibido" 404 No encontrado" Para obtener una lista completa, vaya a la Referencia de mensajes Http |
| statusText | Devuelve el texto de estado (por ejemplo, "OK" o "Not Found") |
La propiedad onload
Con el objecto XMLHttpRequest puede definir una función de devolución de llamada que se ejecutará cuando la solicitud recibe una respuesta
La funcion se define en la propriedad onload del objecto XMLHttpRequest
Codigo completo del ejemplo onload
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
Múltiples funciones de devolución de llamada
Si tiene más de una tarea AJAX en un sitio web, debe crear una función para ejecutando el XMLHttpRequestobjeto y una función de devolución de llamada para cada Tarea AJAX.
La llamada de función debe contener la URL y qué función llamar cuando el la respuesta está lista.
Codigo del ejemplo
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
La propiedad onreadystatechange
La propriedad readyState contiene el estado de XMLHttpRequest
los onreadystatechange define una función de devolución de llamada que se ejecutará cuando cambie readyState
La propriedad status y statusText contienen el estado del objeto XMLHttpRequest
| Propriedad | Descripcion |
|---|---|
| onreadystatechange | Define una función que se llamará cuando cambie la propiedad readyState |
| readyState | Contiene el estado de XMLHttpRequest. 0: solicitud no inicializada 1: conexión de servidor establecida 2: solicitud recibida 3: solicitud de procesamiento 4: solicitud finalizada y respuesta lista |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Devuelve el texto de estado (por ejemplo, "OK" o "Not Found") |
los onreadystatechange se llama a la función cada vez que cambia readyState.
Cuando readyState es 4 y el estado es 200, la respuesta está lista:
Codigo de ejemplo
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias