Introduction à AJAX

Avant d'étudier l'ajax, discutons d'abord d'une question : qu'est-ce que le Web 2.0. Lorsque vous entendez le terme Web 2.0, vous devez d'abord vous demander « Qu'est-ce que le Web 1.0 ? » Bien qu'il soit rare d'entendre les gens mentionner le Web 1.0, il fait en réalité référence au Web traditionnel avec un modèle de requête et de réponse complètement différent. Par exemple, accédez au site Web hdu.edu.cn et cliquez sur un bouton. Une requête est envoyée au serveur et la réponse est renvoyée au navigateur. La requête n'est pas simplement une liste de nouveaux contenus et éléments, mais une autre page HTML complète. Par conséquent, vous pouvez constater un scintillement ou une instabilité lorsque le navigateur Web redessine la page avec le nouveau code HTML. En fait, les demandes et les réponses sont clairement visibles à chaque nouvelle page que vous voyez.

Le Web 2.0 élimine (en grande partie) cette interaction visible de va-et-vient. Sur Google Maps, par exemple, vous pouvez faire glisser la carte pour effectuer un zoom avant et arrière avec un redessin minimal. Bien sûr, il y a encore des demandes et des réponses, mais elles sont cachées dans les coulisses. En tant qu'utilisateur, l'expérience est plus confortable et ressemble beaucoup à une application de bureau. Ce nouveau sentiment et ce nouveau paradigme sont ce que vous obtenez lorsque quelqu'un mentionne le Web 2.0.

Ce dont il faut se préoccuper, c'est de savoir comment rendre ces nouvelles interactions possibles. Évidemment, vous devez toujours faire des requêtes et recevoir des réponses, mais c'est la refonte HTML pour chaque interaction requête/réponse qui crée la sensation d'interactions Web lentes et maladroites. Il est donc clair que nous avons besoin d'un moyen pour que la requête envoyée et la réponse reçue contiennent uniquement les données requises au lieu de la page HTML entière. La seule fois où vous avez besoin d’obtenir l’intégralité de la nouvelle page HTML, c’est lorsque vous souhaitez que l’utilisateur voie la nouvelle page.

Mais la plupart des interactions ajoutent des détails aux pages existantes, modifient le texte principal ou écrasent les données originales. Dans ces cas, les méthodes Ajax et Web 2.0 permettent d'envoyer et de recevoir des données sans mettre à jour l'intégralité de la page HTML. Pour ceux qui passent beaucoup de temps en ligne, cette fonctionnalité peut rendre vos applications plus rapides et plus réactives, les incitant à revenir sur votre site de temps en temps.

Qu'est-ce qu'Ajax ?

1 Nom complet : Asynchrone, JavaScript et XML (JavaScript et XML asynchrones)<. 🎜>

2. Définition : Ajax n'est pas une technologie, c'est en fait plusieurs technologies Chaque technologie a sa propre unicité. Ensemble, elles deviennent une nouvelle technologie puissante .

3. comprend :

XHTML et CSS
Utilisez le modèle DocumentObject pour l'affichage et l'interaction dynamiques
Utilisez XML et XSLT pour l'interaction et le fonctionnement des données
Utilisez XMLHttpRequest pour la réception de données asynchrones
Utilisez JavaScript pour les lier ensemble

4. Explication : est une méthode de développement d'applications Web qui utilise des scripts côté client pour échanger des données avec le serveur Web. De cette manière, la page Web peut être mise à jour dynamiquement sans interrompre le processus d'interaction ni le rééditer. Grâce à Ajax, vous pouvez créer une interface utilisateur Web directe, hautement disponible, plus riche et plus dynamique, proche des applications de bureau natives.

Les principaux avantages d'Ajax sont les suivants :

1. Aucune prise en charge de plug-in requise (navigateurs généraux et JavaScript activés par défaut) ;

2. Excellente expérience utilisateur (des données pouvant être mises à jour peuvent être obtenues sans actualiser la page) ; >

3. Améliorer les performances des programmes Web (détendez la transmission des données à la demande sans avoir à les soumettre dans leur ensemble)

4. du serveur au Client);

Les défauts d'Ajax sont les suivants :

1. Différentes versions de navigateurs n'ont pas une prise en charge suffisante de l'objet XMLHttpRequest (comme avant IE5)

2 Les fonctions forward et back sont détruites (car Ajax est toujours activé) ; la page actuelle, pas Il y a une chance pour les pages précédentes et suivantes);

3. Prise en charge insuffisante des moteurs de recherche (car les robots des moteurs de recherche ne peuvent pas encore comprendre le contenu des données modifiées causées par JS

) ;

4. Manque d'outils de développement et de débogage (relativement comparé aux ensembles d'outils d'autres langages, le débogage et le développement JS ou Ajax sont pitoyables).

La partie la plus critique de l'utilisation d'Ajax est d'implémenter des requêtes asynchrones, de recevoir des réponses et d'exécuter des rappels. Alors, quelle est la différence entre asynchrone et synchrone ?

Le développement de nos programmes Web ordinaires est fondamentalement synchrone, ce qui signifie qu'un programme peut être exécuté avant que le suivant puisse être exécuté. C'est comme un appel téléphonique. Il faut répondre avant le suivant. l'appel peut être répondu ; de manière asynchrone, plusieurs appels peuvent être exécutés en même temps. On a l'impression qu'il y a plusieurs lignes pour chaque tâche, comme pour les messages texte. Vous n'arrêterez pas d'accepter un autre message texte simplement parce que vous lisez un message texte. Ajax peut également être exécuté en mode synchrone, mais le mode synchrone est un mode bloquant, qui entraînera l'exécution de plusieurs lignes une par une, ce qui fera apparaître la page Web dans un état d'animation suspendue. Par conséquent, généralement la plupart. Ajax utilise le mode asynchrone.

Google Suggest

En 2005, Google a rendu AJAX populaire avec son Google Suggest.

Google Suggest utilise AJAX pour créer une interface Web hautement dynamique : lorsque vous saisissez des mots-clés dans le champ de recherche de Google, JavaScript enverra ces caractères au serveur, puis le serveur renverra une liste de suggestions de recherche.

Exemple d'affichage :

Créez d'abord un fichier html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function checkname(){
            if($('#name').val() == ""){
                $('#msg').html("please enter the name!");
                $('#name').focus;
                return false;
            }
            if($('#address').val() == ""){
                $('#msg').html("please enter the address!");
                $('#address').focus;
                return false;
            }
            ajax_post();
        }
        function ajax_post(){
            $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php
                    function(data){
                        //$('#msg').html("please enter the name!");
                        //alert(data);
                        $('#msg').html(data);
                    },
                    "text");
        }
    </script>
</head>
<body>
    <form id="ajaxform" name="ajaxform" method="post" action="txt.php">
        <p>
            姓名：<input type="text" name="name" id="name"/>
        </p>
        <p>
            地址：<input type="text" name="address" id="address"/>
        </p>
        <p id="msg"></p>
        <p>
            <input name="Submit" type="button" value="submit" onclick="return checkname()"/>
        </p>
    </form>
</body>
</html>

Créez un fichier txt.php :

<?php
    $name = $_POST["name"];
    $address = $_POST["address"];
    echo $name."<br>";
    echo $address."<br>";
?>