在a.js用XMLHttpRequest 封装一个HttpGet请求函数,在a.html 引用这个函数发送请求,并打印返回值,直接给出代码示例
时间: 2023-03-07 16:15:11 浏览: 77
// a.js
function httpGet(url){
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
console.log(xhr.responseText);
}
}
}
xhr.send();
}// a.html
<script src="a.js"></script>
<script>
httpGet('http://example.com/api')
</script>
相关问题
在a.js用XMLHttpRequest 封装一个HttpGet请求函数,在a.html 引用这个函数发送请求,并在a.html打印返回值,直接给出代码示例
### 回答1:
a.js:function httpGet(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
return xhr.responseText;
}
}
}
}a.html:<script type="text/javascript" src="a.js"></script>
<script type="text/javascript">
var res = httpGet("your url");
console.log(res);
</script>
### 回答2:
在a.js中封装一个HttpGet请求函数,代码如下:
```javascript
function httpGet(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open("GET", url, true);
xhr.send();
}
```
在a.html中引用这个函数发送请求,并在a.html页面打印返回值,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a.html</title>
<script src="a.js"></script>
</head>
<body>
<script>
httpGet("http://example.com/api", function(responseText) {
console.log(responseText);
});
</script>
</body>
</html>
```
在a.html中引用a.js文件,并在页面加载完成后调用httpGet函数发送GET请求至"http://example.com/api"接口。当请求成功返回时,将返回值通过回调函数传递给console.log函数进行打印输出。
### 回答3:
a.js代码示例:
```javascript
function httpGet(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open('GET', url, true);
xhr.send();
}
```
a.html代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HttpGet请求示例</title>
<script src="a.js"></script>
<script>
function printResponse(response) {
console.log(response);
}
window.onload = function() {
httpGet('http://example.com/api/data', printResponse);
};
</script>
</head>
<body>
</body>
</html>
```
在a.html页面中,我们通过`<script src="a.js"></script>`引用了a.js文件中的httpGet函数。然后,在window.onload事件中调用httpGet函数发送GET请求,并传入一个回调函数printResponse来处理返回的结果。printResponse函数会将返回的结果打印到控制台中。
使用XMLHttpRequest 封装一个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`方法处理请求失败的情况。