深入解析Ajax：掌握JavaScript异步交互的核心秘技

小旺车
252 阅读3分钟

引言

在前端开发中，Ajax（Asynchronous JavaScript and XML）是一个让网页在局部刷新的情况下与服务器进行数据交互的技术，而JavaScript正是其中的核心。

首先让我们来探讨一下Ajax中的两个重要属性：readyState和status。

readyState

先让我们来看看readyState。在使用Ajax发送请求时，XMLHttpRequest对象会有一个readyState属性，它表示请求的状态。

这个属性总共有6个可能的取值，分别是0到5。

当readyState为0时，表示请求未初始化；

为1时，表示服务器连接已建立；

为2时，表示请求已接收；

为3时，表示请求处理中；

为4时，表示请求已完成，且响应已就绪。

为5时，表示请求已取消

所以，当我们想要获取到请求的状态时，可以通过检查readyState来实现哦！

status

接着，让我们再来了解一下status属性。status属性表示响应的HTTP状态码。在Ajax请求的过程中，服务器返回的响应会携带一个HTTP状态码，我们可以通过检查status属性来获取这个状态码，从而判断请求的成功与否。

1xx（信息性状态码）：表示接收的请求正在处理。

2xx（成功状态码）：表示请求正常处理完毕。

3xx（重定向状态码）：需要后续操作才能完成这一请求。

4xx（客户端错误状态码）：表示请求包含语法错误或无法完成。 --- 前端

5xx（服务器错误状态码）：服务器在处理请求的过程中发生了错误。--- 后端

一般来说，200表示请求成功，404表示未找到页面，500表示服务器内部错误，这些状态码都可以通过status来获取。在处理请求结果时，结合status属性可以让我们更好地处理请求的成功与失败情况。

原生Ajax

为了更好地理解Ajax的应用，这里以获取在播电影列表为例。 首先准备一个button按钮，方便我们进行效果的展示。

<button>获取电影列表</button>
<ul class="list">
</ul>

image.png 接下来，直接进入正题——js部分

const btn = document.querySelector("button");
const list = document.querySelector(".list");

btn.addEventListener("click", () => {
    // 朝一个接口发请求，获取数据展示在页面上
    let xhr = new XMLHttpRequest(); // 创建一个ajax实例
    xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true); //配置发送的参数
    xhr.send();
    // 监听请求的过程
    xhr.onreadystatechange = () => {
        // 拿到了后端返回的数据
        if (xhr.readyState === 4 && xhr.status === 200) {
            let movieList = JSON.parse(xhr.responseText).movieList;
            for (let i = 0; i < movieList.length; i++) {
                let li = document.createElement("li");
                li.innerHTML = `
               <h3>${movieList[i].nm}</h3>
               <p>主演：${movieList[i].star}</p>
               <p>上映日期：${movieList[i].rt}</p>
               <p>状态：<span style="color: ${movieList[i].showStateButton.color};">${movieList[i].showStateButton.content}</span></p>
             `;
                list.appendChild(li);
            }
        }
    }
})

image.png

封装方法

除了原生的Ajax方式，现在还有很多现代化的方法可以进行网络请求，比如jQuery和fetch。

jQuery使用方法

jQuery是一个广泛使用的JavaScript库，它封装了许多实用的功能，包括方便的Ajax请求。通过jQuery.ajax()方法，我们可以更便捷地发送Ajax请求，处理响应数据等。

const btn = document.querySelector("button");
const list = document.querySelector(".list");

btn.addEventListener("click", () => {
    $.ajax({
        url: "https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get",
        method: "GET",
        success: (res) => {
            console.log(res.movieList);
            const movie = res.movieList;
            for (let i = 0; i < movie.length; i++) {
                let li = document.createElement("li");
                li.innerHTML = `
       <h3>${movie[i].nm}</h3>
       <p>主演：${movie[i].star}</p>
       <p>上映日期：${movie[i].rt}</p>
       <p>状态：<span style="color: ${movie[i].showStateButton.color};">${movie[i].showStateButton.content}</span></p>
     `;
                list.appendChild(li);
            }
        }
    })
})

fetch使用方法

而fetch是ES6新增的一种网络请求方式，它使用了Promise对象，让我们可以更优雅地处理异步请求。

const btn = document.querySelector("button");
const list = document.querySelector(".list");

btn.addEventListener("click", () => {
    fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username="ww"&age=18')
        .then((res) => {
            console.log(res); // 响应体
            return res.json();
        })
        .then((data) => {
            console.log(data);
            const movie = data.movieList;
            for (let i = 0; i < movie.length; i++) {
                let li = document.createElement("li");
                li.innerHTML = `
       <h3>${movie[i].nm}</h3>
       <p>主演：${movie[i].star}</p>
       <p>上映日期：${movie[i].rt}</p>
       <p>状态：<span style="color: ${movie[i].showStateButton.color};">${movie[i].showStateButton.content}</span></p>
     `;
                list.appendChild(li);
            }
        })
})

结语

总的来说，Ajax是前端开发中一项十分重要的技术，而了解readyState和status这两个属性，以及掌握一些便捷的工具如jQuery和fetch，都可以让我们更高效地进行网络数据交互和前端开发工作。希望本文能帮助大家更深入地理解Ajax，提升前端开发技能！如果你觉得这篇文章有帮助或有所启发，别忘了给我一个鼓励的赞！

avatar
文章
阅读
粉丝