So implementieren Sie eine Ajax-GET-POST-Anfrage mit nativem JS-js-Tutorial-php.cn

So implementieren Sie eine Ajax-GET-POST-Anfrage mit nativem JS

一个新手

Freigeben： 2017-09-27 13:15:09

Original

3092 Leute haben es durchsucht

Mängel herkömmlicher Methoden

Traditionelle Webinteraktion besteht darin, dass der Benutzer eine http-Anfrage an den Server auslöst und der Server diese dann empfängt und dem Benutzer antwortet und gibt eine neue Seite zurück. Immer wenn der Server eine vom Client übermittelte Anforderung verarbeitet, kann der Client nur im Leerlauf warten, und selbst wenn es sich nur um eine kleine Interaktion handelt und nur ein einfaches Datenelement vom Server abgerufen werden muss, wird eine vollständige Seite erstellt muss eine HTML-Seite zurückgegeben werden, und der Benutzer muss jedes Mal Zeit und Bandbreite verschwenden, um die gesamte Seite erneut zu lesen. Dieser Ansatz verschwendet viel Bandbreite. Da jede Anwendungsinteraktion das Senden einer Anfrage an den Server erfordert, hängt die Antwortzeit der Anwendung von der Antwortzeit des Servers ab. Dies führt zu einer Benutzeroberfläche, die viel weniger reagiert als native Apps.

Ajax erscheint

Das Aufkommen von Ajax behebt lediglich die Mängel traditioneller Methoden. AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten. AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem im Hintergrund kleine Datenmengen mit dem Server ausgetauscht werden. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Anfrage erhalten

<!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>

Nach dem Login kopieren

Anfrage posten

So implementieren Sie eine Ajax-GET-POST-Anfrage mit nativem JS

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;
}
?>

Nach dem Login kopieren

Hinweis:
Die Ajax-Anfrage ist eine asynchrone Anfrage, daher sollte der dritte Parameter von open auf „true“ gesetzt werden. Ich habe jedoch versucht, ihn während der Get-Anfrage auf „false“ zu setzen, also auf eine synchrone Anfrage zu setzen. Es wird jedoch weiterhin empfohlen, es auf „true“ zu setzen: Stellen Sie eine asynchrone Anfrage.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Ajax-GET-POST-Anfrage mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!