Explication détaillée du fonctionnement d'Ajax-js tutoriel-php.cn

Explication détaillée du fonctionnement d'Ajax

php中世界最好的语言

Libérer： 2018-04-03 10:06:28

original

1454 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée du principe de fonctionnement d'ajax, et quelles sont les précautions lors de l'utilisation d'ajax. Voici des cas pratiques, jetons un coup d'œil.

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques. AJAX permet aux pages Web de se mettre à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

1. La technologie incluse dans ajax

Tout le monde sait qu'ajax n'est pas une nouvelle technologie, mais une combinaison de plusieurs technologies originales. Il est composé des technologies suivantes.

Représenté en CSS et XHTML.

Utilisez le modèle DOM pour l'interaction et l'affichage dynamique.

Utilisez XMLHttpRequest pour communiquer de manière asynchrone avec le serveur.

Utilisez javascript pour vous lier et appeler.

Parmi les technologies ci-dessus, à l'exception de l'objet XmlHttpRequest, toutes les autres technologies sont basées sur les standards du Web et ont été largement utilisées. Bien que XMLHttpRequest n'ait pas encore été adopté par le W3C, il s'agit déjà d'un standard de facto. presque tous les principaux navigateurs le prennent actuellement en charge.

2. Comment créer un ajax

Le principe d'Ajax est simplement d'utiliser l'objet XmlHttpRequest pour envoyer des requêtes asynchrones au serveur et obtenir données du serveur. Utilisez ensuite javascript pour manipuler le DOM et mettre à jour la page. L’étape la plus critique consiste à obtenir les données de la demande auprès du serveur. La création native d'Ajax peut être divisée en quatre étapes suivantes.

1. Créez un objet XMLHttpRequest

Tous les navigateurs modernes (IE7+, Firefox, Chrome, Safari et Opera) ont des objets XMLHttpRequest intégrés.

Syntaxe de création d'objets XMLHttpRequest :

var xhr = new XMLHttpRequest();

Copier après la connexion

Les anciennes versions d'Internet Explorer (IE5 et IE6) utilisent des objets ActiveX :

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

Copier après la connexion

Pour gérer tous les navigateurs modernes navigateur, y compris IE5 et IE6, veuillez vérifier si le navigateur prend en charge l'objet XMLHttpRequest. Si pris en charge, crée un objet XMLHttpRequest. S'il n'est pas supporté, créez un ActiveXObject :

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

Copier après la connexion

2. Préparez la requête

Initialisez l'objet XMLHttpRequest en acceptant trois paramètres :

xhr.open(method,url,async);

Copier après la connexion

Le premier paramètre représente la chaîne de type de requête , et sa valeur peut être GET ou POST.

Requête GET :

xhr.open("GET",demo.php?name=tsrot&age=24,true);

Copier après la connexion

Requête POST :

xhr.open("POST",demo.php,true);

Copier après la connexion

Le deuxième paramètre est l'URL à laquelle la requête doit être envoyée .

Le troisième paramètre est vrai ou faux, indiquant si la requête est émise en mode asynchrone ou synchrone. (La valeur par défaut est true, false n'est généralement pas recommandé)

false : les requêtes émises en mode synchrone suspendront l'exécution de tout le code javascript jusqu'à ce que le serveur obtienne une réponse si le navigateur se connecte au réseau ou télécharge un. file Si quelque chose ne va pas, la page restera bloquée pour toujours.
true : Une requête émise en mode asynchrone. Pendant que l'objet de requête envoie et reçoit des données, le navigateur peut continuer à charger la page et exécuter d'autres codes javascript

Envoyer une requête . 🎜>

xhr.send();

Généralement, les paramètres soumis à l'aide d'Ajax sont pour la plupart de simples chaînes. Vous pouvez directement utiliser la méthode GET pour écrire les paramètres à soumettre dans le paramètre url. de la méthode open. À l'heure actuelle, les paramètres de la méthode send sont nuls ou vides.

Requête GET :

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

Copier après la connexion

Requête POST :

Si vous avez besoin de POST des données comme un formulaire HTML, utilisez setRequestHeader() pour ajouter des en-têtes HTTP. Précisez ensuite les données que vous souhaitez envoyer dans la méthode send() :

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

Copier après la connexion

4. Traitez la réponse

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

Copier après la connexion

événement onreadystatechange :

Lorsqu'une requête est envoyée au serveur, nous devons effectuer certaines tâches basées sur les réponses. Chaque fois que readyState change, l'événement onreadystatechange est déclenché.

Attribut readyState :

0 : L'objet a été créé, mais la méthode open() n'a pas encore été appelée.

1 : La méthode open() a été appelée, mais la requête n'a pas encore été envoyée.

2：请求已经发送，标题和状态已经收到，并可用。

3：接收到来自服务器的响应。

4：接收完请求数据，表示已经完成请求。

status属性：

200:”OK”

404: 未找到页面

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象。

5、完整例子

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

Copier après la connexion

data.json