在web初期阶段,前端想要获取后端服务信息需要刷新整个页面,这种方式既耗时又让用户体验十分糟糕,那么怎么解决这个问题呢?
想要搭建起前端和后端的快速通道,这个时候就需要使用Ajax。今天小编所要讲的内容就是在JS中如何通过Ajax技术进行网络请求。
Ajax是什么?
Ajax即Asynchronous JAVAscript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:html 或 XHTML, css, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
Ajax的优点:
Ajax的缺点:
Ajax 原理(发送Ajax请求的五个步骤)
接下来我们来了解一下Ajax 原理是什么,以及发送Ajax请求的五个步骤,其实也就是使用 XMLHttpRequest 对象的五个步骤。
一个完整的 HTTP 请求需要的是:
发送 Ajax 请求的五个步骤:
1)创建异步对象,即 XMLHttpRequest 对象。
2)使用 open 方法设置请求参数。open(method, url, async)。参数解释:请求的方法、请求的 url、是否异步。第三个参数如果不写,则默认为 true。
3)发送请求:send()。
4)注册事件:注册 onreadystatechange 事件,状态改变时就会调用。如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
5)服务端响应,获取返回的数据。
在 JavaScript 中,XMLHttpRequest 是客户端的一个 API,它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持 XMLHttpRequest API,如 IE 7+、Firefox、Chrome、Safari 和 Opera。
发送请求
发送请求的方法:
open(method, url, async);
参数解释:
另外还有个方法:(仅用于 POST 请求)
send(string);
POST 请求时注意:
如果想让像form表单提交数据那样使用POST请求,就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据:
xmlhttp.open('POST', 'ajax_test.php', true);
xmlhttp.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');
xmlhttp.send('name=smyhvae&age=27');
onreadystatechange 事件
注册 onreadystatechange 事件后,每当 readyState 属性改变时,就会调用 onreadystatechange 函数。
readyState:(存有 XMLHttpRequest 的状态。从 0 到 4 发生变化)
status:
在 onreadystatechange 事件中,当 readyState 等于 4,且状态码为 200 时,表示响应已就绪。
服务器响应的内容
如果响应的是普通字符串,就使用 responseText;如果响应的是 XML,使用 responseXML。
手写第一个 Ajax 请求
get 请求:
//【发送ajax请求需要五步】
//(1)创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
//(2)设置请求的参数。包括:请求的方法、请求的url。
xmlhttp.open('get', '02-ajax.php');
//(3)发送请求
xmlhttp.send();
//(4)注册事件。 onreadystatechange事件,状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
xmlhttp.onreadystatechange = function () {
// 为了保证 数据 完整返回,我们一般会判断 两个值
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//(5)服务端相应:如果能够进入这个判断,说明数据请求成功了
console.log('数据返回成功:' + JSON.stringify(xmlhttp.responseText));
// 伪代码:按业务需要,将接口返回的内容显示在页面上
// document.querySelector('h1').innerHTML = xmlhttp.responseText;
}
};
post请求:
//(1)异步对象
var xmlhttp = new XMLHttpRequest();
//(2)设置请求参数。包括:请求的方法、请求的url。
xmlhttp.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//(3)发送请求
xmlhttp.send('name=fox&age=18');
//(4)注册事件
xmlhttp.onreadystatechange = function () {
//(5)服务端相应
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
封装 Ajax 请求(重要)
上面的代码,执行顺序很好理解,但在实战开发中,是不会这么写的。假如你的页面中,需要调十次接口,那岂不是要手写十遍 Ajax 请求?这样会导致大量的重复代码。
所以,我们需要把重复代码封装成一个公共函数,然后通过回调函数处理成功和失败的逻辑。
封装 Ajax 请求的代码如下:(get 请求为例)
// 封装 Ajax为公共函数:传入回调函数 success 和 fAIl
function myAjax(url, success, fail) {
// 1、创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
// 兼容IE5、IE6浏览器。不写也没关系
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2、发送请求
xmlhttp.open('GET', url, true);
xmlhttp.send();
// 3、服务端响应
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var obj = JSON.parse(xmlhttp.responseText);
console.log('数据返回成功:' + obj);
success && success(xmlhttp.responseText);
} else {
// 这里的 && 符号,意思是:如果传了 fail 参数,就调用后面的 fail();如果没传 fail 参数,就不调用后面的内容。因为 fail 参数不一定会传。
fail && fail(new Error('接口请求失败'));
}
};
}
// 单次调用 ajax
myAjax('a.json', (res) => {
console.log(res);
});
// 多次调用 ajax。接口请求顺序:a --> b --> c
myAjax('a.json', (res) => {
console.log(res);
myAjax('b.json', (res) => {
console.log(res);
myAjax('c.json', (res) => {
console.log(res);
});
});
});
学会了封装 get 请求之后,封装 post请求也是类似的写法。
下面再列举两种常见的请求方式:
Jquery-Ajax请求
// get请求
$('button').eq(0).click(()=>{
// 方法中有三个参数,给谁发,发什么参数(对象),回调
$.get('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{
console.log(data);
})
});
// post请求
$('button').eq(1).click(()=>{
// 方法中有四个参数,给谁发 ,发什么参数(对象),回调 ,响应体数据类型
$.post('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{
console.log(data);
})
});
// ajax方式
$('button').eq(2).click(()=>{
// 参数是一个对象
$.ajax({
//url
url:'http://127.0.0.1:8001/jquery-server',
// 携带参数
data:{a:100, b:200},
// 响应体结果类型设置
// dataType:'json',
// 请求类型
type:'GET',
// 成功的回调函数
success:function(data){
console.log(data)
},
// 超时时间
// timeout:2000,
// 头信息设置
// headers:{},
// 失败的回调
// error:function(){}
})
})
AxIOS-Ajax请求
// 配置baseURL
// axios.defaults.baseURL = 'http://127.0.0.1:8001'
// 有此配置项后,请求地址可省略一部分
const btn = document.querySelectorAll('button');
btn[0].addEventListener('click', ()=>{
//GET请求
axios.get('http://127.0.0.1:8001/axios-server',{
// 请求参数
params:{
a:700,
b:400
},
// 请求头信息
// headers:{
// name:'张三',
// age:20
// },
// 回调函数
}).then(value =>{
console.log(value)
});
});
btn[1].addEventListener('click',()=>{
axios.post('http://127.0.0.1:8001/axios-server',{
// 携带参数
username:'admin',
passward:'admin',
})
})
btn[2].addEventListener('click', ()=>{
axios({
// 请求方法
method:'POST',
//url
url:'http://127.0.0.1:8001/axios-server',
// 参数
params:{
a:10,
b:100,
},
// 请求头
Headers:{
c:100,
d:200
},
// 请求体参数
// data: {
// username:'admin',
// passward:'admin',
// },
})
})
以上就是比较常用的一些请求方式,希望对大家理解Ajax网络请求这一块有点帮助。无论是哪种请求方式,还是要根据自身所处环境决定如何使用,介绍的只是方法,而具体逻辑还要看业务需求自行完成。
我们下期再见!
END