AJAX
文章平均质量分 77
AJAX课程学习笔记
努力学习前端的小陈
每一天都在努力学习前端,专栏有报错,配置专栏,用于记录每次报错的问题及处理方案
展开
-
服务器的基本概念与初识Ajax
1 服务器上网过程中,负责存放和对外提供资源的电脑,叫做服务器。2 客户端上网过程中,负责获取和消费资源的电脑,叫做客户端。3URL地址1 URL地址的概念URL(全称是UniformResourceLocator)中文叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。常见的URL举例:http://www.baidu.comhttp://www.taobao.comh...原创 2022-04-07 00:43:27 · 99 阅读 · 0 评论 -
AJAX案例 - 图书管理
1 渲染UI结构2 案例用到的库和插件用到的 css 库 bootstrap.css用到的 javascript 库 jquery.js用到的 vs code 插件 Bootstrap 3 Snippets3 渲染图书列表(核心代码)function getBookList() { // 1. 发起 ajax 请求获取图书列表数据 $.get('http://www.liulongbin.top:3006/api/getbooks', function(re..原创 2022-04-07 14:21:45 · 764 阅读 · 0 评论 -
AJAX案例 – 聊天机器人
1 演示案例要完成的效果实现步骤:①梳理案例的代码结构②将用户输入的内容渲染到聊天窗口③发起请求获取聊天消息④将机器人的聊天内容转为语音⑤通过 <audio> 播放语音⑥使用回车键发送消息2 梳理案例的代码结构①梳理页面的 UI 布局②将业务代码抽离到 chat.js 中③了解 resetui() 函数的作用3 将用户输入的内容渲染到聊天窗口//为发送按钮绑定点击事件处理函数$('#btnSend').on...原创 2022-04-07 14:29:40 · 406 阅读 · 0 评论 -
form表单的基本使用
1 什么是表单表单在网页中主要负责数据采集功能。HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理。<form> <input type="text" name="email_or_mobile" /> <input type="password" name="password" /> <input type="checkbox".原创 2022-04-07 15:18:33 · 2599 阅读 · 0 评论 -
通过Ajax提交表单数据
1 监听表单提交事件在 jQuery 中,可以使用如下两种方式,监听到表单的提交事件:$('#form1').submit(function(e) { alert('监听到了表单的提交事件')})$('#form1').on('submit', function(e) { alert('监听到了表单的提交事件')})2 阻止表单默认提交行为当监听到表单的提交事件以后,可以调用事件对象的 event.preventDefault() 函数,来阻止表单的提交和页面的跳转,原创 2022-04-08 16:19:26 · 1815 阅读 · 0 评论 -
模板引擎的基本概念和art-template
1 渲染UI结构时遇到的问题var rows = []$.each(res.data, function (i, item) { // 循环拼接字符串 rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间:'+ item.time +'</span><span class="badge cmt-person">评论人:原创 2022-04-08 16:45:58 · 755 阅读 · 0 评论 -
XMLHttpRequest的基本使用
1 什么是XMLHttpRequestXMLHttpRequest(简称 xhr)是浏览器提供的 Javascript 对象,通过它,可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数,就是基于 xhr 对象封装出来的。2 使用xhr发起GET请求步骤:①创建xhr对象②调用xhr.open()函数③调用xhr.send()函数④监听xhr.onreadystatechange事件//1.创建XHR对象varxh...原创 2022-04-08 21:40:46 · 1926 阅读 · 0 评论 -
数据交换格式
1 什么是数据交换格式数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。前端领域,经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少,所以,我们重点要学习的数据交换格式就是 JSON。2 XML1. 什么是XMLXML 的英文全称是 EXtensible Markup Language,即可扩展标记语言。因此,XML 和 HTML 类似,也是一种标记语言。//HTML<!DOCTYPEhtml><html...原创 2022-04-09 00:17:29 · 608 阅读 · 0 评论 -
封装自己的Ajax函数
1 要实现的效果<!-- 1. 导入自定义的ajax函数库 --><script src="./itheima.js"></script><script> // 2. 调用自定义的 itheima 函数,发起 Ajax 数据请求 itheima({ method: '请求类型', url: '请求地址', data: { /* 请求参数对象 */ }, success:原创 2022-04-09 00:22:27 · 331 阅读 · 0 评论 -
XMLHttpRequest Level2的新特性
1 认识XMLHttpRequest Level21.1. 旧版XMLHttpRequest的缺点①只支持文本数据的传输,无法用来读取和上传文件②传送和接收数据时,没有进度信息,只能提示有没有完成1.2. XMLHttpRequest Level2的新功能①可以设置 HTTP 请求的时限②可以使用 FormData 对象管理表单数据③可以上传文件④可以获得数据传输的进度信息2 设置HTTP请求时限有时,Ajax 操作很耗时,而且无法预知要花多少时间。如果网..原创 2022-04-09 00:40:11 · 221 阅读 · 0 评论 -
jQuery高级用法和axios
1 jQuery实现文件上传1. 定义UI结构 <!--导入 jQuery--> <scriptsrc="./lib/jquery.js"></script><!--文件选择框--><inputtype="file"id="file1"/><!--上传文件按钮--><buttonid="btnUpload">上传</butt...原创 2022-04-09 12:14:18 · 583 阅读 · 2 评论 -
同源策略和跨域(案例-淘宝搜索)
1 同源策略1.1. 什么是同源如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源。例如,下表给出了相对于 http://www.test.com/index.html 页面的同源检测: URL 是否同源 原因 http://www.test.com/other.html 是 同源(协议、域名、端口相同) https://www.test.com/a原创 2022-04-09 19:43:31 · 319 阅读 · 0 评论 -
防抖和节流
1. 什么是防抖防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。1.2. 防抖的应用场景用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;2.什么是节流节流策略(throttle),顾名思义,可以减少一段时间内事件的触发频率。2.1节流的应用场景①鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;②懒加载时要监...原创 2022-04-09 20:08:33 · 272 阅读 · 3 评论 -
Promise和async/await
1. 回调地狱多层回调函数的相互嵌套,就形成了回调地狱。示例代码如下:回调地狱的缺点:代码耦合性太强,牵一发而动全身,难以维护大量冗余的代码相互嵌套,代码的可读性变差1.1 如何解决回调地狱的问题为了解决回调地狱的问题,ES6(ECMAScript 2015)中新增了 Promise 的概念。2.Promise 的基本概念① Promise 是一个构造函数我们可以创建 Promise 的实例const p = new Promise()...原创 2022-04-20 13:10:23 · 778 阅读 · 0 评论 -
案例:API 接口案例
1、案例内容:1. 案例需求基于MySQL 数据库+ Express 对外提供用户列表的API 接口服务。用到的技术点如下:第三方包express 和mysql2ES6 模块化Promiseasync/await2. 主要的实现步骤① 搭建项目的基本结构② 创建基本的服务器③ 创建db 数据库操作模块④ 创建 user_ctrl 业务模块⑤ 创建 user_router 路由模块3.搭建项目的基本结构① 启用 ES6 模块化支持在 pack原创 2022-04-21 14:31:20 · 1477 阅读 · 0 评论