Ajax01

最新推荐文章于 2024-07-17 19:21:45 发布

一只认学的程序猿

最新推荐文章于 2024-07-17 19:21:45 发布

阅读量101

点赞数

分类专栏：前端学习文章标签： ajax js

本文链接：https://blog.csdn.net/weixin_41706310/article/details/108884472

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Ajax是什么

按照比较官方的语言来说，Ajax就是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，。这意味着可以在不重新加载整个网页的情况下，对部分网页进行更新。

在此之前，再来看一下同步与异步。
同步：举个比较生动的例子。我们去饭店吃饭，服务员只为我们一个人服务，首先来点菜，点完菜去做菜，做完菜上菜，等我们吃完结账。在这期间，只与我们发生接触，不会去接触别的顾客，在我们离店后，才会接待下一位顾客，以此类推，这就是同步，显然有点反人类。
异步：异步就比较正常了，还用去饭店吃饭的例子，现在我们日常生活去饭店，就是异步。服务员为我们点完菜，紧接着会为另一位点菜，不会等待我们离店才去接待其他人。

页面中同步和异步的话，就是这个样子：
同步：

js发送请求
等待后台返回数据
处理完数据后，再执行后面的代码。

这种方式很显然有比较不符合常理，如果当次请求时间比较长，代码就会一直是一个堵塞状态。

异步：

js发送请求
不等待后台返回数据，继续执行下面代码
后台什么时候返回数据，什么时候再对数据进行处理

这种方法就正常多了，因此Ajax多用来执行异步操作。

Ajax流程

最基本的流程如下：

创建Ajax对象
设置请求：包括请求发送的地址，请求发送的方式，请求传递的参数数据等。
发送数据。
设置监听事件，监听后台是否返回数据。
处理数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.创建Ajax对象
        var xhr = new XMLHttpRequest();
        //2.设置请求的方法和路径,相对路径与绝对路径都可
        xhr.open('GET', 'http://127.0.0.1:5500/9.30-10.01%20ajax/abc.txt');
        // xhr.open('POST', 'http://127.0.0.1:5500/9.30-10.01%20ajax/abc.txt');
        // 3.发送数据
        xhr.send();
        // xhr.send("username=admin$password=123")
        //4.监听后台是否返回数据
        xhr.onreadystatechange = function() {
            console.log(xhr);
            console.log(xhr.status);
            console.log(xhr.readyState);
            if (xhr.status == 200 && xhr.readyState == 4) {
                console.log('成功获取数据');
                // 5.处理数据
                var res = xhr.response;
                var h1 = document.createElement('h1');
                h1.innerHTML = res;
                document.body.appendChild(h1);
            }
        }
    </script>
</body>
</html>

当请求方式为POST时，要发送的数据放在xhr.send()中。
这里有一些需要注意的地方：
xhr.onreadystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
ajax状态码readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0请求未初始化
1服务器连接已建立
2请求已接收
3请求处理中
4请求已完成，且响应已就绪
当 readyState 等于 4 且状态为 200 时，表示响应已就绪。

一只认学的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax01

Ajax是什么按照比较官方的语言来说，Ajax就是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，。这意味着可以在不重新加载整个网页的情况下，对部分网页进行更新。在此之前，再来看一下同步与异步。同步：举个比较生动的例子。我们去饭店吃饭，服务员只为我们一个人服务，首先来点菜，点完菜去做菜，做完菜上菜，等我们吃完结账。在这期间，只与我们发生接触，不会去接触别的顾客，在我们离店后，才会接待下一位顾客，以此类推，这就是同步，显
复制链接

扫一扫