前后端数据交互——ajax 封装及调用

// 定义一个简单的AJAX函数
function simpleAjax(url, method, data, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    };
    if (method === 'POST') {
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(data);
}
 
// 使用AJAX函数发送GET请求
simpleAjax('https://api.example.com/data', 'GET', null, function(response) {
    console.log('GET请求返回的数据:', response);
});
 
// 使用AJAX函数发送POST请求
simpleAjax('https://api.example.com/data', 'POST', 'key1=value1&key2=value2', function(response) {
    console.log('POST请求返回的数据:', response);
});

这个简单的simpleAjax函数接受一个URL、HTTP方法、数据和回调函数作为参数，然后创建一个XMLHttpRequest对象，设置请求方法、URL、异步处理，以及相应的回调函数来处理响应。如果是POST请求，还需要设置请求头并发送数据。最后，这个函数使用xhr.send()方法发送请求。使用这个函数可以方便地进行GET和POST请求，并在回调函数中处理响应数据。