526互联

AJAX001——传统请求方式的缺点

发布时间 2023-10-03 07:11:04作者: 猪无名

AJAX(Asynchronous JavaScript And XML)

AJAX代表Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。通过使用AJAX，可以在不刷新整个页面的情况下向服务器发送请求并接收响应数据。

传统的Web应用程序通常需要完整地重新加载页面来获取更新的数据或者进行用户交互。而通过AJAX，可以使用JavaScript在后台与服务器进行异步通信，从而实现部分更新和交互。

AJAX的核心是XMLHttpRequest对象，它使得客户端能够发送HTTP请求并处理服务端的响应。但现在，除了XML之外，也可以使用其他数据格式（例如JSON）来传输数据。

AJAX的优势在于提升用户体验，通过减少页面刷新次数，可以加快应用程序的响应速度，并且可以更加灵活地更新内容。它广泛应用于各种Web应用程序中，包括社交媒体、在线游戏、电子商务等。

AJAX是一种强大的技术，它通过异步通信实现了更加流畅和交互性的Web应用程序。

传统请求及缺点

传统请求的方式

  1. 直接在浏览器地址栏上输入URL

  2. 超连接

    <a href="/old/request">传统请求（超链接）</a>

  3. form表单

    <form action="/old/request" method="get">
    <input type="submit" value="传统请求（form表单）"/>
</form>

  4. JS代码实现

    <input type="button" value="JS代码请求" onclick="sendRequest()">
<script type="text/javascript">
    function sendRequest() {
        // window.location.href="/old/request";
        document.location.href="/old/request";
    }
</script>

传统请求的缺点

假设一种场景：

你正在通过网站观看视频，视频已经缓存很多了。此时你注意到右边的登录提示，你出于好奇，点击了登录或者注册按钮，此时如果网站使用的是传统的请求方式，整个页面将会刷新，缓存的视频也将不复存在，再假如你的网络还不太好，此时，页面就会以白屏的方式展现在你的面前，这是你能接受的吗？

不能接受，这种情况完全不能接受。

想象一种能够接受的方式：

我的点击动作只影响登录那一块的信息，不要影响我看视频，不要全部给我刷新了。

AJAX可以做到，页面的局部刷新效果。

不仅如此,如下图所示：

当点击按钮①后，即使它发送的AJAX请求没有处理完毕，也不会影响按钮②和按钮③发送请求，不会影响用户的体验。

它们就像不同的线程，相互独立，是异步的。、

AJAX概述

  • AJAX其实不能算一门技术，它是多种技术的综合产物。

  • AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。

  • 什么是异步，什么是同步？

    • 假设有t1和t2线程，t1和t2线程并发，就是异步。
    • 假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
    • AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。

  • AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。

  • AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

  • AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）

  • AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。

扫盲（不会的，去看JS）

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

    <script type="text/javascript">
        function sayHello() {
            alert("hello1");
        }
    </script>

    <!--页面上有一个按钮，点击按钮之后，执行一段JS代码。-->
    <input type="button" value="hello1" onclick="sayHello()">

    <!--上面的很简单，但是通过JS代码给按钮绑定事件，这个你会吗？-->
    <input type="button" value="hello2" id="helloButton">

    <script type="text/javascript">
        // 当页面加载完成时触发的事件处理函数
        window.onload = function() {
            // 获取id为"helloButton"的元素，并将其存储在变量helloButton中
            var helloButton = document.getElementById("helloButton");

            // 为helloButton元素的点击事件绑定一个处理函数，当按钮被点击时触发，点几次就执行几次。
            helloButton.onclick = function() {
                //this是发生事件的事件源对象。是按钮发生了鼠标点击事件，那么this代表的就是这个按钮。
                //this.value是获取按钮的value属性值。
                alert(this.value);
            }
        }
// 当网页加载完成时，即所有元素都已经加载完毕时，触发window.onload事件，并执行相应的事件处理函数。
// 通过document.getElementById("helloButton")获取id属性为"helloButton"的元素，该元素通常是一个按钮（或其他可以被点击的元素）。
// 将获取到的元素对象存储在变量helloButton中，以便后续使用。
// 将一个匿名函数赋值给helloButton.onclick属性，当按钮被点击时，触发该匿名函数。
// 在匿名函数中，调用alert()函数弹出一个提示框，并显示文本"helloButton"。

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