AJAX即Asynchronous Javascript And XML,代表异步的JavaScript和XML,是一种网页交互的开发技术,是浏览器和服务器交互数据进行异步请求的一门技术,实现了局部页面的刷新,按需获取数据。AXAJ的实现的原理是XMLHttpRequest对象,它用于后台和服务器之间交换数据。
JavaScript中的AJAX
请求应该分有5个步骤,但是setRequestHeader如果请求头没有要求,则就不需要这个步骤。
get
get无参
<body>
<button onclick="request()">点击请求</button>
<script>
function request() {
// 1.创建XMLHttpRequest的实例
let xhr = new XMLHttpRequest();
// 2.通过open设置交互信息,请求方法、utl
xhr.open('get', 'https://api.muxiaoguo.cn/api/dujitang');
// 3.设置请求头信息,数据格式json、查询字符串等,默认不写这个步骤
// xhr.setRequestHeader('Content-type', 'application/json')
// 4.send发送请求,send中可以放请求体的内容
xhr.send();
// 5.请求完成且响应完成,则获取到数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 得到的数据是JSON格式,需要转换
let res = JSON.parse(xhr.responseText);
console.log(res);
}
}
}
}
</script>
</body>
get有参
get有参请求要把数据以查询字符串的格式拼接到url后面,所以需要把请求参数转化成查询字符串
<body>
<button onclick="request()">点击请求</button>
<script>
// https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1
function request() {
let xhr = new XMLHttpRequest();
// 请求参数
params = {
city: '柳州',
type: 2,
};
// 把请求参数变成查询字符串,需要先引入qs库
let data = Qs.stringify(params)
xhr.open('get', 'https://api.muxiaoguo.cn/api/tianqi' + '?' + data);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let res = JSON.parse(xhr.responseText);
console.log(res);
}
}
}
}
</script>
</body>
post
post无参
<body>
<button onclick="request()">点击请求</button>
<script>
function request() {
let xhr = new XMLHttpRequest();
xhr.open('post', 'https://api.muxiaoguo.cn/api/Gushici');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let res = JSON.parse(xhr.responseText);
console.log(res);
}
}
}
}
</script>
</body>
post有参
<body>
<button onclick="request()">点击请求</button>
<script>
function request() {
let xhr = new XMLHttpRequest();
xhr.open('post', 'https://api.muxiaoguo.cn/api/tianqi');
params = {
city: '柳州',
type: 2,
};
// 设置数据格式为查询字符串
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 先引入qs
xhr.send(Qs.stringify(params));
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let res = JSON.parse(xhr.responseText);
console.log(res);
}
}
}
}
</script>
</body>
jQuery中AJAX
jquery中封装的AJAX会把参数自动装化成查询字符串格式,即请求头默认为application/x-www-form-urlencoded
基本写法
<body>
<script>
$.ajax({
url: 'https://api.muxiaoguo.cn/api/Gushici',
method: 'post',
data: {}, // 参数,无参不写
success: function (res) { // 请求成功回调
console.log(res);
},
error: function (err) { // 失败回调
console.log(err);
}
})
</script>
</body>
快捷写法
// get有参
<body>
<script>
let params = { // 参数
city: '柳州',
type: 2,
}
// url 参数(自动转换成查询字符串) 回调函数
$.get('https://api.muxiaoguo.cn/api/tianqi', params, function (res) {
console.log(res);
})
</script>
</body>
// post有参,参数为查询字符串形式
<body>
<script>
let params = { // 参数
city: '柳州',
type: 2,
}
// url 参数(自动转换成查询字符串) 回调函数
$.post('https://api.muxiaoguo.cn/api/tianqi', params, function (res) {
console.log(res);
})
</script>
</body>