JavaScriptAJAX请求实现_JavaScript网络通信技术-js教程-PHP中文网

JavaScriptAJAX请求实现_JavaScript网络通信技术

夜晨

发布： 2025-12-04 20:04:59

原创

133人浏览过

现代前端通过JavaScript实现AJAX请求，主要方式有三种：1. XMLHttpRequest兼容性好，适合老旧浏览器；2. Fetch API基于Promise，语法简洁，适合现代浏览器；3. axios功能强大，支持拦截、自动转换JSON，适合复杂项目。应根据项目需求和兼容性选择，并注重错误处理与用户体验。

javascriptajax请求实现_javascript网络通信技术

使用JavaScript实现AJAX请求是现代前端开发中实现异步网络通信的核心技术。它允许网页在不刷新的情况下与服务器交换数据并更新部分内容，提升用户体验。目前主要有三种方式实现AJAX请求：原生XMLHttpRequest、Fetch API以及借助第三方库如axios。

1. 使用XMLHttpRequest（传统方式）

XMLHttpRequest是最早用于实现AJAX的技术，兼容性好，适用于需要支持老旧浏览器的项目。

示例：

创建一个GET请求获取用户数据：

    const xhr = new XMLHttpRequest();<br>
    xhr.open('GET', '/api/users', true);<br>
    xhr.onreadystatechange = function () {<br>
        if (xhr.readyState === 4 && xhr.status === 200) {<br>
            const data = JSON.parse(xhr.responseText);<br>
            console.log(data);<br>
        }<br>
    };<br>
    xhr.send();

登录后复制

发送POST请求提交表单数据：

立即学习“Java免费学习笔记（深入）”；

    const xhr = new XMLHttpRequest();<br>
    xhr.open('POST', '/api/login', true);<br>
    xhr.setRequestHeader('Content-Type', 'application/json');<br>
    xhr.onload = function () {<br>
        if (xhr.status === 200) {<br>
            console.log(JSON.parse(xhr.responseText));<br>
        }<br>
    };<br>
    xhr.send(JSON.stringify({ username: 'test', password: '123' }));

登录后复制

2. 使用Fetch API（现代方式）

Fetch是ES6之后推荐的原生方法，基于Promise，语法更简洁，支持链式调用。

示例：

GET请求：

    fetch('/api/users')<br>
      .then(response => {<br>
          if (!response.ok) throw new Error('网络错误');<br>
          return response.json();<br>
      })<br>
      .then(data => console.log(data))<br>
      .catch(err => console.error(err));

登录后复制

POST请求：

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

224

查看详情

    fetch('/api/login', {<br>
        method: 'POST',<br>
        headers: { 'Content-Type': 'application/json' },<br>
        body: JSON.stringify({ username: 'test', password: '123' })<br>
    })<br>
      .then(res => res.json())<br>
      .then(data => console.log(data));

登录后复制

3. 使用axios（第三方库）

axios是一个基于Promise的HTTP客户端，功能强大，支持请求拦截、响应拦截、自动转换JSON等，适合复杂项目。

引入方式：

通过CDN或npm安装：

npm install axios

示例：

    axios.get('/api/users')<br>
      .then(response => {<br>
          console.log(response.data);<br>
      })<br>
      .catch(error => {<br>
          console.error(error);<br>
      });

登录后复制

POST请求：

    axios.post('/api/login', {<br>
        username: 'test',<br>
        password: '123'<br>
    })<br>
    .then(res => console.log(res.data));

登录后复制

配置默认基础URL和拦截器：

    axios.defaults.baseURL = 'https://api.example.com';<br><br>
    axios.interceptors.request.use(config => {<br>
        console.log('发送请求前');<br>
        return config;<br>
    });<br><br>
    axios.interceptors.response.use(res => {<br>
        console.log('收到响应');<br>
        return res;<br>
    });

登录后复制