Composé de HTML, de la technologie JavaScript™, de DHTML et du DOM, Ajax constitue un excellent moyen de transformer des interfaces Web encombrantes en applications Ajax interactives. Pour Ajax, l'objet principal est XMLHttpRequest, et toutes les opérations Ajax sont indissociables du fonctionnement de cet objet.
Voyons d'abord comment créer cet objet en javascript :
varxmlHttp=newXMLHttpRequest();
Cette simple ligne de code crée un objet XMLHttpRequest dans Mozilla, Firefox, Safari, Opera et pratiquement tout navigateur non Microsoft prenant en charge Ajax sous quelque forme que ce soit. Mais pour IE, qui détient une part de marché de 70 %, cette méthode n'est pas possible, et différentes versions d'IE ont des méthodes de création différentes, nous devons donc utiliser les deux méthodes suivantes pour créer des objets sous IE :
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//Pour les navigateurs plus récents
}attraper(err){
essayer{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//Pour les navigateurs plus anciens
}attraper(err2){
xmlHttp=faux ;
}
}
Même ainsi, nous ne pouvons pas prédire que certains navigateurs ne pourront pas créer cet objet, donc si la création échoue, nous devons ajouter une phrase :
if(!xmlHttp){
alert("Impossible de créer un objet XMLHttpRequest !");
}
La combinaison est la suivante :
varxmlHttp=false ;
essayer{
xmlHttp=newXMLHttpRequest();
}attraper(essayerMicrosoft){
essayer{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(autremicrosoft){
essayer{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}attraper (échec){
xmlHttp=faux ;
}
}
}
si(!xmlHttp){
alert("Impossible de créer un objet XMLHttpRequest !");
}
Créons ensuite une fonction getInfo() pour activer les requêtes asynchrones :
functiongetInfo(){
varnum=document.getElementById("num").value;//Obtenir les données du formulaire
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true représente ici une requête asynchrone
}
Une fois configuré avec open(), vous pouvez envoyer des requêtes. Bien que vous puissiez envoyer des données à l'aide de send(), vous pouvez également envoyer des données via l'URL elle-même. En fait, dans la plupart des requêtes GET, il est beaucoup plus facile d'envoyer des données en utilisant l'URL, utilisez donc simplement null comme paramètre de send() ici. Le fichier php dans l'adresse URL est le fichier php qui est demandé pour traiter les données requises, tout comme lorsque nous utilisons habituellement PHP. Plusieurs paramètres peuvent être ajoutés et séparés par &.
xmlHttp.send(null);
Après avoir envoyé les données, nous devons utiliser la méthode de rappel pour obtenir l'état du serveur, donc l'attribut onreadystatechange est utilisé.
xmlHttp.onreadystatechange=updatePage;
Cette instruction doit être placée avant l'instruction send() pour qu'elle soit efficace. La updatePage suivante est une fonction qui traite les informations renvoyées. Le getInfo() complet est le suivant :
fonctiongetInfo(){
varnum=document.getElementById("num").value;//Obtenir les données du formulaire
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true représente ici une requête asynchrone
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
Nous devons également déclencher cette fonction en html :
<inputname="num"id="num"onblur="getInfo()"type="text"/>
Ensuite, nous devons écrire la fonction updatePage() :
functionupdatePage(){
si(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
Le readyState dans le code ci-dessus est un statut renvoyé par le serveur. Ce statut 4 indique que la requête a été envoyée et traitée. ResponseText consiste à obtenir les informations renvoyées par le serveur, puis à les attribuer au formulaire avec ID city via javascript.
À ce stade, un simple programme Ajax est terminé. Le code javascript complet est le suivant :
varxmlHttp=false;
essayer{
xmlHttp=newXMLHttpRequest();
}attraper(essayerMicrosoft){
essayer{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(autremicrosoft){
essayer{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}attraper (échec){
xmlHttp=faux ;
}
}
}
si(!xmlHttp){
alert("Impossible de créer un objet XMLHttpRequest !");
}
fonctiongetInfo(){
varnum=document.getElementById("num").value;//Obtenir les données du formulaire
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true représente ici une requête asynchrone
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
fonctionupdatePage(){
si(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
Il manque encore un fichier php ici. Puisque la méthode de traitement est différente et la méthode d'écriture est différente, et que ce n'est pas la partie principale d'Ajax, le code ne sera pas inclus ici. N'oubliez pas que PHP génère et renvoie les données requises. Il
n'a pas été mis à jour depuis longtemps. J'ai vu ce tutoriel aujourd'hui et il convient très bien aux débutants.