JS ajax初学小案例

乱糟糟的一团

于 2024-09-30 10:50:26 发布

阅读量434

点赞数 12

文章标签：前端 javascript ajax 开发语言

本文链接：https://blog.csdn.net/tic_tac_toe/article/details/142649697

版权

案例要求

一：利用 form 与后端传输数据可行吗？

二、利用上篇新学的ajax技术

案例要求

假设后端返回JSON数据，要求接收并转换成LI列表打印在页面上。如下：

{
    "data": {
        "list": [
          {
              "name": "志愿军：存亡之战",
              "image": "https://assets.maizuo.com/h5/v5/public/app/img/maizuo_padding.7c6a7f11.png"
          },
          {
            "name": "志愿军：存亡之战",
            "image": "https://assets.maizuo.com/h5/v5/public/app/img/maizuo_padding.7c6a7f11.png"
          },
          {
            "name": "志愿军：存亡之战",
            "image": "https://assets.maizuo.com/h5/v5/public/app/img/maizuo_padding.7c6a7f11.png"
          },
          {
            "name": "志愿军：存亡之战",
            "image": "https://assets.maizuo.com/h5/v5/public/app/img/maizuo_padding.7c6a7f11.png"
          },
          {
            "name": "志愿军：存亡之战",
            "image": "https://assets.maizuo.com/h5/v5/public/app/img/maizuo_padding.7c6a7f11.png"
          }
        ]
    }
}

一：利用 form 与后端传输数据可行吗？

1、原理

我们知道，利用HTML表单（Form）与后端服务器传输数据是一种常见的Web开发交互过程。通常涉及以下几个步骤：

创建表单：在前端页面上，使用<form>标签定义表单
设置表单属性：action属性指定表单数据提交的目标地址，method属性指明发送数据的方式，默认为GET（POST可以安全地传输敏感信息）。
提交数据：用户填写并点击提交按钮后，表单数据会被编码成URL查询字符串（GET请求）或HTTP主体（POST请求），然后通过网络发送到指定的后端服务器。
后端接收数据：后端服务器（比如PHP、Node.js、Python Django等）会解析接收到的数据，根据action路径找到对应的处理函数，并进行数据验证、存储或进一步操作。
响应处理：后端处理完数据后返回HTTP响应，可以是一个JSON、XML或其他格式的数据，前端根据响应更新UI或显示处理结果。

我们尝试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
</head>
<body>
    <!-- 能用表单获取后端提供的数据吗?   -->
    <form action="data.json">
        <input type="submit" value="点击获取后端数据">
    </form>

</body>
</html>

2、输出

3、结果

form方式以跳转页面为前提才能看到数据，对于用户体验是很差的。

以下是form传输数据的一些缺点：

数据长度限制：GET 请求的数据量受到 URL 长度限制，超过一定大小可能会导致数据丢失或请求失败。

安全性问题：POST 数据直接暴露在URL中，不够安全，容易被截取。而 GET 请求通常被视为公开，不适合敏感信息传输。

编码复杂性：表单数据需要序列化并附加到请求体上，如果数据结构复杂，处理起来较为繁琐。

不支持文件上传：对于大文件或二进制数据，form-data 提供的文件域不便于处理，需借助额外的插件或技术。

无幂等性：多次提交相同的请求可能导致服务器状态的不确定性和数据冲突，除非后端有特殊机制处理。

依赖于HTTP方法：form默认使用POST，有时可能需要开发者显式设置为GET，这增加了代码的复杂性。

二、利用上篇新学的ajax技术

步骤1

假设要求是设置一个button按钮，点击后刷新到电影列表：

<body>
    <button id="btn">点击查看电影列表</button>
    <script>
        //先测试事件绑定成功，写的没问题
        btn.onclick = function (){
            console.log("事件绑定成功!")  //点击后成功输出
        }
    </script>
</body>

步骤2

通过上篇的学习，利用ajax技术，四步走。

ajax技术的优点

改进用户体验：由于AJAX允许页面局部刷新，用户可以在无需离开当前页面的情况下加载新数据，减少了跳转等待时间，提高了交互性。

减少网络延迟：传统网页刷新会重新加载整个页面，而AJAX只更新部分内容，降低了服务器压力，并减少了用户的感知延迟。

节省带宽：因为只需要下载变化的内容，所以对于数据量小、经常更新的部分，能有效节省用户的网络流量。

可维护性和扩展性：AJAX代码通常与HTML、CSS分离，使得前端开发更易于管理和维护，也方便与其他后端技术集成。

搜索引擎友好：由于AJAX不会改变页面的URL，有利于搜索引擎抓取和索引内容，利于SEO。

异步通信：AJAX采用回调函数或Promise等方式实现异步处理，使得应用程序能够继续执行，提高响应效率。

        btn.onclick = function (){
            //console.log("事件绑定成功!")
            var xhr = new XMLHttpRequest()
            xhr.open("GET","data.json")
            xhr.send()
            xhr.onload = function (){
                //先判断 status 为200，防止路径错误或后端接口有问题
                if (xhr.status === 200){
                    //打印测试能否成功拿到数据
                    console.log(xhr.responseText) //成功拿到数据

                }
            }

        }

这个想必没什么问题，这里为什么用 onload() 方法而不用 onreadystatechange() 方法？

两者区别在于：前者在只有在状态码为4的情况下拿到数据，而后者需要去判断状态码是否为4后才能拿到数据，前者方便些。

步骤3

我们得到的是JSON字符串，但我们想要的是JSON对象，所以利用 JSON.parse() 方法将数据转换成JSON对象：

var jsondata = JSON.parse(xhr.responseText)

步骤4

现在开始渲染界面，将得到的数据传给自创的 render（）函数渲染.

先测试一下能不能如愿拿到对象中的数据

            btn.onclick = function (){
            //console.log("事件绑定成功!")
            var xhr = new XMLHttpRequest()
            xhr.open("GET","data.json")
            xhr.send()
            xhr.onload = function (){
                //先判断 status为200，防止路径错误或后端接口有问题
                if (xhr.status === 200){
                    //console.log(xhr.responseText)
                    var jsondata = JSON.parse(xhr.responseText)
                    render(jsondata)
                }
            }
            function render(josndata){
                //我们的页面中只需要该对象中的name、image属性
                //打印一下看能否成功拿到
                console.log(josndata.data.list)

            }

步骤5

利用 map() 方法映射，将数据映射转变成<li>

        var html = josndata.data.list.map(item => `
                    <li>
                        <img src="${item.image}"/>
                        <div>${item.name}</div>
                    </li>
                `)

步骤6

利用 join() 方法将得到的 <li> 串在一起并赋值给 <ul>，写在页面上

mylist.innerHTML = html.join("")

完整代码

    <button id="btn">点击查看电影列表</button>
    <ul id="mylist">

    </ul>
    <script>
        btn.onclick = function (){
            //console.log("事件绑定成功!")
            var xhr = new XMLHttpRequest()
            xhr.open("GET","data.json")
            xhr.send()
            xhr.onload = function (){
                //先判断 status为200，防止路径错误或后端接口有问题
                if (xhr.status === 200){
                    //console.log(xhr.responseText)
                    var jsondata = JSON.parse(xhr.responseText)
                    render(jsondata)
                }
            }
            function render(josndata){
                //我们的页面中只需要该对象中的name、image属性
                //打印一下看能否成功拿到
                console.log(josndata.data.list)
                var html = josndata.data.list.map(item => `
                    <li>
                        <img src="${item.image}"/>
                        <div>${item.name}</div>
                    </li>
                `)
                //映射li之后，利用join方法将其连在一起赋值给<ul>
                mylist.innerHTML = html.join("")

            }
        }