AJAX的三种用法

AJAX
创建一个ajax对象

 const xhr = new XMLHttpRequest();

这就是一个ajxa对象
可以使用xhr对象发送ajax请求

```javascript
  let xhr = new XMLHttpRequest();
          xhr.open("PATCH", todosAPI + "/" + id);
          xhr.setRequestHeader("content-type", "application/json");
          // ****
          let bodyObj = { title: updateIpt.value };
          xhr.send(JSON.stringify(bodyObj));
          xhr.onload = () => {
            if (xhr.status == 200) {
              let resObj = JSON.parse(xhr.responseText);
              console.log(resObj);
              renderList();
              modalDiv.style.display = "none";          }

配置链接信息

> const xhr = new XMLHttpRequest(); // xhr 对象中的 open 方法是来配置请求信息的 //
> 第一个参数是本次请求的请求方式 get / post / put / ... // 第二个参数是本次请求的 url 也叫api接口
> ，可用接口 参见  http://jx.baidu.top 或者 https://music.1234.top/ //
> 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步 // xhr.open('请求方式', '请求地址',
> 是否异步) xhr.open("get",
> "http://jx.1234.top/ap/api/checkname.php?username=1");
> 发送一个带有参数的post请求  // 参数在请求体中--请求体中数据格式 有要求的
>       // ---------------1-参数 x-www-form
>       // ---------------2-参数 form-data--- 上传图片
>       // ---------------3-参数 json数据

方法一

xhr.send(`username=${username}&password=${password}`);
  let username = "zhangsan";
      let password = "";
      let regAPI = "";

      let xhr = new XMLHttpRequest();
      xhr.open("post", regAPI);

      //   1-参数 x-www-form

      //   send之前 设置请求头  content-type 内容类型  --告诉服务器 post 上传的内容是哪种类型
      xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
      //   xhr.send('username=zhangsan&password=123');
      xhr.send(`username=${username}&password=${password}`);

      xhr.onload = function () {
        if (xhr.status == 200) {
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
        }
      };

方法二

  let fd = new FormData();
      // 数据对象中添加键值对
      fd.append("username", username);
      fd.append("password", password);
xhr.send(fd);
  let username = "zhangsan";
      let password = "";
      let regAPI = "";

      let xhr = new XMLHttpRequest();
      xhr.open("post", regAPI);

      //   2-参数 form-data--- 上传图片

      // 创建表达数据对象
      let fd = new FormData();
      // 数据对象中添加键值对
      fd.append("username", username);
      fd.append("password", password);

      // 发送对象
      xhr.send(fd);

      xhr.onload = function () {
        if (xhr.status == 200) {
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
        }
      };

方法二（图片）

fd.append("file", ipt.files[0]);
      let ipt = document.querySelector("input");
      ipt.onchange = function () {
        // ipt.files 获取所有选中图片-- 伪数组--[imgObj,图片对象]
        console.log(ipt.files);
        console.log(ipt.files[0].size);
        console.log(ipt.files[0].size / 1024);
        let uploadAPI = "http://jx.1234.top/upload_file_qn.php";

        let xhr = new XMLHttpRequest();
        xhr.open("post", uploadAPI);

        //   2-参数 form-data--- 上传图片

        // 创建表达数据对象
        let fd = new FormData();
        // 数据对象中添加键值对
        // fd.append('file',文件对象)
        fd.append("file", ipt.files[0]);

        // 发送对象
        xhr.send(fd);

        xhr.onload = function () {
          if (xhr.status == 200) {
            let obj = JSON.parse(xhr.responseText);
            console.log(obj);
            document.querySelector("img").src = obj.file_url;
          }

方法三

let jsonStr = JSON.stringify(obj);
   let todosAPI = "https://swapi-json-server.vercel.app/todos";

      let xhr = new XMLHttpRequest();
      xhr.open("post", todosAPI);

      //  3-参数 json数据
      //   1-设置请求头
      //   2-send（json字符串）

      // ******
      xhr.setRequestHeader("content-type", "application/json");
      let title = "今日晚上还有作业";
      let completed = false;
      // *******上传的json 对象--- json 数组
      let obj = { title, completed };

      // 上传json字符串 {“title”}
      // *********
      let jsonStr = JSON.stringify(obj);
      console.log(jsonStr);
      xhr.send(jsonStr);

      xhr.onload = function () {
        if (/^2\d{2}$/.test(xhr.status)) {
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
        }
      };