原生js ajax post请求

POST 请求
ajax在表单中常用，一般都是使用post方法，ajax请求：前台提交数据→后台查询数据→返回给前台
用法

//1、创建请求对象 XHR              
var xhr = null;           
if(window.XMLHttpRequest){
                                  
  	xhr = new XMLHttpRequest();   //其他浏览器                    
}else if(window.ActiveXObject){
                                   
   xhr = new ActiveXObject('Microsoft.XMLHTTP');  //老版本的IE 5 6                      
}else{
                                   
   alert('该浏览器不支持Ajax网络请求！');                       
}            
//2.绑定监听事件            
xhr.onreadystatechange  = function (){
                   
   if(xhr.readyState == 4 && xhr.status == 200){
                       
   	doresponse(xhr);//返回的数据                
   }            
}           
// 3、POST请求中的默认Content-Type text/plain   
// PHP服务器会拒绝接受请求数据，必须在请求消息发送之前进行修改！            
xhr.open('POST',`login.php`,true); //请求的方式、地址、异步           
// 3.5、post请求设置请求头            
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');            
// 4、发送请求消息           
xhr.send(`uname=${
     username}&upwd=${
     upwd}`);

小案例
使用ajax请求 登陆页面–> 欢迎语句
比如：张三 123456 - 登陆成功后 页面右上角显示 ‘欢迎 张三’。
在服务端拦截并响应：这里用的PHP

<?php
// 设置响应消息头
header('Content-Type:text/plain;charset=UTF-8');
// 模拟数据库中存在的用户
$db = [    ['uname'=>'addmin','pwd'=>'123456'], 
   ['uname'=>'amy','pwd'=>'123456'],    
   ['uname'=>'dyx','pwd'=>'123456']];
//必填项
@$uname = $_REQUEST['uname'] or die('缺少数据');
@