Comment utiliser la requête http ajax ? Comment ajax demande-t-il au serveur ? (Ci-joint avec un exemple d'analyse)

Cet article parle principalement des connaissances de base sur ajax, de l'histoire d'ajax et de l'utilisation de base d'ajax. Jetons maintenant un coup d'œil ensemble à cet article

AJAX BasicsAJAX fait référence à JavaScript et XML asynchrones.
AJAX est un modèle de programmation popularisé par Google en 2005.
AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les standards existants.
Avec AJAX, vous pouvez créer des applications WEB meilleures, plus rapides et plus conviviales.
AJAX est basé sur des requêtes JavaScript et HTTP (requêtes HTTP).

Introduction à AJAXAJAX fait référence à JavaScript et XML asynchrones.
Connaissances de base que vous devez avoir
Avant de continuer, vous devez avoir une compréhension de base des éléments suivants :
* HTML / XHTML
* JavaScript
Si vous souhaitez d'abord apprendre ces éléments, veuillez accédez à ces tutoriels sur notre page d'accueil.
AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML)
AJAX n'est pas un nouveau langage de programmation, mais une technologie permettant de créer des applications Web meilleures, plus rapides et plus interactives.
Avec AJAX, votre JavaScript peut communiquer directement avec le serveur à l'aide de l'objet XMLHttpRequest de JavaScript. Grâce à cet
objet, votre serveur web JavaScript échange des données. AJAX peut utiliser le transfert de données asynchrone (requêtes HTTP) entre le navigateur et le serveur Web sans recharger la page, ce qui permet à la page Web de demander une petite quantité d'informations au serveur, plutôt que
la page entière.
AJAX rend les applications Internet plus petites, plus rapides et plus conviviales.
AJAX est une technologie de navigateur indépendante du logiciel du serveur Web.
AJAX est basé sur les standards du web
AJAX est basé sur les standards du web suivants :
* JavaScript
* XML
* HTML
* CSS
Les standards du web utilisés dans AJAX sont bien définis et sont pris en charge par tous les principaux navigateurs. Les applications AJAX sont indépendantes du navigateur et de la plate-forme.
AJAX, c'est de meilleures applications.
Les applications Web présentent de nombreux avantages par rapport aux applications de bureau : elles peuvent atteindre un plus large éventail d'utilisateurs, elles sont plus faciles à installer et à maintenir, et elles sont plus faciles à développer.
Cependant, les applications Internet ne sont pas aussi complètes et conviviales que les applications de bureau traditionnelles.
Grâce à AJAX, les applications Internet peuvent devenir plus complètes et plus conviviales. (Si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois
Colonne Manuel de développement AJAX
pour en savoir plus)

Requête HTTP AJAX

Un JAX utilise une requête HTTP dans Dans la programmation JavaScript traditionnelle, si vous souhaitez obtenir des informations à partir de fichiers ou de bases de données sur le serveur, ou envoyer des informations au serveur
, vous devez utiliser un formulaire HTML pour OBTENIR ou POST des données sur le serveur. L'utilisateur doit cliquer sur le bouton « Soumettre » pour envoyer/obtenir des informations, attendre la réponse du serveur, puis une nouvelle page chargera les résultats.
Les applications Web traditionnelles deviennent lentes et de moins en moins conviviales car le serveur renvoie une nouvelle page chaque fois que l'utilisateur soumet une entrée.
En tirant parti d'AJAX, votre JavaScript communique directement avec le serveur via l'objet XMLHttpRequest de JavaScript.
En utilisant les requêtes HTTP, une page Web peut faire une requête au serveur et obtenir une réponse du serveur sans charger la page. L'utilisateur peut rester sur la même
page et il ne remarquera pas que le script demande la page en arrière-plan ou envoie des données au serveur.
Objet XMLHttpRequest
En utilisant l'objet XMLHttpRequest, les développeurs Web peuvent mettre à jour les pages depuis le serveur après le chargement de la page !
AJAX a été popularisé par Google en 2005 (Google Suggest).
Google recommande d'utiliser l'objet XMLHttpRequest pour créer une interface Web très dynamique : lorsque vous commencez à saisir une
requête dans le champ de recherche de Google, JavaScript émet les mots vers un serveur, qui renvoie ensuite une série de suggestions de recherche.
L'objet XMLHttpRequest est pris en charge par les navigateurs suivants : Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+ et Netscape 7.


Votre première application AJAX
Pour vous aider à comprendre le fonctionnement d'AJAX, nous allons créer une petite application AJAX.

Tout d'abord, nous avons besoin d'un formulaire HTML avec deux zones de texte : le nom d'utilisateur et l'heure. La zone de texte du nom d'utilisateur est remplie par l'utilisateur, tandis que la zone de texte de l'heure est remplie en utilisant

AJAX.
Ce fichier HTML s'appelle "testAjax.htm" (veuillez noter que ce formulaire HTML n'a pas de bouton de soumission !) :

<html>
<body>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form>
</body>
</html>

Support du navigateur AJAX
AJAX - Le point principal de la prise en charge du navigateur pour
AJAX est l'objet XMLHttpRequest.
Différents navigateurs créent des objets XMLHttpRequest de différentes manières.
Le navigateur IE utilise ActiveXObject, tandis que d'autres navigateurs utilisent un objet JavaScript intégré appelé XMLHttpRequest.
Pour créer cet objet pour différents navigateurs, nous devons utiliser une instruction "try and catch". Vous pouvez en savoir plus sur les instructions try et catch dans notre didacticiel JavaScript
.
Mettons à jour notre fichier "testAjax.htm" avec ce JavaScript qui crée un objet XMLHttpRequest :

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
 {
        var xmlHttp;
        try{           
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp=new XMLHttpRequest();
             }            
       catch (e){                 
                   // Internet Explorer                                
                   try{
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                        }
                   catch (e){
                                    try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                                         }
                                   catch (e){
               return false;
                                                  }    
                                  }
                      }
}
</script>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form></body>
</html>

Exemple d'explication :
Premier déclarez une variable xmlHttp qui contient l'objet XMLHttpRequest.
Utilisez ensuite XMLHttp=new XMLHttpRequest() pour créer cet objet. Cette déclaration concerne les navigateurs Firefox, Opera et Safari.
En cas d'échec, essayez xmlHttp=new ActiveXObject("Msxml2. XMLHTTP").
Si aucune de ces trois méthodes ne fonctionne, l'utilisateur utilise un navigateur obsolète et il verra une invite indiquant que ce navigateur ne prend pas en charge
AJAX.
Remarque : Les codes de personnalisation des navigateurs ci-dessus sont très longs et complexes. Cependant, ce code
est utile chaque fois que vous souhaitez créer un objet XMLHttpRequest, vous pouvez donc copier et coller ce code chaque fois que vous en avez besoin. Les codes ci-dessus sont compatibles avec tous les principaux navigateurs :
Internet Explorer, Opera, Firefox et Safari.

AJAX - Objet XMLHttpRequest AJAX - Plus de connaissances sur l'objet XMLHttpRequest
Avant d'envoyer des données au serveur, il nous faut expliquer les trois propriétés importantes de l'objet XMLHttpRequest.
attribut onreadystatechange
l'attribut onreadystatechange stocke les fonctions qui gèrent les réponses du serveur. Le code suivant définit une fonction vide qui peut également définir l'attribut
onreadystatechange :
xmlHttp.onreadystatechange=function()
{
// Nous devons écrire du code ici
}
Attribut readyState
L'attribut readyState stocke les informations d'état de la réponse du serveur. Chaque fois que readyState change, la fonction onreadystatechange sera exécutée.
Voici les valeurs possibles pour l'attribut readyState :
State Description
0
La requête n'est pas initialisée (avant d'appeler open())
1
La requête a été made (avant que send() ne soit appelé) )
2
La demande a été envoyée (l'en-tête du contenu peut généralement être obtenu à partir de la réponse ici)
3
La demande est en cours de traitement (certaines données est généralement disponible dans la réponse, mais le serveur n'a pas terminé la réponse)
4
La requête est complète (peut accéder à la réponse du serveur et l'utiliser)

Nous allons ajouter un If déclaration à cette fonction onreadystatechange pour tester si notre réponse est complète (ce qui signifie que les données sont disponibles)
：
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//Obtenir les données de la réponse du serveur
}
}
attributresponseText
Les données renvoyées par le serveur peuvent être récupérées via l'attribut ResponseText.
Dans notre code, nous définirons la valeur de la zone de texte temporelle égale à ResponseText :
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}

AJAX - Requête au serveurAJAX - Envoyer une requête au serveur
Pour envoyer la requête au serveur, nous devons utiliser la méthode open() et la méthode send().
La méthode open() nécessite trois paramètres. Le premier paramètre définit la méthode utilisée pour envoyer la requête (GET ou POST). Le deuxième paramètre spécifie l'URL du script

côté serveur. Le troisième paramètre spécifie que la demande doit être traitée de manière asynchrone.
La méthode send() envoie la requête au serveur. Si nous supposons que le fichier HTML et le fichier ASP se trouvent dans le même répertoire, alors le code ressemble à ceci :
xmlHttp.open("GET","time.asp",true);
xmlHttp. send(null);

Maintenant, nous devons décider quand exécuter la fonction AJAX. Lorsque l'utilisateur tape quelque chose dans la zone de texte du nom d'utilisateur, la fonction s'exécute "en coulisses"

.

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
    var xmlHttp;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
        try
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            alert("您的浏览器不支持AJAX!");
            return false;
        }
    }
}
xmlHttp.onreadystatechange=function()
{
    if(xmlHttp.readyState==4)
    {
        document.myForm.time.value=xmlHttp.responseText;
    }
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();"/>
时间: <input type="text" name="time" />
</form>
</body>
</html>

AJAX - Script côté serveur Maintenant, nous allons créer un script qui affichera l'heure actuelle du serveur.
L'attribut ResponseText stocke les données renvoyées par le serveur. Ici, nous voulons faire remonter l'heure actuelle. Voici le code de "time.asp":

<%response.expires=-1
response.write(time)%>

注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被
缓存。
运行您的 AJAX 应用程序
请在下面的文本框中键入一些文本，然后单击时间文本框：
用户 : 时间 :
时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！

本篇文章到这就结束了（想看更多就到PHP中文网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!