脱离jquery的ajax库
时间: 2023-08-15 19:14:19 浏览: 105
如果你想脱离 jQuery,可以使用原生的 JavaScript 来实现 AJAX 请求。以下是一个简单的示例代码:
```javascript
function ajax(options) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(options.method || 'GET', options.url);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(new Error(xhr.statusText));
}
};
xhr.onerror = function() {
reject(new Error('网络错误'));
};
if (options.headers) {
Object.keys(options.headers).forEach(function(key) {
xhr.setRequestHeader(key, options.headers[key]);
});
}
var params = options.params;
if (params && typeof params === 'object') {
params = Object.keys(params).map(function(key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
}
xhr.timeout = options.timeout || 0;
xhr.ontimeout = function() {
reject(new Error('请求超时'));
};
xhr.send(params);
});
}
```
使用这个 `ajax` 函数,你可以发送各种类型的 AJAX 请求。它返回一个 Promise 对象,你可以使用 `then` 和 `catch` 方法来处理成功和失败的回调函数。
以下是一个示例用法:
```javascript
ajax({
method: 'POST',
url: 'https://example.com/api',
headers: {
'Content-Type': 'application/json'
},
params: {
name: 'John',
age: 25
},
timeout: 5000
})
.then(function(response) {
// 处理成功的响应
})
.catch(function(error) {
// 处理错误
});
```
在这个示例中,我们使用 `ajax` 函数发送一个 POST 请求到指定的 URL,设置了请求头和参数,并设置了超时时间为 5000 毫秒。你可以根据自己的需求修改和扩展这个函数,以适应不同的情况和需求。
阅读全文