Calcule le md5 d'un fichier
Pour envoyer une demande à un serveur, nous utilisons les méthodes open() et send() de l'objet XMLHttpRequest
L'objet XMLHttpRequest est utilisé pour échanger des données avec un serveur.
Pour envoyer une demande à un serveur, nous utilisons les méthodes open() et send() de l'objet XMLHttpRequest :
Exemple : 📋 Copier le code
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
Méthode | Description |
---|---|
open(method,url,async) |
Spécifie le type de requête, l'URL, et si la demande doit être gérée de manière
asynchrone ou pas. méthode: le type de demande : GET ou POST URL: l'emplacement du fichier sur le serveur. Async: true (asynchrone) ou false (synchrone) |
send(chaîne) |
Envoie la demande au serveur. chaîne: uniquement utilisé pour les requêtes POST |
GET est plus simple et plus rapide que POST et peut être utilisé dans la plupart des cas.
Toutefois, toujours utiliser POST pour :
Une simple demande GET :
Exemple :
Exemple : 📋 Copier le code
xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send();
Dans l'exemple ci-dessus, vous pouvez obtenir un résultat en mémoire cache.
Pour éviter cela, ajoutez un ID unique à l'URL :
Exemple :
Exemple : 📋 Copier le code
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send();
Si vous souhaitez envoyer des informations avec la méthode GET, ajoutez les informations à l'URL :
Exemple :
Exemple : 📋 Copier le code
xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true); xmlhttp.send();
Une simple demande de poste :
Exemple :
Exemple : 📋 Copier le code
xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
Pour afficher des données comme un formulaire HTML, ajouter un en-tête HTTP avec setRequestHeader(). Spécifier les données que vous souhaitez envoyer dans la méthode send() :
Exemple :
Exemple : 📋 Copier le code
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
Méthode | Description |
---|---|
setRequestHeader (en-tête, valeur) |
Ajoute des en-têtes HTTP de la requête. en-tête: spécifie le nom d'en-tête valeur: spécifie la valeur d'en-tête |
Le paramètre d'url de la méthode open(), est l'adresse d'un fichier sur un serveur :
Exemple : 📋 Copier le code
xmlhttp.open("GET","ajax_test.asp",true);
Le fichier peut être :
AJAX signifie Asynchronous JavaScript and XML, pour que l'objet XMLHttpRequest comporte comme AJAX, le paramètre asynchrone de la méthode open() doit être définie sur true :
Exemple : 📋 Copier le code
xmlhttp.open("GET","ajax_test.asp",true);
C'est une amélioration énorme pour les développeurs web, envoyer des demandes asynchrones.
Bon nombre de tâches effectuées sur le serveur sont très longues.
Avant AJAX, cette opération pourrait entraîner l'application à être suspendue ou arrêtée.
Avec AJAX, le JavaScript n'a pas à attendre la réponse du serveur, mais peut plutôt :
Lorsque vous utilisez async = true, spécifier une fonction à exécuter lorsque la réponse est prête par l’événement onreadystatechange :
Vous en apprendrez plus sur onreadystatechange dans un chapitre ultérieur.
Pour utiliser async = false, on change le troisième paramètre dans la méthode open() à false :
xmlhttp.open("GET","ajax_info.txt",false);
L’utilisation d'async = false n'est pas recommandé, mais on peut l’utiliser pour quelques petites demandes.
Lors de l’utilisation d’async = false le JavaScript ne continuera à s’exécuter, que si la réponse du serveur est prête. Si le serveur est occupé ou lent, l'application sera suspendue ou arrêtée.
Note : Lorsque vous utilisez async = false, ne pas écrire un onreadystatechange fonction – qui mis le code après l'instruction send() :
Exemple :
Exemple : 📋 Copier le code
xmlhttp.open("GET","ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Cours precedent: Créer l'objet XMLHttpRequest |
Sommaire de : Le langage JavaScript |
Cours suivant: AJAX Réponse du serveur |