How to implement Ajax GET POST request using native JS-JS Tutorial-php.cn

How to implement Ajax GET POST request using native JS

一个新手

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

Original

3118 people have browsed it

Defects of traditional methods

Traditional web interaction is that the user triggers an http request to the server, and then after the server receives it, it responds to the user and returns A new page, whenever the server processes a request submitted by the client, the client can only wait idle, and even if it is only a small interaction and only needs to get a simple piece of data from the server, a complete page must be returned. HTML page, and the user has to waste time and bandwidth to re-read the entire page every time. This approach wastes a lot of bandwidth. Since each application interaction requires sending a request to the server, the application's response time depends on the server's response time. This results in a user interface that is much less responsive than native apps.

The emergence of Ajax

The emergence of ajax just solves the shortcomings of traditional methods. AJAX is a technology for creating fast, dynamic web pages. AJAX enables web pages to update asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a web page can be updated without reloading the entire page.

Get request

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

Copy after login

Post request

How to implement Ajax GET POST request using native 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;
}
?>

Copy after login

Note:
ajax request is Asynchronous request, so the third parameter of open should be set to true, but I tried to set it to false during the get request, that is, set it to a synchronous request, and still no error will be reported, but it is still recommended to set it to true: make an asynchronous request.

The above is the detailed content of How to implement Ajax GET POST request using native JS. For more information, please follow other related articles on the PHP Chinese website!