Ajax异步编程

一、Ajax是什么？

ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。

二、Ajax常用函数和关键字

函数名称/关键字	释义
JSON.parse()	将数据从字符串转换为 JavaScript 对象。
createElement()	通过指定名称创建一个元素
appendChild()	向节点的子节点列表的末尾添加新的子节点
JSON.stringify()	将JavaScript 对象转换为字符串

三、ajax与json实战

1.ajax的GET和POST两种方式

- XMLHttpRequest 是浏览器提供的API,处理异步请求，并非js内置对象
    基本流程：
- GET方式：
    1.创建请求对象：'new XMLHttpRequest()'
    2.监听请求回调：'onreadystatechange'
    3.初始化请求参数：'open(请求类型，请求地址，是否异步)'
    4.发送请求：'send()'
- POST方式：
    1.创建请求对象：'new XMLHttpRequest()'
    2.监听请求回调：'onreadystatechange'
    3.初始化请求参数：'open(请求类型，请求地址，是否异步)'
    4.设置请求头：'setRequestHeader()'
    5.准备请求参数：可选'var data = ...'
    6.发送请求：'send(data)'
- POST用FormData来组织数据
    1.创建请求对象：'new XMLHttpRequest()'
    2.监听请求回调：'onreadystatechange'
    3.初始化请求参数：'open(请求类型，请求地址，是否异步)'
    4.使用FormData来组织数据：'var data = new FormData(form);'
    5.发送请求：'send(data)'

2.ajax实战

demo7.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax-json-formdata</title>
  </head>
  <body>
    <form action="" method="post" onsubmit="return false">
      <input
        type="email"
        name="email"
        placeholder="XXX@xxx.com"
        required
        autofocus
      />
      <input type="password" name="password" placeholder="密码" required />
      <button>提交</button>
    </form>
  </body>
  <script>
    //1.先获取表单和表单按钮
    var form = document.querySelector("form");
    var btn = document.querySelector("form button");
    //2.给按钮绑定事件
    btn.onclick = function () {
      //1.创建ajax对象
      var xhr = new XMLHttpRequest();
      //2.监听请求
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
          var res = JSON.parse(xhr.responseText);
          console.log(res);
          switch (res.status) {
            case 0:
            case 1:
              error = res.message;
              break;
            default:
              error = "未知错误";
          }
          //将error信息渲染到页面中
          var span = document.createElement("sapn");
          span.innerHTML = error;
          span.style.color = "red";
          form.appendChild(span);
        }
      };
      //3.初始化请求参数
      xhr.open("POST", "test5.php");
      //4.使用FormData来组织数据，最终仍是以表单数据方式发送
      var data = new FormData(form);
      //data.append("email",form.email.value);
      //data.append("password",form.password.value);
      //5.发送请求，发送到服务器上的是json格式
      xhr.send(data);
    };
  </script>
</html>

test5.php

<?php
//print_r($_POST);
$users = [
    ['id'=>1,'email'=>'peter@php.cn','password'=>'123'],
    ['id'=>2,'email'=>'wang@php.cn','password'=>'asw'],
    ['id'=>3,'email'=>'li@php.cn','password'=>'753']
];
$a = 0;
$b = '验证失败';
foreach($users as $user)
{
    if($user['email'] == $_POST['email'] && $user['password'] == $_POST['password']){
        $a = 1;
        $b = '验证通过';
    }
}
echo json_encode(['status'=>$a,'message'=>$b]);