Heim > Artikel > Web-Frontend > So implementieren Sie eine Ajax-GET-POST-Anfrage mit nativem JS

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

一个新手Original: 2017-09-27 13:15:093079Durchsuche

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>

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie den einfachsten Webserver mit PythonNächster Artikel：So erstellen Sie den einfachsten Webserver mit Python

In Verbindung stehende Artikel

Mehr sehen