学会AJAX，轻松实现前后端数据交互：5种请求方法详解及实战案例

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，与服务器交换数据和更新部分网页的技术。它通过JavaScript在客户端发送请求，并在服务器端处理请求后返回数据，从而实现前后端的数据交互。掌握AJAX，可以让你轻松实现动态网页效果，提升用户体验。本文将详细介绍AJAX的5种请求方法，并提供实战案例。

1. GET请求

GET请求是最常见的AJAX请求方法，用于请求数据。它通过URL传递参数，请求的数据会被附加在URL后面。

代码示例：

// 使用XMLHttpRequest对象发送GET请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data?param=value', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

实战案例：

假设我们有一个页面需要根据用户输入的查询条件，从服务器获取数据并展示。可以使用GET请求实现：

// HTML
<input type="text" id="query" placeholder="请输入查询条件">
<button onclick="getData()">查询</button>
<div id="result"></div>

// JavaScript
function getData() {
    var query = document.getElementById('query').value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://example.com/search?q=' + encodeURIComponent(query), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('result').innerHTML = xhr.responseText;
        }
    };
    xhr.send();
}

2. POST请求

POST请求用于发送大量数据或敏感数据，它将数据放在请求体中发送。

代码示例：

// 使用XMLHttpRequest对象发送POST请求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send('param=value');

实战案例：

假设我们有一个表单需要提交到服务器，可以使用POST请求实现：

// HTML
<form id="form">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="button" onclick="submitForm()">提交</button>
</form>

// JavaScript
function submitForm() {
    var form = document.getElementById('form');
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://example.com/login', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(formData);
}

3. PUT请求

PUT请求用于更新服务器上的资源，它将资源数据放在请求体中发送。

代码示例：

// 使用XMLHttpRequest对象发送PUT请求
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'http://example.com/data/123', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify({ param: 'value' }));

实战案例：

假设我们有一个资源需要更新，可以使用PUT请求实现：

// HTML
<button onclick="updateResource()">更新资源</button>

// JavaScript
function updateResource() {
    var xhr = new XMLHttpRequest();
    xhr.open('PUT', 'http://example.com/resource/123', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(JSON.stringify({ param: 'value' }));
}

4. DELETE请求

DELETE请求用于删除服务器上的资源。

代码示例：

// 使用XMLHttpRequest对象发送DELETE请求
var xhr = new XMLHttpRequest();
xhr.open('DELETE', 'http://example.com/data/123', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

实战案例：

假设我们有一个资源需要删除，可以使用DELETE请求实现：

// HTML
<button onclick="deleteResource()">删除资源</button>

// JavaScript
function deleteResource() {
    var xhr = new XMLHttpRequest();
    xhr.open('DELETE', 'http://example.com/resource/123', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send();
}

5. PATCH请求

PATCH请求用于更新服务器上资源的部分属性。

代码示例：

// 使用XMLHttpRequest对象发送PATCH请求
var xhr = new XMLHttpRequest();
xhr.open('PATCH', 'http://example.com/data/123', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify({ param: 'value' }));

实战案例：

假设我们有一个资源需要更新部分属性，可以使用PATCH请求实现：

// HTML
<button onclick="partialUpdateResource()">部分更新资源</button>

// JavaScript
function partialUpdateResource() {
    var xhr = new XMLHttpRequest();
    xhr.open('PATCH', 'http://example.com/resource/123', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(JSON.stringify({ param: 'value' }));
}

通过以上5种请求方法的介绍和实战案例，相信你已经对AJAX有了更深入的了解。在实际开发中，根据需求选择合适的请求方法，可以让你轻松实现前后端数据交互，提升用户体验。