发表于： 2023-04-23 19:24:12
0 262
AXJX知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ie 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px skyblue;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取元素
const btn = document.querySelector('button')
const result = document.querySelector('#result')
btn.addEventListener('click', function() {
// console.log('点击了');
// 1、创建对象
const xhr = new XMLHttpRequest()
// 2、初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/ie' + Date.new())
// 3、发送
xhr.send()
// 4、事件绑定 处理服务端返回的结果
//on 当 ....时候
// readystate 是 xhr 对象中的属性 表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function() {
//判断（服务器返回了所有的结果）
//readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态
if(xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
// 2xx 2开头的 算是响应成功
if(xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空行 体
// 1、响应行
// console.log(xhr.status) //状态码
// console.log(xhr.statusText) //状态字符串
// console.log(xhr.getAllResponseHeaders()) //所有响应头
// console.log(xhr.response) //响应体
//设置 result 的文本 Response 接口呈现了对一次请求的响应数据。
result.innerHTML = xhr.response
} else {
}
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ie 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px skyblue;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取元素
const btn = document.querySelector('button')
const result = document.querySelector('#result')
btn.addEventListener('click', function() {
// console.log('点击了');
// 1、创建对象
const xhr = new XMLHttpRequest()
//超时设置 超时2s就取消
xhr.timeout = 2000
//超时回调
xhr.ontimeout = function() {
alert('网络异常，请稍后重试！')
}
//网络异常回调
xhr.onerror = function() {
alert('你的网络似乎出了一些问题！')
}
// 2、初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/delay')
// 3、发送
xhr.send()
// 4、事件绑定 处理服务端返回的结果
//on 当 ....时候
// readystate 是 xhr 对象中的属性 表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function() {
//判断（服务器返回了所有的结果）
//readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态
if(xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
// 2xx 2开头的 算是响应成功
if(xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空行 体
// 1、响应行
//设置 result 的文本 Response 接口呈现了对一次请求的响应数据。
result.innerHTML = xhr.response
} else {
}
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ie 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px skyblue;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<script>
//获取元素
const btn = document.querySelector('button')
let x = null
let isSending = false // 判断是否正在发送 AJAX请求
btn.addEventListener('click', function() {
//修改 标识变量的值
// 如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。
if(isSending) x.abort()
x = new XMLHttpRequest()
// 修改 标识变量的值
isSending = true
x.open('GET', 'http://127.0.0.1:8000/delay')
// 发送
x.send()
// 事件绑定 处理服务端返回的结果
x.onreadystatechange = function() {
if(xhr.readyState === 4) {
//修改标识变量
isSending = false
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios 发送 AJAX请求</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px skyblue;
}
</style>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>
//获取元素
const btns = document.querySelectorAll('button')
// 配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000'
btns[0].addEventListener('click', function() {
//GET请求
axios.get('/axios-server', {
//url 参数
params: {
id:100,
vip:7
},
//请求头信息
headers: {
name: 'aitguigu',
age: 20
}
}).then(value => {
console.log(value);
})
})
btns[1].addEventListener('click', function() {
//POST请求
axios.post('/axios-server', {
//请求体
username: 'admin',
password: 'admin123'
},{
//url 参数
params: {
id:200,
vip:9
},
//请求头信息
headers: {
height: 180,
weight: 180
}
})
})
btns[2].addEventListener('click', function() {
axios({
//请求方法
method: 'POST',
//url
url: '/axios-server',
//url参数
params: {
vip: 10,
level: 30
},
//头信息
headers: {
a: 100,
b: 200
},
//请求体参数
data: {
username: 'admin',
password: 'admin123'
}
}).then(response => {
console.log(response);
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应状态头信息
console.log(response.headers);
//响应体
console.log(response.data);
})
})
</script>
</body>
</html>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>检测用户是否存在案例</title>
</head>
<body>
用户名：<input type="text" id="username">
<p></p>
<script>
//获取 input 元素
const input = document.querySelector('input')
const p = document.querySelector('p')
//声明 handle 函数
function handle(data) {
input.style.border = 'solid 1px #f00'
// 修改提示文本
p.innerHTML = data.msg
}
//绑定事件
input.addEventListener('blur', function() {
//获取用户的输入值
let username = this.value
//向服务器端发送请求 检测用户名是否存在
//1.创建 script 标签
//Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素
const script = document.createElement('script')
//2.设置标签的 src 属性
script.src ="http://127.0.0.1:8000/check-username"
//3.将 script 插入到文档中
document.body.appendChild(script)
})
</script>
</body>
</html>
返回列表
评论