使用XMLHttpRequest 封装一个http请求函数,并返回调用结果
时间: 2023-08-31 10:35:05 浏览: 187
http请求封装
### 回答1:
XMLHttpRequest可以用来封装一个http请求函数,可以通过XMLHttpRequest.send()方法来发送请求,XMLHttpRequest.onreadystatechange()方法可以获取调用结果。
### 回答2:
XMLHttpRequest是一种浏览器内置的JavaScript对象,用于发起HTTP请求并处理响应。可以使用XMLHttpRequest来封装一个http请求函数,并返回调用结果。
首先,创建一个XMLHttpRequest对象:
```javascript
var xhr = new XMLHttpRequest();
```
然后,定义一个回调函数来处理响应:
```javascript
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 处理响应
console.log(response);
}
};
```
接下来,使用open方法设置请求方法和URL,并发送请求:
```javascript
xhr.open("GET", "http://example.com/api", true);
xhr.send();
```
在回调函数中,可以对响应进行进一步的处理。如果需要发送带有数据的POST请求,可以在send方法中传递参数:
```javascript
xhr.open("POST", "http://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
```
最后,可以通过将这个封装好的http请求函数进行封装,来用于不同的http请求调用。例如:
```javascript
function httpRequest(method, url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
callback(response);
}
};
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
}
httpRequest("POST", "http://example.com/api", data, function(response) {
// 处理响应
console.log(response);
});
```
这样就可以封装一个http请求函数,并返回调用结果。
### 回答3:
使用XMLHttpRequest封装一个HTTP请求函数,并返回调用结果的代码如下:
```javascript
function httpRequest(url, method, data) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject({
status: xhr.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function() {
reject({
status: xhr.status,
statusText: xhr.statusText
});
};
if (method === 'POST') {
xhr.setRequestHeader('Content-Type', 'application/json');
}
xhr.send(JSON.stringify(data));
});
}
// 调用示例
var apiUrl = 'https://api.example.com/data';
var requestData = {
name: 'John Doe',
age: 25
};
httpRequest(apiUrl, 'POST', requestData)
.then(function(response) {
console.log('调用成功', response);
})
.catch(function(error) {
console.error('调用失败', error);
});
```
这段代码定义了一个`httpRequest`函数,接受三个参数:`url`表示要发送请求的URL地址,`method`表示请求的方法(如GET或POST),`data`表示请求的数据。函数通过创建一个新的`XMLHttpRequest`对象,设置请求的URL和方法,然后发送请求。当请求成功返回时,通过`resolve`回调函数返回请求结果;当请求失败时,通过`reject`回调函数返回错误信息。在调用时可以使用`then`方法处理请求成功的结果,使用`catch`方法处理请求失败的情况。
阅读全文