AJAX - Objet XMLHttpRequest
- Page précédente Introduction à AJAX
- Page suivante Requêtes AJAX
L'objet XMLHttpRequest est la base de l'AJAX.
- Créer un objet XMLHttpRequest
- Définir la fonction de rappel
- Ouvrir l'objet XMLHttpRequest
- Envoyer une requête au serveur
Objet XMLHttpRequest
Tous les navigateurs modernes le supportent Objet XMLHttpRequest.
L'objet XMLHttpRequest peut être utilisé pour échanger des données avec le serveur Web en arrière-plan. Cela signifie que l'on peut mettre à jour une partie du contenu du site Web sans recharger l'intégralité de la page.
Créer un objet XMLHttpRequest
Tous les navigateurs modernes (Chrome, Firefox, IE, Edge, Safari, Opera) ont des objets XMLHttpRequest intégrés. Objet XMLHttpRequest.
La syntaxe pour créer un objet XMLHttpRequest :
variable = new XMLHttpRequest();
Définir la fonction de rappel
La fonction de rappel est une fonction passée en tant que paramètre à une autre fonction.
Dans ce cas, la fonction de rappel doit contenir le code à exécuter lorsque la réponse est prête.
xhttp.onload = function() {
// Ce que faire lorsque la réponse est prête
}
Envoyer la demande
Pour envoyer une demande au serveur, vous pouvez utiliser l'objet XMLHttpRequest. open() et send() Méthode :
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Exemple
// Créer un objet XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Définir la fonction de rappel
xhttp.onload = function() {
// Vous pouvez utiliser les données ici
}
// Envoyer la demande
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Accès entre domaines (Access Across Domains)
Pour des raisons de sécurité, les navigateurs modernes ne permettent pas l'accès entre domaines.
Cela signifie que la page et le fichier XML qu'elle tente de charger doivent être situés sur le même serveur.
Les exemples sur CodeW3C.com ouvrent des fichiers XML situés dans le domaine CodeW3C.com.
Si vous souhaitez utiliser l'un des exemples ci-dessus sur l'une de vos pages, le fichier XML que vous chargez doit être situé sur votre propre serveur.
Méthodes de l'objet XMLHttpRequest
| Méthode | Descripción |
|---|---|
| new XMLHttpRequest() | Créer un nouveau objet XMLHttpRequest. |
| abort() | Annuler la demande en cours. |
| getAllResponseHeaders() | Retourner les informations d'en-tête. |
| getResponseHeader() | Retourner des informations d'en-tête spécifiques. |
| open(method, url, async, user, psw) |
Définir la demande.
|
| send() | Envoyer une demande au serveur, utilisée pour les demandes GET. |
| send(string) | Envoyer une demande au serveur, utilisée pour les demandes POST. |
| setRequestHeader() | Ajouter un paires de balise/valeur aux en-têtes à envoyer. |
Propriétés de l'objet XMLHttpRequest
| Atributo | Descripción |
|---|---|
| onload | Définir la fonction à appeler lors de la réception (chargement) de la demande. |
| onreadystatechange | Définir la fonction appelée lorsque l'attribut readyState change. |
| readyState |
Guarda el estado de XMLHttpRequest
|
| responseText | Devuelve los datos de respuesta en forma de cadena |
| responseXML | Devuelve los datos de respuesta en formato XML |
| estado |
Devuelve el número de estado de la solicitud
Para obtener una lista completa, por favor visite Manual de referencia de mensaje HTTP |
| statusText | Devuelve el texto de estado (por ejemplo "OK" o "No encontrado") |
Atributo onload
Al usar el objeto XMLHttpRequest, puede definir una función de retroalimentación para ejecutar cuando se reciba la respuesta a la solicitud
Por favor, define la función en el objeto XMLHttpRequest onload La función se define en el atributo
Exemple
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Múltiples funciones de retroalimentación
Si hay múltiples tareas AJAX en el sitio web, debe crear una función que ejecute el objeto XMLHttpRequest y crear una función de retroalimentación para cada tarea AJAX
La llamada a la función debe incluir la URL y la función que se debe llamar cuando la respuesta esté lista
Exemple
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) {
// Aquí está la acción
}
function myFunction2(xhttp) {
// Aquí está la acción
}
Atributo onload
readyState Atributo que guarda el estado de XMLHttpRequest
onreadystatechange Atributo que define una función de retroalimentación que se ejecuta cuando cambia el readyState
estado Atributo y statusText Atributo que guarda el estado del objeto XMLHttpRequest
| Atributo | Descripción |
|---|---|
| onreadystatechange | Define la función que se llama cuando cambia el atributo readyState |
| readyState |
Guarda el estado de XMLHttpRequest
|
| estado |
Devuelve el número de estado de la solicitud
Para obtener una lista completa, por favor visite Manual de referencia de mensaje HTTP |
| statusText | statusText |
Retourne le texte d'état (par exemple "OK" ou "Not Found").
L'événement onreadystatechange est appelé à chaque changement de readyState. 4 et status est 200 Lorsque la réponse est prête :
Exemple
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();
}
L'événement onreadystatechange a été déclenché quatre fois (1-4), et le readyState change à chaque fois.
- Page précédente Introduction à AJAX
- Page suivante Requêtes AJAX
