在我们之前学习的内容中,向服务器发送请求后,再浏览器中响应的页面都是整页刷新。
在某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。
Ajax 的全称是Asynchronous JavaScript and XML(异步的JavaScript 和 XML)。这个概念出现的比较早,那个时候前端和后台的数据交互主要以XML格式为主,例如下面的数据格式:
1 <fruit>
2 <name>apple</name>
3 <weight>0.5kg</weight>
4 <color>red</color>
5 </fruit>
现在仍然存在很多用xml交互数据的情况,但是目前主流的数据格式使用的是json(JavaScript对象表示法),例如下面的格式:
1 {
2 "fruit":{
3 "name":"apple",
4 "weight":"0.5kg",
5 "color":"red"
6 }
7 }
对于熟悉js的开发人员,这样的格式再熟悉不过了,基本是零学习成本,以后我们使用Ajax传递数据都是使用json格式。
考虑一个问题,在之前的学习内容中,我们是如何向服务器发送请求的?这里我们列举一下:
Ajax的原理是通过XMLhttpRequest
对象向服务器发送请求,实例代码如下所示:
1 //后台程序
2 router.get("/", async ctx => {
3 await ctx.render("index")
4 })
5 router.get("/data", async ctx => {
6 ctx.body = "hello world"
7 })
8
9 //前端程序
10 var xhr = new XMLHttpRequest(); //创建XHR对象
11 xhr.open("get","/data"); //规定请求类型
12 xhr.send() //发送请求
13 xhr.onreadystatechange = function(){ //监听readyState事件
14 // 0: 请求未初始化
15 // 1: 服务器连接已建立
16 // 2: 请求已接收
17 // 3: 请求处理中
18 // 4: 请求已完成,且响应已就绪
19 if(xhr.readyState === 4 && xhr.status === 200){
20 alert(xhr.responseText)
21 }
22 }
这里需要注意的是,上面的代码,我们在实际开发项目中并不常用,因为通常情况下,我们会引入第三方Ajax库来处理异步请求。
将上面的程序封装到一个myAjax方法,实例代码如下所示,这里需要注意的是,因为Ajax是异步的操作,因此封装的Ajax不能用return获取返回值。下面的示例使用的是回调函数封装的Ajax方法
1 function myAjax(method,url,next) {
2 let xhr = new XMLHttpRequest();
3 xhr.open(method, url);
4 xhr.send()
5 xhr.onreadystatechange = function () {
6 if (xhr.readyState === 4 && xhr.status === 200) {
7 next(xhr.responseText);
8 }
9 }
10 }
11
12 document.querySelector("button").onclick = function() {//调用封装的Ajax
13 myajax("get","/data",function(data){
14 alert(data);
15 });
16 }
过多的使用回调函数会让程序变得很难维护,接下来我们用Promise重新封装ajax方法,示例代码如下所示:
1 function myajax(method, url, next) {
2 return new Promise(function (resolve,reject) {
3 let xhr = new XMLHttpRequest();
4 xhr.open(method, url);
5 xhr.send(); //可以向后台传输数据
6 xhr.onreadystatechange = function () {
7 if (xhr.readyState === 4 && xhr.status === 200) {
8 resolve(xhr.responseText);
9 }
10 }
11 reject("获取数据失败")
12 })
13 }
14 document.querySelector("button").onclick = async function () {
15 let p = myajax("get", "data");
16 p.then(function (data) {
17 alert(data);
18 })
19 }
使用async函数才是处理异步问题的终极解决方案,所以在后续的开发中,尽量使async函数来处理异步问题。
独立完成封装XMLHttpRequest对象,并获取后台的字符串数据。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。