jQuery-Introduc...LOGIN

jQuery-Introduction à AJAX

Qu'est-ce qu'AJAX ?

AJAX = JavaScript et XML asynchrones.

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Pour les pages web traditionnelles (n'utilisant pas AJAX), si le contenu doit être mis à jour, la page web entière doit être rechargée.

Il existe de nombreux cas d'application utilisant AJAX : Sina Weibo, Google Maps, Kaixin.com, etc.

À propos de jQuery et AJAX

JQuery est une bibliothèque js légère compatible avec CSS3 et divers navigateurs (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+ ). jQuery permet aux utilisateurs de traiter plus facilement les documents et événements HTML, d'implémenter des effets d'animation et de fournir facilement une interaction AJAX pour les sites Web.

Avec les méthodes jQuery AJAX, vous pouvez demander du texte, HTML, XML ou JSON à un serveur distant en utilisant HTTP Get et HTTP Post - et vous pouvez charger ces données externes directement dans les éléments sélectionnés de la page Web. milieu.


Exemple :

Afficher un en premier Code front-end :

<!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(){
            //按钮单击时执行
            $("#testAjax").click(function(){
                //Ajax调用处理
                var html = $.ajax({
                    type: "POST",
                    url: "text.php",
                    data: "name=garfield&age=18",
                    async: false
                }).responseText;
                $("#myDiv").html('<h2>'+html+'</h2>');
            });
        });
    </script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>

Lors de l'affichage d'un morceau de code php d'arrière-plan, nous l'avons nommé text.php :

<?php
  $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
  echo $msg;
?>

De cette façon, nous complétons un simple exemple d'appel JQuery Ajax.

section suivante
<!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(){ //按钮单击时执行 $("#testAjax").click(function(){ //Ajax调用处理 var html = $.ajax({ type: "POST", url: "text.php", //调用text.php data: "name=garfield&age=18", async: false }).responseText; $("#myDiv").html('<h2>'+html+'</h2>'); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="testAjax" type="button">Ajax改变内容</button> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel