<!DOCTYPE html> <html> <head> <title>拦截和替换XMLHttpRequest请求</title> <meta charset="utf-8"> <script> window.onload = function() { var xhr = new XMLHttpRequest(); var originalOpen = xhr.open; xhr.open = function(method, url, async) { // 在发送新请求之前进行处理,例如修改请求参数、修改请求头等。 console.log("拦截原请求,发送新请求..."); // 发送新请求 originalOpen.apply(this, arguments); }; xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 获取响应数据 var responseText = xhr.responseText; // 处理响应数据,例如更新页面内容 console.log("更新页面内容..."); document.getElementById("content").innerHTML = responseText; } }; xhr.open("GET", "https://api.github.com/users/octocat", true); xhr.send(); }; </script> </head> <body> <div id="content">正在加载...</div> </body> </html>
时间: 2024-04-28 11:26:24 浏览: 159
这是一段使用 XMLHttpRequest 对 GitHub API 进行 GET 请求的代码。在代码中,通过重写 XMLHttpRequest 的 open 方法,拦截并发送新的请求,可以在发送请求前对请求进行处理,例如修改请求参数、修改请求头等。当请求完成后,通过 onreadystatechange 监听事件,获取响应数据,进而可以对页面内容进行处理,例如更新页面内容。
相关问题
axios跨域访问练习,拦截*.action请求的全部代码
以下是使用axios实现跨域访问并拦截*.action请求的完整代码示例,包括前端和后端:
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios跨域访问练习</title>
</head>
<body>
<h1>Axios跨域访问练习</h1>
<div id="result"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios.interceptors.request.use(config => {
// 判断请求是否为*.action请求
if (/\.action$/.test(config.url)) {
// 设置请求头信息
config.headers['X-Requested-With'] = 'XMLHttpRequest';
// 添加请求参数
config.params = { ...config.params, _t: Date.now() };
}
return config;
}, error => {
return Promise.reject(error);
});
axios.get('http://localhost:3000/api/user.action', { withCredentials: true })
.then(response => {
document.getElementById('result').innerText = JSON.stringify(response.data);
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
```
后端代码:
```javascript
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: true,
credentials: true,
}));
app.get('/api/user.action', (req, res) => {
// 处理业务逻辑
res.send({ name: 'Alice' });
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
```
在运行该代码时,需要先启动后端服务器,通过命令`node server.js`启动。然后,通过浏览器打开前端页面,即可进行跨域访问并拦截*.action请求。
帮我实现一个网页,可以拦截到一个链接的媒体资源的,一个输入框输入链接,一个确定按键,将拦截的媒体资源输出在控制台
为了创建这样一个简单的网页,我们将使用HTML、JavaScript和CSS。这里提供一个基础的静态网页示例,它允许用户输入链接,并通过JavaScript拦截和展示图片资源。请注意,这只是一个基本示例,实际的网络请求可能会涉及到更复杂的错误处理和跨域问题。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Resource Interceptor</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<h1>Media Resource Interceptor</h1>
<input type="text" id="linkInput" placeholder="Enter image URL">
<button onclick="fetchImage()">Intercept Image</button>
<pre id="consoleOutput"></pre>
<script>
function fetchImage() {
const link = document.getElementById('linkInput').value;
if (!link) {
alert('Please enter a valid image URL.');
return;
}
try {
const response = new XMLHttpRequest();
response.open('GET', link, true);
response.responseType = 'blob';
response.onload = function() {
if (response.status === 200) {
const imgBlob = response.response;
const url = URL.createObjectURL(imgBlob);
document.getElementById('consoleOutput').innerText += `Image URL: ${url}\n`;
} else {
console.error(`Failed to fetch image. Status: ${response.status}`);
}
};
response.onerror = function() {
console.error('Error occurred while fetching the image');
};
response.send();
} catch (error) {
console.error('An error occurred:', error);
}
}
</script>
</body>
</html>
```
在这个例子中,点击“Intercept Image”按钮会触发`fetchImage()`函数,它尝试获取输入的链接中的图片资源。成功时会在控制台显示URL,失败则输出错误信息。
阅读全文