recherche

Maison >interface Web >js tutoriel >Comment implémenter la requête Ajax GET POST à ​​l'aide de JS natif

Comment implémenter la requête Ajax GET POST à ​​l'aide de JS natif

一个新手
一个新手original
2017-09-27 13:15:093092parcourir


Défauts des méthodes traditionnelles

L'interaction Web traditionnelle est que l'utilisateur déclenche une requête http au serveur, puis après que le serveur l'a reçue, il répond à l'utilisateur et renvoie Une nouvelle page, chaque fois que le serveur traite une demande soumise par le client, le client ne peut qu'attendre inactif, et même s'il ne s'agit que d'une petite interaction et n'a besoin que d'obtenir une simple donnée du serveur, une page complète doit être renvoyée sur la page HTML, et l'utilisateur doit perdre du temps et de la bande passante pour relire la page entière à chaque fois. Cette approche gaspille beaucoup de bande passante. Puisque chaque interaction avec l'application nécessite l'envoi d'une requête au serveur, le temps de réponse de l'application dépend du temps de réponse du serveur. Cela se traduit par une interface utilisateur beaucoup moins réactive que les applications natives.

Ajax apparaît

L'émergence d'ajax résout tout simplement les défauts des méthodes traditionnelles. AJAX est une technologie permettant de créer des pages Web rapides et dynamiques. AJAX permet aux pages Web de se mettre à jour de manière asynchrone en échangeant de petites quantités 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.

Obtenir la demande

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="showInfo"></p>
        <form id="form">
            用户名:<input type="text" name="username" id="username"/><br />
            密码:<input type="password" name="password" id="passowrd" />
            <input type="button" value="提交" id="btn" />
        </form>
        <script type="text/javascript">
            window.onload=function(){
                var btn=document.getElementById("btn");
                btn.onclick=function(){
                var username=document.getElementById("username").value;                
                var password=document.getElementById("passowrd").value;                
                var xhr=null;                
                if(window.XMLHttpRequest){
                    xhr=new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
                }                var url=&#39;new_file.php?username=&#39;+username+&#39;&password=&#39;+password;
                xhr.open(&#39;get&#39;,url,true);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){                        if(xhr.status==200){                            var data=xhr.responseText;                            if(data==1){
                                document.getElementById("showInfo").innerHTML=&#39;提交失败&#39;;
                            }else if(data==2){
                                document.getElementById("showInfo").innerHTML=&#39;提交成功后&#39;;
                            }
                        }
                    }
                }
                    xhr.send(null);
                }
            }        </script>
    </body></html>

Publier la demande

Comment implémenter la requête Ajax GET POST à ​​laide de JS natif

new_file.php

<?php 
//$username = $_GET[&#39;username&#39;];
//$password = $_GET[&#39;password&#39;];$username=$_POST[&#39;username&#39;];
  $password=$_POST[&#39;password&#39;];
  if($username == &#39;admin&#39; && $password == &#39;123&#39;){    
      echo 2;
}else{    
      echo 1;
}
?>

Remarque :
La requête Ajax est une requête asynchrone, donc le troisième paramètre d'open doit être défini sur true. Cependant, j'ai essayé de le définir sur false lors de la requête get, c'est-à-dire de le définir sur une requête synchrone. Il n'y aura toujours pas d'erreur. mais il est quand même recommandé de le mettre à true : Faire une requête asynchrone.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment créer le serveur Web le plus simple en utilisant PythonArticle suivant：Comment créer le serveur Web le plus simple en utilisant Python

Articles Liés

Voir plus