【融职培训】Web前端学习第6章 jQuery Ajax 2 Ajax入门

学习猿地

发布于 2020-06-24 09:51:21

4040

发布于 2020-06-24 09:51:21

文章被收录于专栏：学习猿地学习猿地

一、Ajax概述

在我们之前学习的内容中，向服务器发送请求后，再浏览器中响应的页面都是整页刷新。

在某些项目中，我们只希望获取页面的局部数据，而不必整页刷新，这个时候就需要使用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的优缺点

优点：按需获取数据，提升系统性能。
缺点：异步获取数据，不利于搜索引擎优化。

二、Ajax原理

考虑一个问题，在之前的学习内容中，我们是如何向服务器发送请求的？这里我们列举一下：

在浏览器中直接输入网址
a标签实现的页面跳转
表单提交
Postman模拟http请求

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库来处理异步请求。

三、封装一个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

过多的使用回调函数会让程序变得很难维护，接下来我们用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函数来处理异步问题。