原生JS/JQuery封装请求工具类
以下是一个使用原生JavaScript封装的简单AJAX请求工具类示例:
class AjaxRequest {
static get(url, callback) {
this.request('GET', url, callback);
}
static post(url, data, callback) {
this.request('POST', url, callback, data);
}
static request(method, url, callback, data) {
const xhr = new XMLHttpRequest();
xhr.open(method, url, true);
if (method === 'POST') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback(null, xhr.responseText);
} else {
callback(new Error('Error: ' + xhr.status), xhr.responseText);
}
}
};
if (method === 'GET') {
xhr.send();
} else if (method === 'POST') {
xhr.send(data);
}
}
}
// 使用示例
AjaxRequest.get('https://api.example.com/data', (err, response) => {
if (err) {
console.error(err);
} else {
console.log(response);
}
});
AjaxRequest.post('https://api.example.com/data', 'key1=value1&key2=value2', (err, response) => {
if (err) {
console.error(err);
} else {
console.log(response);
}
});
这个AjaxRequest
类提供了get
和post
方法来发送AJAX请求。request
方法是基础方法,用于执行实际的请求,并处理响应。这个类可以被扩展以添加额外的HTTP方法或功能,但它提供了一个简单的封装示例。
评论已关闭