原生JS实现Ajax异步交互

RyanWu0430

墨衍会员 · AI 创作全网分发码龄5年

关注

原创最新推荐文章于 2026-04-08 21:52:50 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

原生JS实现Ajax应该是前端开发人员在学习ajax中的第一步，这篇博客需要一些必要的前置知识，会更容易理解：

JS基础，JS DOM操作，JS事件，ES6（熟悉更好）

什么是AJAX

AJAX：全称Asynchronous Javascript And XML，也就是异步的JS和XML的意思。JS我们熟悉，XML可能不熟悉。

XML：XML文件和我们的HTML很类似，都是使用标签结构，但是XML是用来存放数据和传输数据的，且没有像<div>,<a>这样的预定义标签，全部是用户的自定义标签。然而现在已经基本被JSON文件所取代。

Ajax的优缺点：

优点：1. 无需刷新页面与服务器进行通信
2. 允许根据用户事件来更新网页部分内容

缺点：1. 没有浏览历史，不能回腿
2. 存在跨域问题，必须同源
3. SEO不友好

HTTP协议

非常重要的服务器和客户端信息交互的网络传输协议，大致流程是：

1. 客户端向服务器发出HTTP请求，发送请求报文

2. 服务器收到请求报文，将响应报文返回给客户端

3. 客户端收到响应报文的数据，将数据渲染到web上

请求报文和响应报文格式

    请求报文：
    行  GET/POST URL HTTP版本
    头  Host: abc.com
        Cookie: name=abc
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
    空行
    体  (get为空，post为请求体) username=admin%password=admin

    响应报文:
    行  HTTP/1.1 状态码 状态码解释 (200 OK; 404 Not Found)
    头  Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
    空行
    体  <html>
            <head>
            </head>
            <body>
            </body>
        </html>

NodeJS和express框架安装

为了实现简单的前后端异步交互，我们需要用到nodejs搭建一个简易的服务端，便于ajax的理解。如果你完全没有接触过nodejs，无需担心，这里并不需要深入的nodejs知识，只需要跟着步骤来搭建一个简易的服务器就好。

首先百度/谷歌搜索nodejs官网，出来是这个样子

点击左下角的绿框下载并安装即可，这样电脑里就有了nodejs的开发环境。

接着在喜欢的位置创建一个文件夹，用来存储我们的html文件和服务器js文件。接着可以在我们的文件夹内安装express框架了。

1. 初始化node：打开vscode，找到目标文件夹，右键点击打开终端，输入npm init --yes并回车，初始化我们的环境。会得到以下的信息，并且文件夹内多了一个JSON文件。（这里的npm是nodeJS自带的包管理工具）

2. 输入npm i express，回车，就开始安装了。如果出现报错说没有权限，windows系统请用管理员身份打开vscode，mac系统在刚才的终端中输入sudo -s回车，输入密码，就可以进入管理员权限，再输入npm i express即可，安装完后，长这样：

2. express安装完毕后，我们再在刚才的文件夹创建一个新的文件夹，用来存放我们的代码。接着在里面创建一个JS文件，打开，测试一下我们的express，搭建一个最基础的服务器。

JS文件中输入：

//引入express
const express = require('express');

//创建应用对象
const app = express();

//创建路由规则
app.get('/server', (request, response) => {
    //设置响应
    response.send('HELLO EXPRESS')
});

//监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动，端口监听中")
})

保存文件，然后打开当前文件夹的终端，输入node 此js文件名，回车即可，这里我们能看到我们的服务已经启动。

3. 进入本地端口查看一下我们的服务器，打开一个新web页面，输入localhost:8000/server，就可以看到我们的HELLO EXPRESS。

4. 退出当前的服务器，直接在终端按ctrl+c即可（不退出的话，之后的server如果采用同样的端口号，会出现端口占用的情况）

AJAX实现GET请求案例

GET和POST的区别，如果熟悉计算机网络和HTTP协议的同学，应该很清楚，这里不过多解释，这里我们用GET作为一个ajax请求的案例。

假设，我们有一个需求，当点击页面上的一个按钮之后（事件），再向我们的服务器发送请求，将后台的数据返回至前端。

先搭建服务器并在终端输入node server.js（服务器文件名）启动服务：

//引入express
const express = require('express');

//创建应用对象
const app = express();

// 创建路由规则
app.get('/server', (request, response) => {
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    response.send('HELLO AJAX')
});
//监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动，端口监听中")
})

搭建前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: pink 1px solid;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        const result = document.querySelector('#result');
        btn.addEventListener('click', () => {
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务器返回的结果
            xhr.addEventListener('readystatechange', () => {
                //判断 服务端是否返回了所有结果
                if (xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    if(xhr.status >= 200 && xhr.status < 300){
                        //将返回结果渲染到页面
                        result.innerHTML = xhr.response;
                    }
                }
            })
        })
    </script>
</body>
</html>

然后打开我们的html页面，点击按钮，成功拿到服务端数据！

JSON文件的Ajax应用

需要先将数据转换为JSON字符串格式，利用JSON.stringfy方法。

现在我们换一下需求，想要按下键盘就返回数据，并遍历数据里的每个属性值。服务端我们新建一个json-server.js文件。

const express = require('express');
const app = express();
app.get('/json-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin','*')
    const data = {
        name: 'Ryan',
        age: '23',
        hobby: 'Gaming'
    }
    //将数据转换为JSON的字符串格式
    let str = JSON.stringify(data);
    response.send(str);
})
app.listen(8000,() => {
    console.log("服务端已启动");
})

然后前端页面把body内稍为修改一下：

<body>
    <div id="result"></div>
    <script>
        window.addEventListener('keydown', () => {
            const xhr = new XMLHttpRequest();
            //设置响应体类型
            xhr.responseType = 'json';
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            xhr.send();
            xhr.addEventListener('readystatechange', () => {
                if (xhr.readyState === 4){
                    if (xhr.status >= 200 && xhr.status < 300){
                        //手动数据转换
                        // let data = JSON.parse(xhr.response)
                        // result.innerHTML = data.name;
                        //自动数据转换(需要设置响应体类型为json)
                        // result.innerHTML = xhr.response.name;
                        if (result.innerHTML) return;
                        for (let key in xhr.response){
                            result.innerHTML += xhr.response[key] + "</br>";
                        }
                    }
                }
            })
        })
    </script>
</body>

这样就可以把我们的数据传回前端啦～