JavaScript【8】异步请求与本地存储

Stringzhua

于 2025-05-22 10:24:09 发布

阅读量671

点赞数 16

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

@Stringzhua

本文链接：https://blog.csdn.net/weixin_60583755/article/details/148133214

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

1.异步请求：

概述：

 指通过前端浏览器往后台服务器发送请求的过程；

请求API的创建:（Ajax 的 XMLHttpRequest）

在IE5,6浏览器版本及以前：

let xhr  = ActiveXObject("Microsoft.XMLHTTP")

目前版本：

let xhr  = new XMLHttpRequest();

实现过程：

1.发送GET请求：参数直接拼接在URL中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
//给提交按钮绑定单击鼠标事件
<button type="submit" onclick="sendGET()">提交GET请求</button>

<script>
 //发送get请求
    function sendGET(){
        let xrh=new XMLHttpRequest();
        //配置请求：参数1：请求方式；参数2:请求路径；参数3：是否开启异步（默认为true）
        xrh.open('get', "http://localhost:8081/garden/sendGet?pageNum=1&pageSize=5&name=zs", true)
        //发送请求
        xrh.send();
        //绑定事件，当请求状态改变时触发
        console.log("请求已发出，等待服务器响应")
         xrh.onreadystatechange=function () {
               /**
             * readyState  XMLHttpRequest的状态
             * 0：请求未初始化
             * 1：服务器链接已建立
             * 2：请求已收到
             * 3：正在处理请求
             * 4：请求已完成 并 响应已准备就绪
             *
             * status返回请求的状态号
             * 200：ok
             * 403
             * 404
             * 500.....
             */
             if(xrh.readyState==4&&xrh.status==200){
                 console.log(xrh.responseText)
             }
         }
    }




</script>
</body>
</html>

 通过测试结果可以看出，在前端发送请求，并在url中携带参数，在请求到达后台服务器后，经过后台服务器处理后，再将响应结果反馈到前端浏览器；

2.发送POST请求：参数为JSON形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
//给提交按钮绑定单击鼠标事件
<button type="submit" onclick="sendPOST()">提交GET请求</button>

<script>
 //发送post请求：参数为JSON形式
      function sendPOST() {
          //创建XMLHttpRequest对象
          let xhr=new XMLHttpRequest();
          //配置 请求的方式  请求的路径  是否是异步的
          xhr.open('POST', "http://localhost:8081/garden/loginIn", true);
          //配置头信息：配置参数传递方式

          //发送JSON数据到后台
          xhr.setRequestHeader("Content-Type","application/json");
          //发送数据
           xhr.send(JSON.stringify({
               userCode: 'admin',
               userPwd: '123456',
               userName: 'ls'
           }));
          console.log("请求已发出，等待服务器响应")
          //绑定事件：
               xhr.onreadystatechange=function () {
                   if(xhr.readyState==4&&xhr.status==200){
                       //将响应数据转成对象形式
                       console.log(JSON.parse(xhr.responseText))
                   }
               }
      }
             
</script>
</body>
</html>

   浏览器发送POST请求，并在请求体中携带JSON形式的参数到后台服务器，后台服务器再接收到请求后，对参数进行处理，并将响应结果反馈到前端浏览器；

   需要注意的是,前端发送请求之前，必须要设置请求头信息，将发送参数的类型设置为JSON形式，否则后端无法接收；

3.发送POST请求：参数为表单形式（键值对）：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
//给提交按钮绑定单击鼠标事件
<button type="submit" onclick="sendPOST()">提交GET请求</button>

<script>
  //发送POST请求：参数为表单类型
    function sendPOST() {
        //创建XMLHttpRequest对象
        let xhr=new XMLHttpRequest();
        //配置 请求的方式  请求的路径  是否是异步的
        xhr.open('POST', "http://localhost:8081/garden/sendPost", true);
        //配置头信息：配置参数传递方式
        // 发送表单数据到后台
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

        //发送数据
        xhr.send('pageNum=1&pageSize=5&name=ls');
        console.log("请求已发出，等待服务器响应")
        //绑定事件：
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText)
            }
        }
    }
</script>
</body>
</html>

浏览器发送POST请求，并在请求体中携带表单形式的参数到后台服务器，后台服务器再接收到请求后，对参数进行处理，并将响应结果反馈到前端浏览器；
需要注意的是,前端发送请求之前，必须要设置请求头信息，将发送参数的类型设置为表单形式，否则后端无法接收；

2.本地存储：

1.概述：

我们之前了解过，在浏览器端可以通过Cookie来存储用户信息，但是对于Cookie来说，它存在着下面一些弊端：

     1.数据的大小： 大小限制在4kb左右；

     2.安全问题 ：在HTTP请求中Cookie是明文现实的（https不是的）；

     3.网络负担大： cookie会被附加在每一个HTTP请求中；

因此在HTML5中引入了新的API（WebStorage）来解决Cookie的存储问题；

2.WebStorage：

1.概述：

  WebStorage 是 HTML5 提供的一种在浏览器端存储数据的机制，用于在客户端（浏览器）存储键值对形式的数据。它提供了比传统的 Cookie 更强大、更灵活的存储功能，主要包括两种存储类型：localStorage 和 sessionStorage。

2.localStorage 和 sessionStorage：

localStorage：

localStorage 中的数据是持久存储的，除非进行手动清除，否则数据会一直存在；因此被用来存储一些需要长期保存的信息，如用户的登录凭证（在设置了适当的安全措施的情况下）、用户的偏好设置（如主题颜色、字体大小等）、应用的配置信息等；

sessionStorage：

sessionStorage中数据的有效期和浏览器会话相同。当用户关闭浏览器窗口或者标签页时，sessionStorage 中存储的数据就会被清除。这使得它适合存储在一个会话期间（即从打开浏览器窗口或标签页开始，到关闭它为止）需要临时保存的数据，如表单数据在页面跳转过程中的临时存储、购物车信息在单次购物会话中的存储等；

3.相关应用：

1.存储/获取数据：setItem（）/getItem()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    //存储数据
    localStorage.setItem("key","value-data")
    //获取数据
    let str=localStorage.getItem('key');
    console.log(str)
</script>
</body>
</html>

            ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732009317675-d9252d58-00c1-4e82-a6a2-2f57fc8d811a.png)

2.删除数据：removeItem（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    //存储数据
    localStorage.setItem("key","value-data")
     //删除数据
    localStorage.removeItem('key')
    console.log(localStorage.getItem('key'))
</script>
</body>
</html>

                   ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732009466554-6d1ba434-7b91-4a4d-87a6-b520fab2eafb.png)

3.清空数据：clear()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    //存储数据
    localStorage.setItem("key","value-data")
     //清空数据
    localStorage.clear()
    console.log(localStorage.getItem('key'))
</script>
</body>
</html>

                       ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732009466554-6d1ba434-7b91-4a4d-87a6-b520fab2eafb.png)

4.遍历数据：

方式1：for循环：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    //存储数据
     localStorage.setItem("key","value-data")
    localStorage.setItem("key1","value-data")
    localStorage.setItem("key2","value-data")
    localStorage.setItem("key3","value-data")
    for (let i = 0; i < localStorage.length; i++) {
           //通过下标获取key
        let key=localStorage.key(i);
        //输出所有的key及value
        console.log(key,localStorage.getItem(key));
    }
</script>
</body>
</html>

               ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732010016623-9b05651c-df77-4f08-bfde-6c9ef3b0f73f.png)

方式2：for-in循环：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //存储数据
    localStorage.setItem("key1","value-data")
    localStorage.setItem("key2","value-data")
    localStorage.setItem("key3","value-data")
    for (let key in localStorage) {
        console.log(key,localStorage.getItem(key));
    }
</script>
</body>
</html>

注意：使用for -in循环遍历时，除了可获取到添加的数据，还会遍历出其他的一些键值对，如下所示：