美文网首页
【融职培训】Web前端学习 第6章 jQuery Ajax 2

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

作者: lmonkey_01 | 来源:发表于2020-06-22 13:46 被阅读0次

    一、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//后台程序 2router.get("/", async ctx => { 3await ctx.render("index") 4}) 5router.get("/data", async ctx => { 6ctx.body = "hello world" 7}) 8 9//前端程序10varxhr =newXMLHttpRequest();//创建XHR对象11xhr.open("get","/data");//规定请求类型12xhr.send()//发送请求13xhr.onreadystatechange =function(){//监听readyState事件14// 0: 请求未初始化15// 1: 服务器连接已建立16// 2: 请求已接收17// 3: 请求处理中18// 4: 请求已完成,且响应已就绪19if(xhr.readyState === 4 && xhr.status === 200){20      alert(xhr.responseText)21  }22}

    这里需要注意的是,上面的代码,我们在实际开发项目中并不常用,因为通常情况下,我们会引入第三方Ajax库来处理异步请求。

    三、封装一个Ajax方法

    回调函数

    将上面的程序封装到一个myAjax方法,实例代码如下所示,这里需要注意的是,因为Ajax是异步的操作,因此封装的Ajax不能用return获取返回值。下面的示例使用的是回调函数封装的Ajax方法

    1function myAjax(method,url,next) { 2let xhr =new XMLHttpRequest(); 3  xhr.open(method, url); 4  xhr.send() 5xhr.onreadystatechange =function () { 6if(xhr.readyState === 4 && xhr.status === 200) { 7          next(xhr.responseText); 8      } 9  }10}1112document.querySelector("button").onclick =function() {//调用封装的Ajax13myajax("get","/data",function(data){14      alert(data);15  });16}

    Promise

    过多的使用回调函数会让程序变得很难维护,接下来我们用Promise重新封装ajax方法,示例代码如下所示:

    1function myajax(method, url, next) { 2returnnewPromise(function (resolve,reject) { 3let xhr =new XMLHttpRequest(); 4      xhr.open(method, url); 5xhr.send();//可以向后台传输数据 6xhr.onreadystatechange =function () { 7if(xhr.readyState === 4 && xhr.status === 200) { 8              resolve(xhr.responseText); 9          }10      }11reject("获取数据失败")12  })13}14document.querySelector("button").onclick = asyncfunction () {15let p = myajax("get", "data");16p.then(function (data) {17      alert(data);18  })19}

    使用async函数才是处理异步问题的终极解决方案,所以在后续的开发中,尽量使async函数来处理异步问题。

    四、课后练习

    独立完成封装XMLHttpRequest对象,并获取后台的字符串数据。

    【融职教育】在工作中学习,在学习中工作

    相关文章

      网友评论

          本文标题:【融职培训】Web前端学习 第6章 jQuery Ajax 2

          本文链接:https://www.haomeiwen.com/subject/knuxfktx.html