Quel est le principe d'ajax ? Analyse des attributs et principes communs d'ajax (résumé)

Cet article parle principalement de mon propre résumé, de quelques questions et de quelques réponses sur ajax. J'espère qu'il pourra aider tout le monde. Lisons cet article ensemble maintenant

Tout d'abord, ajax est le nom complet de JavaScript et XML asynchrones, Asynchrone signifie asynchrone, ce qui est différent du Web traditionnel.

Qu'est-ce qui est synchrone et qu'est-ce qui est asynchrone ?

La synchronisation signifie qu'après que l'expéditeur a envoyé les données, il doit attendre que le destinataire reçoive les données et réponde avant de passer à l'étape suivante.

De manière asynchrone, l'expéditeur n'a pas besoin d'attendre que le destinataire réponde après l'envoi des données et peut passer à l'étape suivante.

Pour donner un exemple frappant, la synchronisation est comme A demandant à B d'aller dîner. A envoie une invitation à B pour manger ensemble. doit attendre que B réponde, pour manger ou ne pas manger, A décide de manger seul ou d'attendre que B l'accompagne de manière asynchrone, c'est comme quitter le travail, A dit à B que A va manger, puis s'en va ; , que B fasse ou non une réponse.

Principe d'Ajax

Pour faire simple, à travers L'objet XMLHttpRequest envoie une requête asynchrone au serveur, obtient les données du serveur, puis exploite le nœud DOM via JS.

Objet XMLHttpRequest

Méthode :

1.open(type de requête, url, booléen)

2.send() paramètres Pour données envoyées comme corps de la requête, si le corps de la requête n'est pas obligé d'envoyer des données, transmettez null

3.abort() annule la requête asynchrone

4.getAllResponseHeaders()Renvoyer tous les en-têtes de réponse de la requête HTTP sous forme de paires clé/valeur

5.getResponseHeader("header")Renvoie la valeur de chaîne de l'en-tête spécifié

6.setRequestHeader("en-tête", "value")Définit l'en-tête spécifié sur la valeur fournie. open() doit être appelé avant de définir des en-têtes. Définissez l'en-tête et envoyez-le avec la demande (La méthode 'post' est obligatoire)

Attributs communs d'ajax :

1 .readyState représente l'étape active actuelle du processus de requête/réponse (0 : non initialisé, la méthode open n'a pas été appelée ; 1 : démarré, la méthode open a été appelée, la méthode send n'a pas été appelée ; 2 : envoyée : send a été appelé, aucune réponse n'a été reçue ; 3 : Recevoir, une partie des données de réponse a été reçue ; 4. Completed, peut être utilisé sur le client)

2.onreadystatechange Cette méthode sera appelée une fois lorsque la valeur de readyState change (Si vous voulez en voir plus, accédez à PHP Learn dans la colonne Manuel de développement AJAX du site Web chinois)

3.responseText Le texte renvoyé comme corps de réponse

4.responseXML Enregistrez le type de réponse sous "text/xml" ou "application/xml" données de réponse Document XML DOM

5.status Statut HTTP de la réponse

6.statusText Description du statut Http

Créez-en un sous l'objet XHR :

function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttprequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.sctiveXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
for(i =0;i<versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available");
}
}
var xhr = createXHR();
xhr.onreadyststechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status <300) || 304){
alert(xhr.responseText);
}else{
alert("请求位成功"+ xhr.status);
}
}
};
xhr.open("get","aaa.txt",true);
xhr.send(null);

Avantages ajax :

1. sans rafraîchissement, réduisez le temps d'attente des utilisateurs, meilleure expérience utilisateur

2. Communiquez avec le serveur de manière asynchrone sans interrompre l'utilisateur, et la réponse est plus rapide

3. Une partie de la charge du serveur peut être transféré au client, Utiliser la capacité de traitement inactive du client, réduire la charge du serveur et de la bande passante, économiser de l'espace et les coûts de location du haut débit. Et pour réduire la charge sur le serveur, le principe d'AJAX est de « récupérer les données à la demande », ce qui peut minimiser la charge sur le serveur causée par les requêtes et réponses redondantes et améliorer les performances du site.

5. Basé sur la standardisation, largement pris en charge

inconvénients d'Ajax

1. Les fonctions avant et arrière sont détruites. Les utilisateurs utilisent souvent le bouton retour pour annuler l'opération précédente, mais cela ne peut pas être réalisé en utilisant ajax. Vous pouvez utiliser Gmail pour résoudre ce problème, il utilise simplement une méthode relativement stupide mais efficace, c'est-à-dire lorsque l'utilisateur clique sur le bouton retour pour accéder à l'historique, en créant ou en utilisant un IFRAME caché pour reproduire les modifications sur la page.

2. Problèmes de sécurité. La technologie ajax revient à établir un canal direct vers les données d'entreprise. Cela permet aux développeurs d’exposer par inadvertance davantage de données et de logique de serveur qu’auparavant. La logique de ajax peut être cachée à la technologie d'analyse de sécurité côté client, permettant aux pirates informatiques d'établir de nouvelles attaques à partir de serveurs distants. De plus, lui-même est soumis à des attaques telles que des attaques de scripts intersites, des injections SQL, etc.

3. Faible prise en charge des moteurs de recherche

4. Certains appareils portables ne peuvent pas être bien pris en charge, etc.

Cet article se termine ici (si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation AJAX pour apprendre), si vous avez des questions, vous pouvez laisser un message ci-dessous.

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!