Tutoriel d'introduction à Ajax Démonstration de 30 minutes-js tutoriel-php.cn

Tutoriel d'introduction à Ajax Démonstration de 30 minutes

云罗郡主

Libérer： 2019-01-25 13:16:13

original

2770 Les gens l'ont consulté

Dans tous les tutoriels, qu'ils soient en ligne ou dans des livres. On dit que si vous voulez apprendre l'ajax, vous devez apprendre le html+css+javascript à l'avance. Ensuite, de nombreux débutants front-end ont commencé à l'apprendre, mais ont découvert qu'après avoir écrit selon l'exemple pendant une longue période, il y en avait. pas de réponse, et a finalement abandonné de manière décisive ~ [Tutoriel recommandé :Tutoriel vidéo AJAX]

En fait... vous n'avez pas configuré d'environnement backend, mon cher ~

1. Configurez d'abord un environnement backend, n'est-ce pas ? Par exemple, php

Pour nous, débutants en front-end, comment pouvons-nous avoir autant d'énergie et de temps pour apprendre le PHP de manière intensive, n'est-ce pas ? Par conséquent, il est recommandé de créer un environnement PHP : phpstudy. Installez-le simplement à l'étape suivante et tout ira bien.

J'ai installé PHPStudy sur le lecteur D, donc je suis allé sur le lecteur D et j'ai trouvé le dossier WWW dans le dossier phpstudy

Le dossier WWW est équivalent au serveur de notre ordinateur, et tout J'écrirai dans le futur Things, je les mettrai tous dans le dossier WWW.

Créez deux fichiers dans notre dossier WWW, index.html et handle.php

Testons-le et écrivons du code dans le index.html nouvellement créé. Ouvrez le navigateur, entrez localhost et appuyez sur Entrée. Si vous pouvez ouvrir la page Web que vous venez d'écrire, cela signifie que nous l'avons construite avec succès

Si cela échoue, il peut s'agir d'un conflit de port, ou phpstudy peut ne pas l'être. en cours d'exécution ~ vérifiez-le vous-même Vérifiez et déboguez

2. Écrivons une application backend simple en PHP~

index.html
<body>
<form action="index.html" method="GET">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form> 
</body>

Copier après la connexion

Je ne sais pas comment vous avez appris le formulaire, alors je dirai quelques mots : GET nous représente La méthode de transmission à utiliser correspond également au POST ; l'id dans la balise

input correspond à l'attribut for dans la balise label ; >la balise d'entrée sera connectée plus tard. Utilisez PHP

handle.php

<meta charset="utf-8">
<!--其实我的这个写法有点取巧了,先凑合着看-->
<?php 
$student=array(
    array("name"=>"张三","sex"=>"男","age"=>"20"),
    array("name"=>"李丽","sex"=>"女","age"=>"19"),
    array("name"=>"王二","sex"=>"男","age"=>"21")
    );
$str="没有找到这个学生";
$name=$_GET["name"];
foreach ($student as $value) {
    if($value["name"]==$name){
        $str=$value["name"].",".$value["index"].",".$value["sex"].",".$value["age"];
        break;
    };
};
echo $str;
 ?>

Copier après la connexion

index.html

html:

javascript:

<h1>请输入姓名：</h1>
<input type="text" id="name">
<button onclick="submit()">提交</button>
<div id="text"></div>

Copier après la connexion

Remarque :

function submit(){
        
        var name=document.getElementById(&#39;name&#39;).value
               var text=document.getElementById(&#39;text&#39;)
        var XHR=new XMLHttpRequest();
               XHR.open("GET","handle.php?name="+name);
               XHRsend();
               XHR.onreadystatechange=function(){
            text.innerHTML=XHR.responseText
        }

Copier après la connexion

Si quelqu'un met la source code Dans text.innerHTML=XHR.responseText, remplacez-le par alert(XHR.responseTXT). Vous constaterez que la commande sera exécutée plusieurs fois. A ce moment, il est nécessaire de modifier légèrement le code : (Pour la raison, vous la retrouverez plus loin dans l'article)

4 L'exemple a réussi, commençons donc officiellement l'apprentissage~.

   ......
    XHR.onreadystatechange=function(){
             if(XHR.readyState==4){alert(XHR.responseText)};
                                     }
   ......

Copier après la connexion

Avantages d'ajax

Dans notre premier exemple, il est soumis à l'arrière-plan php via le bouton de soumission, puis les données sont traitées.

Cette opération présente un inconvénient, qui est qu'une page entière de données doit être soumise en arrière-plan en même temps.

Par exemple

Si nous nous inscrivons sur un site Web et remplissons le pseudo, le mot de passe, le sexe, l'âge et d'autres informations, après l'avoir soumis, l'arrière-plan vous dira que le pseudo a été utilisé , OK, nous allons le surnom, le mot de passe, le sexe, l'âge, etc., tous réécrits. Lorsque vous le soumettez à nouveau, vous serez informé que le surnom est toujours utilisé. À ce moment-là, vous avez choisi un nom très, très BAS, en pensant qu'il n'y aura pas de problèmes cette fois, n'est-ce pas ? Une fois les résultats soumis, le backend vous indique que votre mot de passe est trop court et que vous devez remplir à nouveau les informations. Eh bien, abandonnez !

Et si vous utilisiez la technologie ajax ? Nous pouvons soumettre les données au backend une par une, ou les soumettre à tout moment et n'importe où. Par exemple, après avoir renseigné votre pseudo, le backend vous indique immédiatement que votre pseudo est utilisé, OK, changez-le simplement ~.

Utilisation d'AJAX

1. Créer AJAX

2 Envoyer une requête au serveur

  var XHR=new XMLHttpRequest();

Copier après la connexion

Il y a trois paramètres dans. open, respectivement Pour la méthode de transmission de données, transférer des fichiers, qu'elle soit asynchrone

XHR.open("GET","handle.php",true);
XHR.send();

Copier après la connexion

Lorsque notre méthode de transmission est POST, nous utiliserons send(). S'il s'agit de la méthode GET, il est recommandé d'écrire le paramètre null. dans send

3.GET vs POST

En un mot : get est plus rapide, post est plus fort

Réponse du serveur - vous transmettez la valeur, mais vous devez le faire. rendre quelque chose à Bar ?

Tutoriel dintroduction à Ajax Démonstration de 30 minutes

5. Répondre aux événements - quand les données peuvent-elles être renvoyées ?

XHR.responseText;
XHR.responseXML;

Copier après la connexion

onreadystatechange 事件
两个属性：
readyState
status

Copier après la connexion

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

Copier après la connexion

XHR.onreadystatechange=function(){
                console.log(XHR.readyState)
                console.log(XHR.responseText)

Copier après la connexion

Tutoriel dintroduction à Ajax Démonstration de 30 minutes

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!