如何在没有jQuery的情况下进行AJAX调用？

在没有jQuery的情况下进行AJAX调用，可以使用原生的JavaScript中的XMLHttpRequest对象或者现代浏览器支持的fetch API。以下是两种方法的详细介绍和示例代码。

使用 XMLHttpRequest

XMLHttpRequest 是一个浏览器内置的对象，可以用来发送HTTP请求并与服务器进行交互。

示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
xhr.send();

解释：

1. 创建对象：var xhr = new XMLHttpRequest();
2. 打开连接：xhr.open('GET', 'https://api.example.com/data', true);，其中第一个参数是请求方法（GET、POST等），第二个参数是URL，第三个参数表示是否异步。
3. 设置回调函数：xhr.onreadystatechange = function () {...};，当请求状态改变时，会触发这个回调函数。
4. 发送请求：xhr.send();

使用 fetch API

fetch 是一个现代的、基于Promise的API，用于进行网络请求。

示例代码：

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });

解释：

1. 发起请求：fetch('https://api.example.com/data')
2. 处理响应：.then(response => {...})，检查响应是否成功，并解析JSON数据。
3. 处理数据：.then(data => {...})，处理解析后的数据。
4. 错误处理：.catch(error => {...})，捕获并处理请求过程中可能出现的错误。

优势和应用场景

• XMLHttpRequest：
  • 优势：兼容性好，几乎所有浏览器都支持。
  • 应用场景：适用于需要兼容旧版浏览器的场景。
• fetch API：
  • 优势：基于Promise，语法更简洁，功能更强大，支持更多的HTTP特性（如请求和响应的流处理）。
  • 应用场景：适用于现代浏览器环境，特别是需要处理复杂请求和响应的场景。

常见问题及解决方法

1. 跨域问题：
   • 原因：浏览器的同源策略限制了跨域请求。
   • 解决方法：使用CORS（跨域资源共享），服务器端设置合适的CORS头；或者使用代理服务器。

• 请求超时：
  • 原因：请求在规定时间内未得到响应。
  • 解决方法：设置合理的超时时间，或者在服务器端优化响应速度。
• 请求被阻止：
  • 原因：浏览器安全策略或插件阻止了请求。
  • 解决方法：检查浏览器设置，确保请求的URL是安全的，或者禁用可能阻止请求的插件。

通过以上方法，可以在没有jQuery的情况下进行AJAX调用，并解决常见的相关问题。