AJAX 后端交互

AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载整个页面的情况下与服务器交换数据的技术。它可以使网页更具交互性，并提升用户体验。AJAX 主要依赖于 JavaScript 和 XMLHttpRequest 对象，也可以使用现代的 fetch API 来实现类似的功能。以下是一些关于 AJAX 后端交互的完整示例。

使用 XMLHttpRequest 实现 AJAX 请求

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', '/tutorial/static/prov.txt', true);

// 设置请求完成后的处理函数
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 处理响应数据
        console.log('Response:', xhr.responseText);
    } else {
        console.error('Request failed. Status:', xhr.status);
    }
};

// 处理请求错误
xhr.onerror = function() {
    console.error('Request error');
};

// 发送请求
xhr.send();

使用 fetch API 实现 AJAX 请求

fetch 是一个现代的、基于 Promise 的 API，提供了比 XMLHttpRequest 更简洁和强大的功能。

// 发送 GET 请求
fetch('/tutorial/static/prov.txt')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json(); // 解析 JSON 数据
    })
    .then(data => {
        console.log('Response data:', data);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

发送 POST 请求

发送 POST 请求时，通常需要设置请求的头部，并将数据作为请求体发送。

fetch('/tutorial/user/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        userName: 'Jerry',
        password: 'password'
    })
})
    .then(response => response.json())
    .then(data => {
        console.log('Response data:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

处理跨域问题

当请求的目标 URL 和当前页面的 URL 不在同一个域时，会遇到跨域问题。解决方法包括：

• CORS（Cross-Origin Resource Sharing）：服务器需要在响应头中设置 Access-Control-Allow-Origin。

• JSONP（JSON with Padding）：用于 GET 请求的跨域，但现在已不常用。

• 代理：通过设置服务器代理来解决跨域问题。

AJAX 是实现动态网页和提高用户体验的强大工具。通过 XMLHttpRequest 或 fetch API，可以在后台与服务器进行交互而不需要刷新整个页面。确保处理好错误情况，并注意跨域问题，能够让你的 AJAX 请求更稳定和安全。