ajax的用法——基于XMLHttpRequest

最新推荐文章于 2025-06-14 20:41:11 发布

孙朝阳

最新推荐文章于 2025-06-14 20:41:11 发布

阅读量397

点赞数

CC 4.0 BY-SA版权

分类专栏： js node.js 文章标签： ajax XMLHttpRequest

本文链接：https://blog.youkuaiyun.com/chaoyangsun/article/details/79228841

node.js 同时被 2 个专栏收录

12 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍如何使用XMLHttpRequest对象实现简单的GET和POST请求，包括请求的发送、响应处理及服务器端的基本配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用法

1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2、使用xhr的 open() 和 send() 方法发送请求

/*
 * 第一个参数：表示请求方式 总共两种 GET POST
 * 第二个参数：表示请求路径 如标签a的href
 * 第三个参数：表示是否使用异步 可以不写 默认true即开启异步，实际开发中没有使用false的
 */
xhr.open("GET", "/webpath/", true)；
xhr.send();

3、使用回调函数onreadystatechange处理相应结果

/*
 * onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
 * readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
 * status：服务器状态码，常用的如 200：服务器响应正常 404：无法找到请求的资源 500：服务器内部错误
 */
    xhr.onreadystatechange =  function () {
          if (xhr.status == 200 && xhr.readyState == 4) {
            //请求成功 会进入这里 处理逻辑
          }
        };

例子

1、ajax1.html
简单的get带参请求

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a href="/ajax?name=scy">scy</a>
    <p></p>
    <script type="text/javascript">
      const pDom = document.querySelector("p");
      const aDom = document.querySelector("a");
      aDom.addEventListener("click", function (event) {
        event.preventDefault();
        const href = event.target.getAttribute("href");
        let xhr = new XMLHttpRequest();
        xhr.open("GET", href);
        xhr.onreadystatechange =  function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
          pDom.innerText = xhr.response;
        }
      };
        xhr.send();
      });
    </script>
  </body>
</html>

2、ajax2.html
简单POST处理上传文件的用法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="file" multiple>
    <p></p>
    <script type="text/javascript">
      const inputDom = document.querySelector("input");
      const pDom = document.querySelector("p");
      inputDom.addEventListener("change", function (event) {
        const formData = new FormData();
        for (let file of event.target.files) {
          formData.append("mFiles", file);
        }
        formData.append("age", 19);//formdata添加参数
        upload(formData);
      });

      function upload(formData) {
        console.log(formData);
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/ajax/");
        // xhr.responseType = "json";//请求类型 默认字符串型
        xhr.onreadystatechange = function () {
          if (xhr.status == 200 && xhr.readyState == 4) {
            console.log(typeof xhr.response);//string
            //console.log(JSON.stringify(xhr.response));//如果是其他类型如JSON 可以做相应处理
            pDom.innerText = xhr.response;//字符串类型 也可以写成xhr.responseText
          }
        }
        xhr.send(formData);//发送参数数据
      }
    </script>
  </body>
</html>

下面是服务器端的简单处理，用node.js书写：

const router = require("express").Router();
const multer = require("multer");
const upload = multer({
  dest:"upload/"
});
const arrMid = upload.array("mFiles", 4);

//响应ajax1.html的请求
router.get("/", function (req, res) {
  res.send(req.query.name);
});

//响应ajax2.html的请求
router.post("/", arrMid, function (req, res) {
  let obj = {};
  let {age} = req.body;
  obj[age] = req.files;
  res.send(obj);
});

module.exports = router;