AJAX本质、核心概念、实现方式、及具体用法

AJAX（技术思想/方案） = 异步数据交互 + 局部页面刷新
实现AJAX的工具/手段：XMLHttpRequest（原生）、jQuery AJAX（封装）、axios（现代封装）、fetch（现代原生）

/**
 * 原生XMLHttpRequest实现AJAX（翻译请求）
 * （这是最早期的AJAX实现，属于AJAX范畴）
 */
export function ajaxByXHR(query, from = 'auto', to = 'en') {
  return new Promise((resolve, reject) => {
    // 1. 前置校验
    if (!query?.trim()) {
      reject(new Error('请传入有效翻译文本'));
      return;
    }

    // 2. 创建XHR实例（AJAX的核心载体）
    const xhr = new XMLHttpRequest();

    // 3. 配置请求（异步请求：第三个参数为true）
    const url = 'http://localhost:3000/api/translate/baidu';
    xhr.open('POST', url, true); // 异步是AJAX的核心特性

    // 4. 设置请求头（JSON格式）
    xhr.setRequestHeader('Content-Type', 'application/json');

    // 5. 监听异步响应（onreadystatechange是异步回调的核心）
    xhr.onreadystatechange = function () {
      // readyState=4：请求完成（异步响应接收完毕）
      if (xhr.readyState === 4) {
        // 状态码200-299：请求成功
        if (xhr.status >= 200 && xhr.status < 300) {
          try {
            // 早期用XML解析，现在用JSON解析
            const data = JSON.parse(xhr.responseText);
            if (data.code !== 0) {
              reject(new Error(data.msg || '翻译失败'));
              return;
            }
            // 仅更新页面局部内容（AJAX的局部刷新特性）
            document.getElementById('translate-result').innerText = data.data.text;
            resolve(data.data);
          } catch (err) {
            reject(new Error('响应解析失败：' + err.message));
          }
        } else {
          reject(new Error(`请求失败：${xhr.status} ${xhr.statusText}`));
        }
      }
    };

    // 6. 监听超时/错误
    xhr.ontimeout = () => reject(new Error('请求超时'));
    xhr.onerror = () => reject(new Error('网络异常'));

    // 7. 发送异步请求
    xhr.send(JSON.stringify({ query, from, to }));
  });
}

<!-- CDN引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

/**
 * jQuery AJAX实现翻译请求（经典AJAX方案）
 */
function ajaxByJQuery(query, from = 'auto', to = 'en') {
  if (!query?.trim()) {
    alert('请传入有效翻译文本');
    return;
  }

  // $.ajax()是jQuery封装的AJAX核心方法
  $.ajax({
    url: 'http://localhost:3000/api/translate/baidu', // 请求地址
    method: 'POST', // 请求方法
    dataType: 'json', // 预期响应数据格式（自动解析JSON）
    contentType: 'application/json', // 请求体格式
    data: JSON.stringify({ query, from, to }), // 请求数据
    timeout: 8000, // 超时时间
    async: true, // 开启异步（默认true，AJAX核心特性）
    // 异步成功回调（局部刷新页面）
    success: function (data) {
      if (data.code === 0) {
        $('#translate-result').text(data.data.text); // 局部更新DOM
        console.log('jQuery AJAX翻译成功：', data.data);
      } else {
        alert('翻译失败：' + data.msg);
      }
    },
    // 异步失败回调
    error: function (xhr, status, error) {
      console.error('jQuery AJAX失败：', status, error);
      alert('请求失败，请稍后重试');
    }
  });
}

// 调用
// ajaxByJQuery('你好世界', 'auto', 'en');

// $.get()：简化GET请求
$.get('/api/public/info', function (data) {
  $('#info').html(data.content);
});

// $.post()：简化POST请求
$.post('/api/translate/baidu', { query: '你好', from: 'auto', to: 'en' }, function (data) {
  $('#translate-result').text(data.data.text);
}, 'json');

import axios from 'axios';

/**
 * axios实现现代AJAX（翻译请求）
 * （axios是AJAX思想的现代封装，保留异步+局部刷新核心）
 */
export async function ajaxByAxios(query, from = 'auto', to = 'en') {
  if (!query?.trim()) {
    throw new Error('请传入有效翻译文本');
  }

  try {
    // 异步请求（await体现异步特性）
    const response = await axios.post(
      'http://localhost:3000/api/translate/baidu',
      { query, from, to },
      { timeout: 8000 }
    );

    const data = response.data;
    if (data.code === 0) {
      // 局部刷新页面（AJAX核心特性）
      document.getElementById('translate-result').innerText = data.data.text;
      return data.data;
    } else {
      throw new Error(data.msg || '翻译失败');
    }
  } catch (error) {
    console.error('axios AJAX失败：', error.message);
    window.$message?.error('请求失败');
    throw error;
  }
}

/**
 * fetch实现现代AJAX（原生Promise化，无需依赖）
 */
export async function ajaxByFetch(query, from = 'auto', to = 'en') {
  if (!query?.trim()) {
    throw new Error('请传入有效翻译文本');
  }

  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 8000);

  try {
    // 异步请求（Promise化异步）
    const response = await fetch('http://localhost:3000/api/translate/baidu', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query, from, to }),
      signal: controller.signal
    });

    clearTimeout(timeoutId);

    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const data = await response.json();
    if (data.code === 0) {
      // 局部刷新页面
      document.getElementById('translate-result').innerText = data.data.text;
      return data.data;
    } else {
      throw new Error(data.msg || '翻译失败');
    }
  } catch (error) {
    console.error('fetch AJAX失败：', error.message);
    window.$message?.error('请求失败');
    throw error;
  }
}