如何用原生JS实现Ajax的GET POST请求

传统方法的的缺陷

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的html页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

Ajax出现

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Get请求

nbsp;html>
    
        <meta>
        <title></title>
    
    
        <p></p>
        

            用户名:
            密码:                      

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

Post请求

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

注意：
ajax请求是异步请求，所以open的第三个参数应该设置为ture，可是我试过在get请求的时候，false，也就是设置为同步请求，仍然不会报错，但是还是推荐设置为true：进行异步请求。