一、服务器相关概念
1、客户端与服务器
客户端是用户自身的电脑,服务器是存放资源信息的一个(大型电脑)
2、URL地址的概念&组成
URL的组成
-
客户端与服务器之间的 通信协议
-
存有该资源的 服务器名称(主机名)
-
资源在服务器上 具体的存放位置(请求路径)
客户端与服务器通信过程
-
客户端与服务器之间的通讯过程,分为: 请求-处理-响应 三个步骤
-
网页中每一个资源,都是通过 请求-处理-响应 的方式从服务器获取回来的
域名的作用
引导服务器找到具体的数据,并返回给客户端,
www.back.com/storage/avaetr/hello.txt
www.back.com服务器会通过该域名找到一个具体的文件夹
/storage/avaetr/hello.txt 会找到具体的文件
服务器处理数据分为这两步
调试工具
步骤:
-
打开
Chorme
浏览器 -
Ctrl + Shift + I(F12)
打开 Chrome 的开发者工具 -
切换到
Network
面板 -
选中
Doc
页签 -
刷新页面,分析客户端与服务器的通讯过程
资源的请求方式
最常见的两种请求方式分别是 get
和 post
请求
get 请求
,通常用于 获取服务器资源(要资源)
post 请求
,通常用于 向服务器提交数据(送资源)
二、了解Ajax
为什么要学Ajax
Ajax
能让我们轻松实现 网页 与 服务器之间的 数据交互
Ajax
应该用场景(了解)
1、通过 ajax
的形式,动态 检测用户名是否被占用
2、通过 ajax
的形式,动态 加载搜索提示列表
3、通过 ajax
的形式,根据页码值动态刷新表格的数据
4、数据的添加、删除、修改、查询操作,都需要通过 ajax
的形式,来实现数据的交互
三、jQuery
中的Ajax
jQuery
中发起 Ajax 请求最常用的三个方法如下:
-
$.get()
get方式请求,用于获取数据 -
$.post()
post方式请求,用于提交数据 -
$.ajax()
比较综合,既可以获取数据,又可以提交数据
$.get() 函数介绍
$.get(url,[data],[callback])
$.get()发起不带参数的请求
使用 $.get() 函数 发起不带参数的请求时,直接提供给 请求的 URL 地址 和 请求成功之后的回调函数 即可。
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){ console.log(res); })
$.get()发起携带参数的请求
$.get('http://www.liulongbin.top:3006/api/getbooks',{id : 1},function(res){ console.log(res); })
$.post() 函数介绍
$.post(url,[data],[callback])
$.ajax()
函数介绍
$.ajax()
函数的基本语法如下:
.ajax({ type : '', url : '', data : {}, success : function(res){} })
$.ajax()
发起 get 请求
使用 $.ajax()
发起 GET
请求时,只需要将 type
属性 的值设置为 ‘GET
’ 即可:
$.ajax
发起 post 请求
使用 $.ajax()
发起 post
请求,只需要把 type
属性的值 设置为 ‘post
’ 即可
四、接口
接口的概念
使用 Ajax
请求数据时,被请求的 URL
地址,就叫做 数据接口(简称接口)。同时,每个接口必须有请求方式。
接口文档的组成部分
-
接口名称:用来标识各个接口的简单说明,如 登录接口,获取图书列表接口等
-
接口URL:接口的调用地址
-
调用方式:接口的调用方式,如 GET 或者 POST
-
参数格式:接口需要传递的参数,每个参数必须包含 参数名称、参数类型、是否必选、参数说明 这4项内容
-
响应格式:接口的返回值的详细描述,一般包含数据名称、数据类型、说明3项内容
-
返回示例(可选):通过对象的形式,列举服务器返回数据的结构
DAY2
一、Form表单的基本使用
表单在网页中主要负责 数据采集功能。HTML中<form>
标签,就是用于采集用户输入的信息,并通过 <form>
标签的提交操作,把采集的信息提交到服务器端进行处理
1、表单的组成部分
-
表单标签
-
表单域:包含了文本框,密码框,隐藏域,都行文本框,复选框,单选框,下拉选择框和文件上传框等等
-
表单按钮:通过设置
type
属性为submit
来触发form
表单的提交
2、<form>
标签的属性
action
action
属性用来规定当提交表单时,向何处发送表单数据。
action
属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据。
当 <form>
表单在未制定 action
属性值的清空下,action
的默认值为当前页面的 URL
地址
注意: 当提交表单后,会立即跳转到 action
属性指定的 URL
地址
target
target
属性用来规定 在何处打开 action URL
1、_blank 在新窗口打开
2、默认情况下,target的值是 _self,表示在相同的框架中打开 action URL
method
method
属性用来规定 以何种方式 把表单数据提交到 action URL
它的可选值有两个,分别是 get
和 post
默认情况下,method
的值为 get
, 表示通过URL
地址的形式,把表单数据提交到 action URL
注意:
-
get 方式适合用来提交少量的,简单的数据
-
post 方式适合用来提交大量的,复杂的,或包含文件上传的数据
enctype
enctype
属性用来规定在 发送表单数据之前如何对数据进行编码
默认情况下值为application/x-www-form-urlencoded
文件上传必须将属性设置为 multipart/form-data,method必须为POST方式
GET和POST区别(面试)
传送位置:
get的参数跟在url后面传过去,post是在http协议体内传
get 方式适合用来提交少量的,简单的数据,post 方式适合用来提交大量的,复杂的,或包含文件上传的数据
get是相对服务器拿,post是传送数据给服务器
表单的同步提交及缺点
通过点击 submit 按钮,触发表单提交的操作,从而使页面跳转到 action URL
的行为,叫做表单的同步提交
表单同步提交的缺点
-
<form>
表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差 -
<form>
表单同步提交后,页面之前的状态和数据会丢失
如何解决呢?
表单只复杂采集数据,Ajax负责将数据提交到服务器
通过Ajax提交表单数据
监听表单提交事件
在 jQuery
中,可以使用如下两种方式,监听到表单的提交事件
//第一种方式 $('#f1').submit(function () { alert('监听到了表单的提交事件') }) // 第二种方式 $('#f1').on('submit', function () { alert('监听到了表单的提交事件2') })
button 按钮默认type为 submit 可以触发提交事件,也可将type 设置为button 不触发该事件
阻止表单的默认提交行为:
e.preventDefault() 、(return false也可以)
如何快速获取表单数据
serialize()
函数
$.(selector).serialize() //一次性获取f1表单内的所有内容 $('#f1').on('submit',function(e){ e.preventDefault(); let data = $('#f1').serialize(); console.log(data); })
注意:在使用 serialize() 函数快速获取表单数据时,必须为每个表单元素添加 name 属性
只有DOM原生这种有该方法,reset() 重置清空 (JQ中没有)
模板引擎
模板引擎,它可以根据程序员指定的 模板结构 和 数据,自动生成一个完整的HTML页面
art-template模板引擎
基本使用
-
导入
art-template
-
在window全局,就多了一个函数,叫做 template('模板id',需要渲染的数据对象)
<script src="./lib/template-web.js"></script>
-
-
定义数据
var data = { name: 'zs', age: 20}
-
定义模板
-
模板的 HTML 结构,必须定义到
script
标签中,注意:需要把type属性改成text/html
-
给 模板 添加一个
id
-
模板里面如果需要使用到传入的数据,利用 {{}} 来实现,例如:{{name}},那么就会去找 我们调用 template() 函数 第二个参数里面对应的
name
属性的值
<script type="text/html" id="tpl-user"> <h1>{{name}} ------ {{age}}</h1> </script>
-
-
调用
template
函数-
函数的返回值就是拼接好的模板字符串
var htmlStr = template('模板的id', data)
-
-
渲染
HTML
结构-
最后我们需要把template返回的模板字符串设置到页面容器中
$('#container').html(htmlStr)
-
标准语法
art-template 提供了 {{}} 这种语法格式,在 {{}} 内可以进行 变量输出 或 循环数组 等操作,这种 {{}} 语法在 art-template 中被称为标准语法(模板语法)
在 {{}} 语法中,可以进行 变量 的输出,对象属性的输出,三元表达式输出,逻辑或输出,加减乘除等表达式输出
原文输出
{{@ value}}
如果输出的 value 值中,包含了 HTML 标签结构,则需要使用原文输出语法,才能保证HTML标签被正常渲染
条件输出
如果要实现条件输出,则可以在 {{}} 中使用 if...else if.../if 的方式,进行按需输出
{{if flag === 0}} flag的值为0 {{else if flag === 1}} flag的值是1 {{/if}}
循环输出
如果要实现循环输出,则可以在{{}} 内,通过 each 语法循环数组,当前循环的索引使用 $index
进行访问,当前循环项使用 $value
进行访问
{{each hobby}} <li>索引是:{{$index}},循环项是{{$value}}</li> {{/each}}
过滤器
{{regTime | dateFormat}} template.defaults.imports.dateFormat = function(date) { // 处理内容 }
模板引擎的实现原理
exec函数
exec()
函数用于 检索字符串 中的正在表达式的匹配
如果字符串中又匹配的值,则返回该匹配值,否则返回 null
分组
正则表达式中 () 包起来的内容表示一个分组,可以通过分组来 提取自己想要的内容,示例代码如下
var str = '<div>我是{{name}}</div>' var pattern = /{{([a-zA-Z]+)}}/ var result = pattern.exec(str)
字符串的 replace 函数
replace() 函数用于在字符串中 用一些字符 替换 另一些字符的
使用循环来replace
while(true) { var result = pattern.exec(str) if(result === null) { break; } str = str.replace(result[0],result[1]) }
DAY3
XMLHttpRequest
的基本使用
XMLHttpRequest
(简称 xhr
)是浏览器提供的 Javascript
对象,通过它,可以请求服务器上的数据资源。之
前所学的 jQuery
中的 Ajax 函数,就是基于 xhr
对象封装出来的
使用xhr
发起GET请求
步骤
-
创建
xhr
对象 -
调用
xhr.open()
函数 -
调用
xhr.send()
函数 -
监听
xhr.onreadystatechange
事件
// 1. 创建 XHR 对象 var xhr = new XMLHttpRequest() // 2. 调用 open 函数 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') // 3. 调用 send 函数 xhr.send() // 4. 监听 onreadystatechange 事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 获取服务器响应的数据 console.log(xhr.responseText) } }
使用xhr
发起带参数的GET请求
定义:查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量)。
格式:将英文的 ? 放在URL
的末尾,然后再加上 参数=值 ,想加上多个参数的话,使用 & 符号进行分隔。
// 携带一个参数 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1') // 携带两个参数‘’ xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=‘西游记’')
URL编码与解码
-
encodeURI()
编码的函数 -
decodeURI()
解码的函数
encodeURI('薛亚岗'); //输出结果为%E8%96%9B%E4%BA%9A%E5%B2%97 decodeURI('%E8%96%9B%E4%BA%9A%E5%B2%97') //输出结果为 薛亚岗
使用xhr
发起POST
请求
-
创建
xhr
对象 -
调用
xhr.open()
函数 -
设置 Content-Type 属性(固定写法)
-
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
-
调用
xhr.send('发送的数据')
函数,同时指定要发送的数据 -
监听
xhr.onreadystatechange
事件
XML和HTML的区别
XML
和 HTML
虽然都是标记语言,但是,它们两者之间没有任何的关系。
-
HTML
被设计用来描述网页上的内容,是网页内容的载体 -
XML
被设计用来传输和存储数据,是数据的载体
JSON
JSON
语法注意事项
① 属性名必须使用双引号包裹
② 字符串类型的值必须使用双引号包裹
③ JSON
中不允许使用单引号表示字符串
④ JSON
中不能写注释
⑤ JSON
的最外层必须是对象或数组格式
⑥ 不能使用 undefined
或函数作为 JSON
的值
JSON
的作用:在计算机与网络之间存储和传输数据。
JSON
的本质:用字符串来表示 Javascript
对象数据或数组数据
序列化和反序列化
把数据对象 转换为 字符串的过程,叫做序列化,例如:调用 JSON.stringify()
函数的操作,叫做 JSON
序列化。
把字符串 转换为 数据对象的过程,叫做反序列化,例如:调用 JSON.parse()
函数的操作,叫做 JSON
反序列化。
封装自己的Ajax函数
function resolveData(data) { var arr = []; for(var k in data) { arr.push(k + '=' + data[k]) } return arr.join('&') } function itheima(options) { var xhr = new XMLHttpRequest() var qe = resolveData(options.data) if(options.method.toUpperCase() === 'GET') { xhr.open(options.method,options.url + '?' + qe) xhr.send() } else if(options.method.toUpperCase() === 'POST') { xhr.open(options.method,options.url) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send(qe) } xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ var result = JSON.parse(xhr.responseText) options.success(result) } } }
XMLHttpRequest Level2
的新特性
XMLHttpRequest Level2
的新功能
-
可以设置 HTTP 请求的时限
-
可以使用
FormData
对象管理表单数据 -
可以上传文件
-
可以获得数据传输的进度信息
设置HTTP
请求时限
xhr.timeout = 30 // 设置超时以后的处理函数 xhr.ontimeout = function () { console.log('请求超时了!') }
FormData
对象管理表单数据
步骤:
-
新建 FormData 对象
-
为 FormData 添加表单项
-
创建 XHR 对象
-
指定请求类型与URL地址
-
直接提交 FormData 对象,这与提交网页表单的效果,完全一样
案例:上传文件
var btn = document.querySelector('#btn') var img = document.querySelector('#img') btn.addEventListener('click',function(){ // 获取到文件的选择列表 var files = document.querySelector('#files').files if(files.length <= 0) return alert('请选择要上传的文件!') var fd = new FormData(); fd.append('avatar',files[0]) var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e){ // 是否具有可计算的长度 if(e.lengthComputable) { e.loaded // 已传输的字节 e.total // 总字节 var procentComplete = Math.ceil((e.loaded / e.total) * 100) console.log(procentComplete); xhr.send(fd); xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText) if(data.status === 200) { img.src = 'http://www.liulongbin.top:3006' + data.url; } else { console.log('图片上传失败' + data.message); } } } })
上传文件
新版 XMLHttpRequest
对象,不仅可以发送文本信息,还可以上传文件。
实现步骤:
① 定义 UI
结构
② 验证是否选择了文件
③ 向 FormData
中追加文件
// 1. 创建 FormData 对象 var fd = new FormData() // 2. 向 FormData 中追加文件 fd.append('avatar', files[0])
④ 使用 xhr
发起上传文件的请求
⑤ 监听 onreadystatechange
事件
JQ实现文件上传
① 定义 UI
结构
② 验证是否选择了文件
③ 向 FormData
中追加文件
④ 使用jQuery
发起上传文件的请求
$.ajax({ method: 'POST', url: 'http://www.liulongbin.top:3006/api/upload/avatar', data: fd, // 不修改 Content-Type 属性,使用 FormData 默认的 Content-Type 值 contentType: false, // 不对 FormData 中的数据进行 url 编码,而是将 FormData 数据原样发送到服务器 processData: false, success: function(res) { console.log(res) } })
jQuery
实现loading
效果
// 监听到ajax事件开始 $(document).ajaxStart(function () { $('#loading').show() }) // 监听到 Ajax 完成的事件 $(document).ajaxStop(function () { $('#loading').hide() })
axios
Axios
是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest
对象,axios
简单易用。
相比于 jQuery
,axios
更加轻量化,只专注于网络数据请求。
axios
发起GET请求
axios.get(url, { params: paramsObj }).then(function(res) { console.log(res.data) })
axios
发起POST
请求
axios.post(url, dataObj).then(function(res) { console.log(res.data) })
直接使用axios
发起请求
axios({ method: '请求类型', url: '请求的URL地址', data: { /* POST数据 */ }, params: { /* GET参数 */ } }).then(callback)
DAY4
同源策略
什么是同源
如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源。
什么是同源策略
同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能
跨域
什么是跨域
同源指的是两个 URL 的协议、域名、端口一致,反之,则是跨域
注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
如何实现跨域数据请求
JSONP
:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET
请求,不支持 POST
请求。
CORS
:出现的较晚,它是 W3C
标准,属于跨域 Ajax
请求的根本解决方案。支持 GET
和 POST
请求。缺点是不兼容某些低版本的浏览器
JSONP
JSONP
的实现原理,就是通过 <script>
标签的 src
属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据
<script> function success(data){ console.log('JSON响应的数据'); console.log(data); } </script> <script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=xyg&age=20"></script>
JSONP
的缺点
由于 JSONP
是通过 <script>
标签的 src
属性,来实现跨域数据获取的,所以,JSONP
只支持 GET
数据请求,不支持 POST 请求。
注意: JSONP
和 Ajax 之间没有任何关系,不能把 JSONP
请求数据的方式叫做 Ajax,因为 JSONP
没有用到XMLHttpRequest
这个对象
jQuery
中的JSONP
$.ajax({ url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20', dataType: 'jsonp', // 发送到服务端的参数名称,默认值为 callback jsonp: 'callback', // 自定义的回调函数名称,默认值为 jQueryxxx 格式 jsonpCallback: 'abc', success: function(res) { console.log(res) } })
jQuery
中JSONP
的实现过程
jQuery
中的 JSONP
,也是通过 <script>
标签的 src
属性实现跨域数据访问的,只不过,jQuery
采用的是动态创建和移除标签的方式,来发起 JSONP
数据请求。
-
在发起
JSONP
请求的时候,动态向<header>
中 append 一个<script>
标签; -
在
JSONP
请求成功以后,动态从<header>
中移除刚才append
进去的<script>
标签;
防抖&节流 (重要)
什么是防抖
防抖策略(debounce
)是当事件被触发后,延迟 n
秒后再执行回调,如果在这 n
秒内事件又被触发,则重新计时。
好处:能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次
防抖的应用场景
用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减
少请求次数,节约请求资源
防抖案例(滚动事件)
<script> function beProtected(){ console.log('我被保护'); } var timer = null; function debounced(){ timer = setTimeout(function(){ beProtected(); },500) } window.onscroll = function(){ console.log('滚动触发'); clearTimeout(timer); debounced(); } </script>
节流
节流策略(throttle
),顾名思义,可以减少一段时间内事件的触发频率。
节流的应用场景
① 鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
② 懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费 CPU 资源;
总结防抖和节流的区别
-
防抖:如果事件被频繁触发,防抖能保证只有最有一次触发生效!前面 N 多次的触发都会被忽略!
-
节流:如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!只有当这一次的事件被处理结束之后,才可以开启下一次。