面试必备之ajax原始请求

以下是“面试必备之ajax原始请求”的攻略，其中包含两个示例：

面试必备之ajax原始请求

什么是ajax原始请求？

ajax原始请求是指使用XMLHttpRequest对象发送HTTP请求的一种方式。它可以在不刷新页面的情况下向服务器发送请求，并接收服务器返回的数据。ajax原始请求可以使用GET、POST等HTTP请求方法，并且可以设置请求、请求参数等。

如何使用ajax原始请求？

使用ajax原始请求需要以下步骤：

1. 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

1. 设置请求参数

xhr.open('GET', '/api/data', true);

1. 设置请求头

xhr.setRequestHeader('Content-Type', 'application/json');

1. 发送请求

xhr.send();

1. 监听响应

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

示例1：使用ajax原始请求获取数据

以下示例演示如何使用ajax原始请求获取数据：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

在上面的示例中，我们使用ajax原始请求向服务器发送GET请求，并设置请求头为application/json。当服务器返回响应时，我们将响应数据打印到控制台中。

示例2：使用ajax原始请求提交表单数据

以下示例演示如何使用ajax原始请求提交表单数据：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=30');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

在上面的示例中，我们使用ajax原始请求向服务器发送POST请求，并设置请求头为application/x-www-form-urlencoded。我们将表单设置为name=John&age=30，并将其作为请求体发送到服务器。当服务器返回响应时，我们将响应数据打印到控制台中。

结论

ajax原始请求是一种常用的向服务器发送HTTP请求的方式。在使用ajax原始请求时，我们需要注意设置请求、请求头、请求体等。如果您需要使用ajax原始请求，可以参考上述示例，并根据具体情况进行调整。