几种ajax请求方式
贺高飞
上一篇写了vue推荐的Axios写法
vue入门到精通-Axios入门
顺便把之前写的原生的也记录下
参考博客 https://blog.csdn.net/gty204625782/article/details/120538711
1.原生AJAX
1.1 get请求
<!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>ajax</title>
</head>
<body>
<button>点击发送请求</button>
<script>
const btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和url
xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
//readyState:
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
alert(xhr.response)
} else {
}
}
}
}
</script>
</body>
</html>
1.2 post请求
<body>
<button>点击发送请求</button>
<script>
const btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和url
xhr.open('POST', 'https://api.apiopen.top/api/login');
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.setRequestHeader('token', '');
//xhr.send('a=100&b=200&c=300');
xhr.responseType = 'json';
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
//readyState:
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
alert(JSON.stringify(xhr.response))
} else {
}
}
}
}
</script>
</body>
1.3 ie缓存信息
xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖&t' + Date.now());
1.4 超时回掉
//1. 创建对象
const xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function () {
alert("网络异常, 请稍后重试!!");
}
//2. 初始化 设置请求方法和url
xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini1city=巢湖&t' + Date.now());
//3. 发送
xhr.send();
2. jQuery 发送 AJAX 请求
引入js
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2.1 get请求
<!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>ajax</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button>点击发送请求</button>
<script>
$('button').eq(0).click(function() {
$.get('http://wthrcdn.etouch.cn/weather_mini?city=巢湖', function(data) {
alert(JSON.stringify(data))
}, 'json');
})
</script>
</body>
</html>
2.2 post请求
<script>
$('button').eq(0).click(function () {
$.post('https://api.apiopen.top/api/login', {
account: "1299828500@qq.com",
password: "123456"
}, function (data) {
alert(JSON.stringify(data));
});
});
</script>
2.3 通用方法
选择器我们用id选择器，之前两个用的是标签选择器
get方式
<!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>ajax</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="button">点击发送请求</button>
<script>
$('#button').click(function () {
$.ajax({
//url
url: 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖',
//请求类型
type: 'GET',
//响应体结果
dataType: 'json',
//成功的回调
success: function (data) {
alert(JSON.stringify(data))
},
//超时时间
timeout: 2000,
//失败的回调
error: function () {
alert("出错啦")
},
//头信息
headers: {
}
});
});
</script>
</body>
</html>
post请求
<!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>ajax</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="button">点击发送请求</button>
<script>
$('#button').click(function () {
$.ajax({
//url
url: 'https://api.apiopen.top/api/login',
//参数
data: {
account: "1299828500@qq.com",
password: "123456"
},
//请求类型
type: 'post',
//响应体结果
dataType: 'json',
//成功的回调
success: function (data) {
alert(JSON.stringify(data))
},
//超时时间
timeout: 2000,
//失败的回调
error: function () {
alert("出错啦")
},
//头信息
headers: {
}
});
});
</script>
</body>
</html>
类似资料：