Montrons-le en utilisant un exemple typique de vérification de connexion.
De manière générale, l'utilisation de l'objet XMLHttpRequest pour la vérification de la connexion nécessite les étapes suivantes :
1. Utilisez la méthode DOM pour obtenir la valeur dans la zone de saisie
Copiez le code comme suit :
var nomutilisateur = document.getElementById("nomutilisateur").value;
2. Créez un objet XMLHttpRequest Cette étape est plus compliquée. La raison principale est de prendre en compte les problèmes de compatibilité du navigateur.
Copiez le code comme suit :
si (window.XMLHttpRequest) {
//Pour FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = nouveau XMLHttpRequest();
//Correction de bugs dans certaines versions spécifiques du navigateur Mozillar
si (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} sinon si (window.ActiveXObject) {
//Pour IE6, IE5.5, IE5
//Deux noms de contrôle pouvant être utilisés pour créer des objets XMLHTTPRequest, stockés dans un tableau js
//La version classée en premier est plus récente
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
pour (var i = 0; i < activexName.length; i++) {
essayer{
//Supprimez un nom de contrôle et créez-le. Si la création réussit, terminez la boucle.
//Si la création échoue, une exception sera levée, puis la boucle pourra continuer à essayer de créer
xmlhttp = new ActiveXObject(activexName[i]);
casser;
} attraper(e){
}
}
}
3. Enregistrez la fonction de rappel de l'objet XMLHttpRequest Lors de l'enregistrement de la fonction de rappel, vous avez besoin du nom de la fonction et n'ajoutez pas de parenthèses.
Copiez le code comme suit :
//Lors de l'enregistrement de la fonction de rappel, le nom de la fonction est requis, n'ajoutez pas de parenthèses
//Nous devons enregistrer le nom de la fonction. Si nous ajoutons des parenthèses, la valeur de retour de la fonction sera enregistrée. C'est faux.
xmlhttp.onreadystatechange = rappel ;
4. Définir les informations de connexion (GET)
Copiez le code comme suit :
//Le premier paramètre indique la méthode de requête http, prend en charge toutes les méthodes de requête http, utilise principalement get et post
//Le deuxième paramètre représente l'adresse URL de la requête, et les paramètres demandés par la méthode get sont également dans l'URL.
//Le troisième paramètre indique s'il faut utiliser une interaction asynchrone ou synchrone, true indique une interaction asynchrone
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
5. Envoyez une demande
Copiez le code comme suit :
xmlhttp.send(null);
6. (POST), vous devez définir vous-même l'en-tête de la requête http et, comme il doit être codé, vous ne pouvez pas envoyer directement les données dans le deuxième paramètre de XHR.open. Vous devez plutôt utiliser la méthode send(). pour envoyer les données.
Copiez le code comme suit :
//Code pour la requête POST
//xmlhttp.open("POST","AJAXServer",true);
//La méthode POST vous oblige à définir vous-même l'en-tête de la requête http
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//Envoyer des données en mode POST
xmlhttp.send("name=" + userName);
Fonction de rappel :
Copiez le code comme suit :
//fonction de rappel
fonction rappel() {
// alerte (xmlhttp.readyState);
//5. Recevoir les données de réponse
//Déterminer si le statut de l'objet est un achèvement interactif
si (xmlhttp.readyState == 4) {
// Détermine si l'interaction http réussit
si (xmlhttp.status == 200) {
//Récupère les données renvoyées par le serveur Lacquerware
//Obtenir les données en texte brut générées par le segment du serveur
var réponseText = xmlhttp.responseText;
//Afficher les données sur la page
//Trouver le nœud d'élément correspondant à la balise div via dom
var divNode = document.getElementById("result");
//Définit le contenu HTML dans le nœud de l'élément
divNode.innerHTML = réponseText ;
} autre {
alert("Une erreur s'est produite !!!");
}
}
}