Analyse détaillée des compétences d'utilisation d'Ajax dans JS

Cette fois je vais vous faire une analyse détaillée des techniques d'utilisation d'Ajax en JS et une analyse détaillée des précautions d'utilisation d'Ajax en JS Voici des cas pratiques, jetons un oeil.

Ajax n'est pas un nouveau langage de programmation mais une nouvelle façon d'utiliser les standards existants. AJAX peut échanger des données avec le serveur sans recharger la page entière. Cette méthode d'interaction asynchrone permet aux utilisateurs d'obtenir de nouvelles données sans actualiser la page après avoir cliqué.

Objet XMLHttpRequest

Le cœur d'Ajax est l'objet XMLHttpRequest (XHR). XHR fournit une interface pour envoyer des requêtes au serveur et analyser les réponses du serveur. Possibilité d'obtenir de nouvelles données du serveur de manière asynchrone.

Créer des objets dans le navigateur (prend uniquement en charge IE7 et les versions supérieures) :

var xhr = new XMLHttpRequest();

Utilisation de XHR

La première chose à introduire est la méthode open(). Il reçoit 3 paramètres :

• Le type de requête à envoyer (POST, GET, etc.)

• L'URL de la requête

• Une valeur booléenne indiquant si pour envoyer la requête de manière asynchrone

Exemple d'appel d'open() :

xhr.open("get", "index.jsp", false); GET pour index.jsp demandez. L'URL est relative à la page actuelle sur laquelle le code s'exécute ; l'appel de la méthode open() n'envoie pas réellement la requête, il lance simplement l'envoi d'une requête.

Appelez send() pour envoyer une requête :

xhr.send(null);

send() reçoit un paramètre, qui doit être utilisé comme données envoyées par le corps de la requête. Si vous n'avez pas besoin d'envoyer des données via le corps de la requête, vous devez transmettre null.

Les données correspondantes seront renseignées dans les attributs pertinents de l'objet XHR :

•responseText : le texte renvoyé comme corps de réponse

•responseXML : le type de contenu de la réponse est "text /xml" ou "application/xml"

• status : statut HTTP de la réponse

• statusText : description du statut HTTP

Après réception la réponse, vérifiez d'abord l'attribut status , confirmez que la réponse a été renvoyée, généralement 200 en signe de succès. Le code d'état 304 indique que la ressource n'a pas été modifiée et que la version mise en cache dans le navigateur peut être utilisée directement.

Afin de recevoir une réponse appropriée, les deux codes d'état doivent être détectés comme suit :

xhr.open("get", "index.jsp", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}

En détectant l'attribut readyState, l'étape actuellement active du processus de demande/réponse peut être déterminé.

•0 : Non initialisé. La méthode open() n'a pas été appelée

•1 : Start. La méthode open() a été appelée, mais la méthode send() n'a pas été appelée

•2 : Envoyer. La méthode send() a été appelée et aucune réponse n'a été reçue

•3 : Reçue. Des données partielles ont été reçues

•4 : Complète. Toutes les données ont été reçues et peuvent être utilisées sur le client

Lorsque la valeur de l'attribut readyState change, un événement readystatechange sera déclenché. Spécifier le onreadystatechangegestionnaire d'événements avant d'appeler open() peut garantir la compatibilité du navigateur.

Les requêtes asynchrones peuvent être annulées avant de recevoir une réponse :

xhr.abort();

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("请求成功：" + xhr.status);
}
}
};
xhr.open("get", "index.jsp", true);
xhr.send(null);

Informations d'en-tête HTTP

Objet XHR fourni Méthodes pour manipuler les en-têtes de requête et les informations d’en-tête de réponse.

Par défaut, lors de l'envoi d'une requête XHR, les informations d'en-tête suivantes seront également envoyées.

•Accepter : le type de contenu que le navigateur peut gérer

•Accept-Charset : le jeu de caractères que le navigateur peut afficher

•Accept-Encoding : le type de contenu que le navigateur peut gérer Encodage de compression

•Accept-Language : La langue actuellement définie par le navigateur

•Connexion : Le type de connexion entre le navigateur et le serveur

•Cookie : La langue définie sur la page actuelle N'importe quel Cookie

•Hôte : Le domaine où se trouve la page faisant la demande

•Referer : L'URL de la page faisant la demande

•User-Aent : Le caractère de l'agent utilisateur du navigateur String

使用setRequestHeader()可以设置自定义的请求头部信息。必须在调用open()方法之后，且在调用send()之前，调用

setRequestHeader()：

xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

调用getResponseHeader()并传入字段名称，可以取得相应的响应头部信息。getAllResponseHeader()取得包含所有头部信息的长字符串。

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeader();

GET请求

GET用于向服务器查询某些信息。可以将查询字符串参数追加到URL的末尾，查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()编码：

xhr.open("get", "login.jsp?name1=value1&name2=value2", false); 
addURLParam()接收三个参数：要添加参数的URL、参数的名称和参数的值。
var url = "login.jsp";
// 添加参数
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化请求
xhr.open("get", url, false);

POST请求

POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。

初始化请求：

xhr.open("post", "login.jsp", true); 
首先将Content-Type头部信息设置为application/x-www-form-urlencoded,然后建立一个字符串格式。如果需要将页面中的表单数据进行序列化，然后再通过XHR发送到服务器，可以使用serialize()函数来创建这个字符串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery+AJAX实现调用后台步骤详解

JQuery调用Ajax加载图片

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!