JS - Ajax基础

1.Ajax-GET

 //1.创建Ajax对象
 var xhr= new XMLHttpRequest();
//2.监听请求
xhr.onreadystatechange = function(){
   if(xhr.readyState ===4 && xhr.status ===200){
      console.log(xhr.responseText);
   }
};
//3.初始化请求参数
//  xhr.open(请求类型，请求URL， 是否异步);
xhr.open("GET" ,"test.php",true);
//4.发送请求
xhr.send(null);

//test.php 代码
// 创建数组
$user['name'] = 'laochen';
$user['email'] = 'laochen@qq.cpm';
// JSON 编码返回
echo json_encode($user);

---

Ajax-post

方法一：
  //1.创建Ajax对象
    var xhr= new XMLHttpRequest();
//2.监听请求
   xhr.onreadystatechange = function(){
   if(xhr.readyState ===4 && xhr.status ===200){
     console.log(xhr.responseText);
   }
};
//3.初始化请求参数
      xhr.open("POST" ,"test2.php",true);
//4.设置请求头，模拟表单类型的数组进行发送
     xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//5.创建对象
 var user = {
     email : "laochen@qq.com",
     password :"555666",
     };
 var date = JSON.stringify(user);
//6.发送请求
 xhr.send(date);
方法二：
//json格式 需要设置utf-8
  //1.创建Ajax对象
    var xhr= new XMLHttpRequest();
//2.监听请求
   xhr.onreadystatechange = function(){
   if(xhr.readyState ===4 && xhr.status ===200){
     console.log(xhr.responseText);
   }
};
//3.初始化请求参数
      xhr.open("POST" ,"test2.php",true);
//4.设置请求头，模拟表单类型的数组进行发送
     xhr.setRequestHeader("content-type", " "application/json;charset=utf-8"");
//5.创建对象
 var user = {
     email : "laochen@qq.com",
     password :"555666",
     };
 var date = JSON.stringify(user);
//6.发送请求
 xhr.send(date);

方法一：
$data = key($_POST);
//将$date 转为php可以处理的数据
//对象格式
$user = json_decode($data);
print_r($user);
//数组格式
$user = json_decode($data, true);
print_r($user);
方法二：
$data = file_get_contents('php://input');
$user = json_decode($data);
print_r($user);

FormData

1.可直接序列化表单数据，可直接被 Ajax 识别，2.所以可以不设置请求头，3.除了表单数据外，也可用于普通数据

//1.创建Ajax对象
   var xhr= new XMLHttpRequest();
//2.监听请求
  xhr.onreadystatechange = function(){
   if(xhr.readyState ===4 && xhr.status ===200){
      console.log(xhr.responseText);
    }
};
//3.初始化请求参数
  xhr.open("POST" ,"test4.php",true);
//FormData
  var data = new FormData();
  data.append("username","admin");
  data.append("password","555666");
//5.发送请求
 xhr.send(data);

//test4.php 代码
// 可以直接获取到值
   print_r($_POST);

FormData 用户登陆验证

 <p>邮箱登陆</p>
    <!-- onsubmit="return false": 禁用表单的默认提交,改为自定义的Ajax提交 -->
    <form
      action=""
      method="POST"
      style="display: grid; gap: 15px;"
      onsubmit="return false"
    >
      <input
        type="email"
        name="email"
        placeholder="email@email.com"
        required
        autofocus
      />
      <input type="password" name="password" placeholder="******" required />
      <button>提交</button>
    </form>
    <script>
      // 1. 获取表单和按钮
      var form = document.querySelector("form");
      var btn = document.querySelector("form button");
      // 2.钮绑定点击事件,进行Ajax请求
      btn.onclick = function () {
        // 1. 创建Ajax对象
        var xhr = new XMLHttpRequest();
        // 2. 监听请求
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
            // 将jsonl转js对象
            var res = JSON.parse(xhr.responseText);
            console.log(res);
            switch (res.status) {
              case 0:
              case 1:
                error = res.message;
                break;
              default:
                error = "未知错误";
            }
            // 将提示显示到表单中
            var span = document.createElement("span");
            span.innerHTML = error;
            span.style.color = "red";
            form.appendChild(span);
          }
        };
        // 3. 初始化请求参数
        xhr.open("POST", "test4.php", true);
        // FormData
        var data = new FormData(form);
        data.append("login_time", new Date().getTime());
        // 5. 发送请求
        xhr.send(data);
      };
      // 清除提示信息
      var inputs = document.querySelectorAll("input");
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].oninput = function () {
          if (btn.nextElementSibling !== null)
            form.removeChild(btn.nextElementSibling);
        };
      }
    </script>

$pdo = new PDO('mysql:host=localhost;dbname=phpedu', 'root', 'root');
$stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `email`=? AND `password`=? LIMIT 1");
$stmt->execute([$_POST['email'], md5($_POST['password'])]);
$user = $stmt->fetch(PDO::FETCH_NUM);
if ($user[0] == 1){
    echo json_encode(['status'=>1, 'message'=>'验证通过']);
}
else {
    echo json_encode(['status'=>0, 'message'=>'邮箱或密码错误']);
}

总结：没有彻底理解，但GET,POST,FormData的步骤都可以自己写出来了。