Que sont les technologies ajax ?

ajax inclut les technologies suivantes : 1. HTML ou Effectuer une communication asynchrone ; 5. JavaScript, implémenter la liaison et les appels ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Ajax est un nouveau terme proposé par Jesse James Garrett en 2005 pour décrire une « nouvelle » méthode utilisant un ensemble de technologies existantes, notamment : HTML ou XHTML, CSS, JavaScript, DOM, XML, XSLT et, surtout, XMLHttpRequest.

Grâce à la technologie Ajax, les applications Web peuvent présenter rapidement des mises à jour incrémentielles de l'interface utilisateur sans avoir besoin de recharger (actualiser) la page entière, ce qui permet au programme de répondre plus rapidement aux opérations de l'utilisateur.

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.

1. HTML ou XHTML, utilisé pour créer du contenu Web

2. CSS, utilisé pour embellir le contenu Web

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

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

5. 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 car presque tous les principaux navigateurs. le supporte actuellement.

Principe ajax et objet XmlHttpRequest

Le principe d'Ajax est simplement d'envoyer une requête asynchrone au serveur via l'objet XmlHttpRequest, d'obtenir des données du serveur, puis d'utiliser javascript pour faire fonctionner le DOM et mettre à jour la page. L’étape la plus critique consiste à obtenir les données de la demande auprès du serveur. Pour comprendre ce processus et ce principe, nous devons comprendre quelque chose à propos de XMLHttpRequest.

XMLHttpRequest est le mécanisme de base d'ajax. Il a été introduit pour la première fois dans IE5 et est une technologie qui prend en charge les requêtes asynchrones. Pour faire simple, JavaScript peut adresser des requêtes au serveur et traiter les réponses en temps opportun sans bloquer l'utilisateur. N'obtenez aucun effet de rafraîchissement.

Commençons donc par XMLHttpRequest et voyons comment cela fonctionne.

Tout d’abord, examinons les propriétés de l’objet XMLHttpRequest.

Ses propriétés sont :

onreadystatechange Le gestionnaire d'événement pour l'événement déclenché à chaque fois que l'état change.

responseText renvoie la forme de chaîne des données du processus serveur.

objet de données de document compatible ResponseXML DOM renvoyé par le processus serveur.

status Le code numérique renvoyé par le serveur, tel que les valeurs communes 404 (introuvable) et 200 (prêt)

status Informations de chaîne de texte accompagnant le code d'état

valeur d'état de l'objet readyState

0 (non initialisé) L'objet a été établi, mais pas encore initialisé (la méthode open n'a pas encore été appelée)

1 (Initialisation) L'objet a été créé, mais la méthode d'envoi n'a pas été appelée

2 (Envoi de données) La méthode d'envoi a été appelé, mais l'état actuel et l'en-tête http sont inconnus

3 (Transmission de données) Une partie des données a été reçue. Étant donné que la réponse et l'en-tête http sont incomplets, des erreurs se produiront lors de l'obtention d'une partie des données via ResponseBody et ResponseText.

4 (Complet) Les données sont reçues. À l'heure actuelle, la réponse complète peut être obtenue via ResponseXml et ResponseText

Cependant, en raison des différences entre les navigateurs, la création d'un objet XMLHttpRequest peut nécessiter des méthodes différentes. Cette différence se reflète principalement entre IE et les autres navigateurs. Ce qui suit est une méthode relativement standard de création d’un objet XMLHttpRequest.

function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementByIdx("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementByIdx("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

Comme indiqué ci-dessus, la fonction vérifie d'abord l'état global de XMLHttpRequest et s'assure qu'il est terminé (readyStatus=4), c'est-à-dire que les données ont été envoyées. Interrogez ensuite l'état de la demande en fonction des paramètres du serveur. Si tout est prêt (statut = 200), effectuez les opérations requises suivantes.

Pour les deux méthodes de XmlHttpRequest, open et send, la méthode open spécifie :

a Le type de données soumises au serveur, c'est-à-dire post ou get.

b, adresse URL demandée et paramètres transmis.

c. Mode de transmission, faux signifie synchrone, vrai signifie asynchrone. La valeur par défaut est vraie. S'il s'agit d'un mode de communication asynchrone (vrai), le client n'attend pas la réponse du serveur ; s'il s'agit d'un mode synchrone (faux), le client doit attendre que le serveur renvoie un message avant d'effectuer d'autres opérations. Il faut préciser la méthode de synchronisation en fonction des besoins réels. Dans certaines pages, des requêtes multiples peuvent être émises, voire des requêtes à grande échelle et de haute intensité, organisées, planifiées et formées, et cette dernière écrasera la précédente. . Bien entendu, vous devez spécifier la méthode de synchronisation.

La méthode Send est utilisée pour envoyer des demandes.

Connaissant le workflow de XMLHttpRequest, nous pouvons voir que XMLHttpRequest est entièrement utilisé pour émettre une requête au serveur, et son rôle se limite à cela, mais son rôle est la clé de toute l'implémentation ajax, car ajax n'est rien de plus que deux Le processus de formulation et de réponse aux demandes. Et c'est entièrement une technologie côté client. XMLHttpRequest gère le problème de communication entre le serveur et le client, c'est pourquoi c'est si important.

Maintenant, nous pouvons probablement comprendre les principes d'ajax. Nous pouvons considérer le serveur comme une interface de données, qui renvoie un flux de texte brut. Bien entendu, ce flux de texte peut être au format XML, HTML, code Javascript ou simplement une chaîne. À ce stade, XMLHttpRequest demande cette page au serveur et le serveur écrit le résultat du texte dans la page. C'est la même chose que le processus de développement Web ordinaire. La différence est qu'une fois que le client a obtenu le résultat de manière asynchrone, ce n'est pas directement. affiché sur la page, mais est d'abord traité par javascript puis affiché sur la page. Comme pour de nombreux contrôles ajax populaires actuellement, tels que magicajax, etc., ils peuvent renvoyer d'autres types de données tels que DataSet. Ils encapsulent simplement le résultat de ce processus. En substance, il n'y a pas beaucoup de différence entre eux.

【Recommandation de didacticiel connexe : Tutoriel vidéo 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!