千峰学习【Ajax】总结

最新推荐文章于 2023-02-15 07:31:02 发布

赤焰梦

最新推荐文章于 2023-02-15 07:31:02 发布

阅读量1.2k

点赞数 1

分类专栏： HTML/CSS/Javascript 文章标签：学习 ajax javascript

本文链接：https://blog.csdn.net/m0_49442965/article/details/128759238

版权

本文详细介绍了Ajax的基础知识，包括同步与异步、状态码、创建请求对象。区分了onload与onreadystatechange的使用场景，对比了form表单与Ajax请求的不同。同时，通过实例讲解了GET、POST、PUT、DELETE等请求方式，以及如何封装Ajax函数。此外，还讨论了回调地狱问题及其在实际应用中的挑战。

摘要由CSDN通过智能技术生成

1.同步和异步

在这里插入图片描述

2.Ajax状态码

在这里插入图片描述

3.创建对象，发送请求

在这里插入图片描述

<script>
    //1.创建XHR： new XMLHttpRequest():
    var xhr = new XMLHttpRequest();
    // console.log(xhr);

    //2，配置open(请求方式，请求地址，是否异步(默认为异步))  localhost:本机域名。127.0.0.1：本机ip
    xhr.open("GET", "http://localhost:5500/基础内容/1.json");
    // xhr.open("GET", "http://localhost:5500/基础内容/1.txt");

    //3.send
    xhr.send();

    //4.接受数据，注册一个事件
    xhr.onreadystatechange = function () {
     
      console.log(xhr.readyState)
      //一般来说，成功连接状态码是200，判断：xhr.status===200,也可以用正则来匹配200-299:/^2\d{2|$/.test(xhr.status)
      if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
     
        // console.log("数据解析完成", xhr.responseText);
        // console.log(JSON.parse(xhr.responseText));
        //确定连接成功，把内容显示到页面
        document.write(xhr.responseText);
      } else if (xhr.status === 404 && xhr.readyState === 4) {
     
        console.error("没有找到这个页面");
        location.href = "404界面.html";
      }
    };
  </script>

1.json：

{
    "name":"HEFAN"
}

在这里插入图片描述

在这里插入图片描述
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest.responseText
当处理一个异步 request 的时候，尽管当前请求并没有结束，responseText 的返回值是当前从后端收到的内容。

当请求状态 readyState 变为 XMLHttpRequest.DONE (4)，且 status 值为 200（“OK”）时，responseText 是全部后端的返回数据

Ajax 两种请求方式的区别onload和onreadystatechange

XMLHttpRequest对象有一个属性readyState，将其(xhr.readyState)打印后发现。进入onreadystatechange请求方式中时，可以打印其状态为2，状态为3，状态为4。

进入onload之后，只出现了状态码4。也就是说，只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了
所以，这种写法更加简单：

// 另一种简单写法：
    xhr.onload = function () {
      // console.log(xhr.responseText)
      if (xhr.status === 200) {
        // document.write(xhr.responseText)
        console.log(JSON.parse(xhr.responseText));
      } else if (xhr.status === 404) {
        console.error("没有找到这个页面");
        location.href = "404界面.html";
      }
    };

JSON.parse方法：
在这里插入图片描述

form和Ajax的不同

在这里插入图片描述

4.请求方式

GET
POST
PUT
DELECT
在这里插入图片描述

json-serve
node.js的安装以及json-server的使用
写一个json文件：

{
  "users": [
    {
      "username": "hahah",
      "password": "0900",
      "id": 1
    },
    {
      "username": "her",
      "password": "345",
      "id": 3
    },
    {
      "name": "patch",
      "value": "77",
      "id": 4,
      "password": "000"
    },
    {
      "username": "her",
      "password": "345",
      "id": 5
    }
  ],
  "list": [
    "1",
    "2",
    "3"
  ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myget">GET</button>
    <button id="mypost">POST</button>
    <button id="myput">PUT</button>
    <button id="mypatch">PATCH</button>
    <button id="mydelete">DELETE</button>

</body>
<script>
    // 查找
    myget.onclick = function(){
     
        var xhr=new XMLHttpRequest();
        //全部查找
        // xhr.open("GET", "http://localhost:3000/users")
        // 精准查找
        xhr.open("GET", "http://localhost:3000/users?username=her")
        //用id查找也可以
        // xhr.open("GET", "http://localhost:3000/users?id=4")
        
        xhr.onload=function() {
     
            if (xhr.status === 200) {
     
                console.log(JSON.parse(xhr.responseText))
            }
        }
        xhr.send();
    }
    // 插入
    mypost.onclick = function(){
     
        var xhr=new XMLHttpRequest();
        xhr.open("POST", "http://localhost:3000/users")
        xhr.onload=function() {
     
            if (/^2\d{2}|$/.test(xhr.status) ) {
     
                console.log(JSON.parse(xhr.responseText))
            }
        }
        //提交信息  支持两种格式：name=hefan&age=21 或者   {"name":"hefan"}
        //告知传输数据格式：
        // xhr.setRequestHeader("Content-Type","application/x-ww-form-urlencoded")
        // xhr.send(`username=xiaoming && password=3456787`);
        xhr.setRequestHeader(