JaScriptAJAX请求实现_JaScript网络通信技术

技术教程
2025-12-04 20:04:59

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

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

使用J*aScript实现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请求提交表单数据：

    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请求：

华友协同办公自动化OA系统

华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、

0 查看详情华友协同办公自动化OA系统

    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>
    });