Quels sont les workflows d'AJAX ? Introduction au workflow ajax (avec exemples)

Cet article parle principalement du workflow de ajax, ainsi que du principe d'ajax et de l'introduction de certains attributs couramment utilisés. Jetons maintenant un coup d'œil ensemble à cet article

AJAX signifie "JavaScript et XML asynchrones".

est une technologie de développement Web permettant de créer des applications Web interactives. Il :
utilise XHTML+CSS pour représenter les informations ;
utilise JavaScript pour faire fonctionner le DOM (Document Object Model) pour l'affichage et l'interaction dynamiques ;
utilise XML et XSLT pour l'échange de données et les opérations associées
 ; Les objets XMLHttpRequest effectuent un échange de données asynchrone avec le serveur Web ;
Utilisez JavaScript pour tout lier ensemble.
Principe AJAX :
AJAX ne fait pas référence à une seule technologie, mais utilise de manière organique une série de technologies connexes. Son cœur est l'objet JavaScript XmlHttpRequest, qui nous permet d'utiliser JavaScript pour envoyer des requêtes au serveur et traiter les réponses sans bloquer l'utilisateur. AJAX utilise un processus d'interaction asynchrone, qui introduit un intermédiaire entre l'utilisateur et le serveur, éliminant ainsi les lacunes de traitement-attente-traitement-attente dans le processus d'interaction réseau. Le navigateur de l'utilisateur charge le moteur AJAX lors de l'exécution de tâches. Le moteur AJAX est écrit en JavaScript et est généralement caché dans un cadre caché. Il est responsable de la compilation de l'interface utilisateur et de l'interaction avec le serveur. Le moteur AJAX permet au processus d'interaction entre l'utilisateur et le logiciel d'application de se dérouler de manière asynchrone, indépendamment de la communication entre l'utilisateur et le serveur réseau. Désormais, vous pouvez utiliser Javascript pour appeler le moteur AJAX au lieu de générer une action utilisateur HTTP. L'édition des données en mémoire, la navigation dans les pages et la vérification des données, qui ne nécessitent pas de recharger la page entière, peuvent être exécutées par AJAX. vous pouvez apporter une commodité visible à JSP, aux développeurs et aux utilisateurs finaux.
Puisque le cœur d'Ajax est l'objet XmlHttpRequest, il doit être introduit :
Attributs communs :
Onreadystatechange spécifie la fonction de traitement des événements lorsque l'attribut readyState change . Écrivez simplement
readyState pour indiquer l'état actuel de la requête Ajax. Lecture seule Sa valeur est représentée par un nombre.
0 signifie non initialisé. La méthode open n'a pas encore été appelée
1 signifie chargement. La méthode open a été appelée, mais la méthode send n'a pas encore été appelée
2 signifie qu'elle a été chargée. send a été appelé. La demande a été lancée
3 signifie que l'interaction est en cours. Le serveur envoie une réponse
4 signifie terminé. La réponse est envoyée
Chaque fois que la valeur readyState change, l'événement readystatechange sera déclenché.
ResponseText Renvoie les informations de réponse sous forme de chaîne en lecture seule. Il s'agit soit de HTML, XML ou de texte brut, selon ce que le serveur envoie. La propriété ResponseText n'est disponible que lorsque la valeur de la propriété readyState devient 4, indiquant que la requête Ajax est terminée.
ResponseXML Formatez les informations de réponse dans un objet Document Xml et renvoyez-les en lecture seule. L'attribut ResponseXML n'est disponible que lorsque le serveur envoie des données avec des informations d'en-tête correctes. Le type MIME doit être text/xml
status Renvoie le code d'état http de la requête en cours. Lecture seule
Codes d'état courants et leurs significations :
404 page introuvable (introuvable). )
403 Interdit
500 Erreur de service interne
200 Tout va bien
304 Non modifié (Le serveur renvoie un statut 304, indiquant que le fichier source n'a pas été modifié)
Dans le XMLHttpRequest objet, les codes d'état envoyés par le serveur sont stockés dans l'attribut status. En comparant cette valeur avec 200 ou 304, vous pouvez vous assurer que le serveur a envoyé une réponse réussie (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour en savoir plus)

Méthodes courantes :
Ouvrir Créez une nouvelle requête http et spécifiez la méthode de requête, l'URL et les informations de vérification
Envoyer Envoyez la requête au serveur http et recevez la réponse si la requête est obtenue. , il ne sera envoyé. Aucune donnée
setRequestHeader spécifie individuellement un certain en-tête http de la requête
Workflow AJAX :
1 Initialisation de l'objet

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

2 Envoyer la demande
Appelez les méthodes open et send de l'objet XMLHttpRequest Dans l'ordre, la méthode send est appelée une fois l'appel open terminé.

xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.send(null);

Si le paramètre d'envoi est envoyé en mode Post, il peut s'agir de n'importe quel contenu que vous souhaitez transmettre au serveur, mais vous devez d'abord appeler le setRequestHeader méthode pour modifier la catégorie MIME :
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 Le serveur reçoit et traite les données et les renvoie en spécifiant le gestionnaire d'événements pour traiter les informations de retour
Chaque changement d'attribut readyState déclenchera l'événement readystatechange. Attribuez simplement le nom de la fonction de gestionnaire correspondant à l'attribut onreadystatechange de l'objet XMLHttpRequest. 🎜>
4 Le client reçoit 5 Modifier le contenu de la page client

 xmlHttp.onreadystatechange = function(){            if (xmlHttp.readystate == 4) { 
  if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式：//responseText：
  将传回的信息当字符串使用；//responseXML：将传回的信息当XML文档使用，可以用DOM处理。 
        }            }        };

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site PHP chinois Manuel d'utilisation AJAX
colonne 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!