一、客户端与服务器
1 服务器
① 概念:
上网过程中,负责存放和对外提供资源的电脑,叫做服务器。
2 客户端
① 概念:
上网过程中,负责获取和消费资源的电脑,叫做客户端。
二、URL 地址(网址)
1 概念
URL(全称是UniformResourceLocator),中文叫统一资源定位符,用于标识互联网上每个资源的唯一存放
位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。
2 URL地址的组成部分
URL地址一般由三部组成:
① 客户端与服务器之间的通信协议
② 存有该资源的服务器名称
③ 资源在服务器上的具体存放位置
三、客户端与服务器的通信过程
第一步:客户端向服务器发送请求
第二步:服务器处理这次请求
第三步:服务器响应客户端
注意:
① 客户端与服务器之间的通信过程,分为 请求-处理-响应 三个步骤。
② 网页中的每一个资源,都是通过 请求-处理-响应 的方式从服务器获取过来的。
四、服务器对外提供资源
1 网页中如何请求数据
① 数据,也是服务器对外提供的一种资源。只要是资源,必然要通过请求-处理-响应的方式进行获取。
② 如果要在网页中请求服务器上的数据资源,则需要用到 XMLHttpRequest 对象。
③ XMLHttpRequest(简称xhr),是浏览器提供的 JS 成员,通过它,可以请求服务器上的数据资源。
2 资源的请求方式
客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 get 和 post 请求。
① get 请求通常用于获取服务器资源,简单来说就是向服务器要资源
例如:根据URL地址,从服务器获取 html文件、css文件、js文件、图片文件、数据资源等
② post 请求通常用于向服务器提交数据,简单来说就是往服务器发送资源
例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向
服务器提交的用户信息等各种数据提交操作
五、了解 Ajax
1 什么是 Ajax
① Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)。
② 通俗的理解,在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax。
2 为什么要学习 Ajax
之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但是,Ajax能让我们轻松
实现网页与服务器之间的数据交互。
3 Ajax 的典型应用场景
① 用户名检测:注册用户时,通过Ajax的形式,动态检测用户名是否被占用
② 搜索提示:当输入搜索关键字时,通过Ajax的形式,动态加载搜索提示列表
③ 数据分页显示:当点击页码数的时候,通过Ajax的形式,根据页码数动态刷新表格的数据
④ 数据的增删改查:数据的添加、删除、修改、查询操作,都需要通过Ajax的形式,来实现数据的交互
总结:
只要是跟服务器有关的操作都需要用到 Ajax。
六、jQuery 中的 Ajax
1 了解jQuery中的Ajax
浏览器中提供的 XMLHttpRequest 用法比较复杂,所以jQuery对XMLHttpRequest进行了封装,提供了
一系列Ajax相关的函数,极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下:
$.get()、$.post()、$.ajax()
2 $.get() 函数语法
$.get() 函数专门用来发起 get 请求,从而将服务器上的资源请求到客户端来进行使用。
语法:
$.get(url, [data], [callback])
参数说明:
url,该参数的类型为 string,必填,它是要请求的资源地址
data,该参数的类型为 object,可不填,它是请求资源期间要携带的参数
callback,该参数的类型为 function,可不填,它是请求成功时的回调函数
3 $.post() 函数语法
$.post() 函数专门用来发起post请求,从而向服务器提交数据。
语法:
$.post(url, [data], [callback])
参数说明:
url,该参数的类型为 string,必填,它是提交数据的地址
data,该参数的类型为 object,可不填,它是要提交的数据
callback,该参数的类型为 function,可不填,它是数据提交成功时的回调函数
4 $.ajax() 函数语法
$.ajax() 函数是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。
语法:
$(function() {
$.ajax({
type: ' ',
url: ' ',
data: ' ',
success: function(res) {
}
})
})
参数说明:
① type:请求的方式,有 GET 或 POST,大小写都可以,建议大写
② url:请求的 URL 地址
③ data:当前请求要携带的数据
④ success: function(res) { }:请求成功之后的回调函数
七、接口
1 概念
使用 Ajax 请求数据时,被请求的URL地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。
2 接口测试工具
① 什么是接口测试工具:
为了验证接口能否被正常被访问,我们常常需要使用接口测试工具,来对数据接口进行检测。
② 接口测试工具的好处:
接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。
③ 下载并安装 postwoman:
下载教程地址:postwoman接口调试插件(postman)_哔哩哔哩_bilibili
3 接口文档
① 什么是接口文档:
接口文档,其实就是接口的说明书,它是我们调用接口的依据。好的接口文档包含了对接口URL,
参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。
② 接口文档的组成部分:
接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,
应该包含以下6项内容,从而为接口的调用提供依据:
(1) 接口名称:用来标识各个接口的简单说明,如登录接口,获取图书列表接口等。
(2) 接口URL:接口的调用地址。
(3) 调用方式:接口的调用方式,如GET或POST。
(4) 参数格式:接口需要传递的参数,每个参数必须包含参数名称、参数类型、是否必选、参数说明
这4项内容。
(5) 响应格式:接口返回值的详细描述,一般包含数据名称、数据类型、说明3项内容。
(6) 返回示例(可选):通过对象的形式,例举服务器返回数据的结构。
八、form 表单的基本使用
1 什么是表单
表单在网页中主要负责数据采集功能。HTML中的<form>标签,就是用于采集用户输入的信息,
并通过<form>标签的提交操作,把采集到的信息提交到服务器进行处理。
2 表单的组成部分
由三个基本部分组成:
● 表单标签
● 表单域
● 表单按钮
3 <form>标签
<form>标签用来采集数据,<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
① action 属性
(1) action属性用来规定当提交表单时,向何处发送表单数据。
(2) action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据。
(3) 当<form>表单在未指定action属性值的情况下,action的默认值为当前页面的URL地址。
(4) 当提交表单后,页面会立即跳转到action属性指定的URL地址
其它属性去菜鸟教程查看
4 表单的同步提交及缺点
① 什么是表单的同步提交
通过点击submit按钮,触发表单提交的操作,从而使页面跳转到 action URL的行为,叫做表单的同步提交。
② 表单同步提交的缺点
(1) <form>表单同步提交后,整个页面会发生跳转,跳转到 action URL所指向的地址,用户体验很差。
(2) <form>表单同步提交后,页面之前的状态和数据会丢失。
③ 如何解决表单同步提交的缺点
解决方案:表单负责采集数据,Ajax 负责将数据提交到服务器。
九、通过Ajax提交表单数据
1 监听表单提交事件
注意:是给<form>标签绑定提交事件
① 通过 submit() 函数
或者
② 通过 on() 函数
2 阻止表单默认提交行为
当监听到表单的提交事件以后,可以调用事件对象的 e.preventDefault() 函数,来阻止表单提交时页面发生跳转。
3 快速获取表单中的数据
① 说明:
如果<input>标签有10个、20个,那么你要定义10个、20个变量来获取<input>里面的value,
这样很繁琐。为了简化表单的获取数据操作,jQuery 提供了 serialize() 函数。
serialize() 函数可以一次性获取到表单中的所有数据。
② serialize() 函数:
(1) 语法:
$('选择器').serialize()
(2) 例子:
<body>
<form action="" method="post" id="zhuce">
<input type="text" id="userName" value="" name="userName"/>
<input type="password" name="userPassword" />
<input type="submit" value="提交"/>
</form>
</body>
<script>
$(function() {
$('#zhuce').submit(function(e) {
e.preventDefault()
let userdata = $(this).serialize()
console.log(userdata); //打印结果为 userName=11&userPassword=11
})
})
</script>
注意:在使用 serialize() 函数快速获取表单数据时,必须为每个表单元素添加 name 属性!
十、模板引擎
1 渲染UI结构时遇到的问题
以前呢,在动态添加标签时,是通过字符串拼接的形式来完成的。如果html结构比较复杂,
则拼接字符串的时候需要格外注意引号之间的嵌套,且一旦需求发生变化,因为代码可读性差,
所以修改起来也非常麻烦。那接下来介绍的模板引擎就可以解决这个问题。
2 什么是模板引擎
模板引擎,它可以根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面。
3 模板引擎的好处
① 减少了字符串的拼接操作
② 使代码结构更清晰,可读性更强
③ 使代码更易于阅读与维护
十一、art-template 模板引擎
1 art-template 简介
art-template是一个简约、超快的模板引擎。好吧,其实它是个 js 文件。。。
中文官网首页为:http://aui.github.io/art-template/zh-cn/,百度搜索关键词也行。
2 art-template 安装
在浏览器中访问官网,找到下载链接后,鼠标右键,选择“链接另存为”,将 template-web.js 下载到本地
3 art-template的使用步骤
① 导入 template-web.js 文件
② 定义数据
③ 定义模板
④ 调用template函数
⑤ 渲染HTML结构
4 例子
<body>
<div class="content"></div>
</body>
<script type="text/html" id="user">
// 定义模板
<div>
姓名:<span>{{name}}</span>
</div>
<div>
年龄:<span>{{age}}</span>
</div>
</script>
<script type="text/javascript">
// 定义数据
const data = {
name: '英雄联盟',
age: '11周年'
}
// 调用template函数
let htmlUser = template('user',data);
$(function() {
// 渲染HTML结构
$('.content').html(htmlUser)
})
</script>
代码说明:
① 定义模板的 script 标签里的 type 必须写成 text/html,不写默认是 text/javascript,text/javascript 意思是在
script 标签里的所有代码都被当成 JS 处理;写成 text/html,script 标签里的所有代码都被当成 html 处理。
② 定义模板的 script 标签里必须加上一个 id 属性,到时候这个 id 属性作为 template 函数的参数。
③ 定义模板 必须在 定义数据 前面
④ 定义模板里的 {{}} 是 template 函数所提供的一种语法,花括号里面可以直接写入定义数据的属性,
比如:<span>{{name}}</span>
⑤ template(object,data) 里面有两个参数,第一个参数是定义模板的 script 标签里的 id,而且是个字符串
第二个参数是定义数据,之后该函数会返回一个 html 结构,你的模板长啥样,这个html 结构就长啥样,
然后拿一个变量接收返回的结果,最后把该结果渲染到页面中
十二、art-template 标准语法
1 什么是标准语法
art-template 提供了 {{ }} 这种语法格式,在 {{ }} 内可以进行 变量输出 或 循环数组 等操作,
这种 {{ }} 语法在 art-template 中被称为标准语法。
2 标准语法:输出
{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a ll b}}
{{a && b}}
{{a + b}}
在 {{ }} 语法中,可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、逻辑与输出、
加减乘除等表达式输出。
3 标准语法:原文输出
{{@ 属性名}}
如果要输出的值中,包含了 HTML 标签结构,则需要使用原文输出语法,才能保证 HTML 标签被正常渲染。
不然 template 会把标签当作文本直接输出到页面上,比如 <h1>666</h1>。
4 标准语法:条件输出
如果要实现条件输出,则可以在 {{ }} 中使用条件判断的方式,按需求输出。用法与 JS 一样
语法①:
{{if 条件}}
符合判断则输出
{{/if}}
语法②:
{{if flag == 1}}
符合判断则输出
{{else if flag == 2}}
符合判断则输出
{{/if}}
5 标准语法:循环输出
如果要实现循环输出,则可以在 {{ }} 内,通过 each 语法循环数组,当前循环的索引使用 $index 进行访问,
当前循环的元素使用 $value 进行访问。
{{each 数组名}}
{{$index}},{{$value}}
{{/each}}
6 标准语法:过滤器
过滤器的本质,就是一个 function 处理函数。过滤器语法类似管道操作符,它的上一个输出作为下一个输入。
语法:
{{value | filter}}
template.defaults.imports.filter = function(value) { /*return处理的结果*/}
示例:
<script type="text/html" id="user">
<div>
系统时间:{{regTime | filterDate}}
</div>
</script>
<script type="text/javascript">
// 过滤器一定要写在渲染HTML结构前面
template.defaults.imports.filterDate = function(value) {
let year = value.getFullYear();
let month = value.getMonth();
let day = value.getDate();
return year+'-'+month+'-'+day //一定要把结果返回
}
</script>
十三、XMLHttpRequest 的基本使用
1 什么是 XMLHttpRequest
XMLHttpRequest(简称xhr) 是浏览器提供的 JavaScript 对象,通过它,可以请求服务器上的数据资源。
之前所学的 jQuery 中的 Ajax 函数,就是基于 xhr 对象封装出来的。接下来介绍的是用原生 JS 对 Ajax
进行操作。
2 使用 xhr 发起 GET 请求
① 步骤:
(1) 创建 xhr 对象
(2) 调用 xhr.open() 函数
(3) 调用 xhr.send() 函数
(4) 监听 xhr.onreadystatechange 事件
注意:这些函数的使用方法去菜鸟教程查看
② 示例:
// 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 调用 xhr.open() 函数, 指定 请求方式 与 URL 地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
// 调用 xhr.send() 函数, 发起 Ajax 请求
xhr.send()
// 监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = function() {
// 监听 xhr 对象的请求状态 readyState, 与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
注意:以上是固定写法,记住就行
3 了解 xhr 对象的 readyState 属性
XMLHttpRequest对象的readyState属性,用来表示当前 Ajax 请求所处的状态。
每个 Ajax 请求必然处于以下状态中的一个:
值 状态 描述
0 unsent XMLHttpRequest对象已被创建,但尚未调用open方法。
1 opened open() 方法已经被调用。
2 headers_received send() 方法已经被调用,响应头也已经被接收。
3 loading 数据接收中,此时response属性中已经包含部分数据。
4 done Ajax请求完成,这意味着数据传输已经彻底完成或失败。
4 使用 xhr 发起带参数的 GET 请求
使用xhr对象发起带参数的GET请求时,只需在调用 xhr.open() 期间,为URL地址指定参数即可。
示例:
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')
这种在URL地址后面拼接的参数,叫做查询字符串。
5 查询字符串
① 什么是查询字符串
定义:
查询字符串 (URL参数) 是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。
格式:
将英文的 ? 放在URL的末尾,然后再加上 参数=值,想加上多个参数,要使用 & 符号进行分隔。
以这个形式,可以将想要发送给服务器的数据添加到URL中。
示例:
// 不带参数的URL地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
6 GET请求携带参数的本质
无论是使用 $.ajax(),还是使用 $.get(),又或者直接使用 xhr 对象发起GET请求,当需要携带参数的时候,
本质上,都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的。
7 URL编码与解码
① 什么是URL编码:
URL地址中,只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。
如果 URL 中需要包含中文这样的字符,则必须对中文字符进行编码 (转义)。
URL编码的原则:使用安全的字符 (没有特殊用途或者特殊意义的可打印字符) 去表示那些不安全的字符。
URL编码原则的通俗理解:使用英文字符去表示非英文字符。
② 如何对URL进行编码与解码:
浏览器提供了URL编码与解码的API,分别是:
encodeURI(),编码的函数
decodeURI(),解码的函数
示例:
let str1 = '余某'
let str2 = '%E4%BD%99'
let str3 = encodeURI(str1)
console.log(str3); //打印结果为 %E4%BD%99%E6%9F%90
let str4 = decodeURI(str2)
console.log(str4); //打印结果为 余
代码解释:
对中文进行编码,它是以三组编码转为一个文字,比如,%E4%BD%99 等于 余
③ URL编码的注意事项
由于浏览器会自动对URL地址进行编码操作,因此,大多数情况下,程序员不需要关心URL地址的编码与解码操作。
8 使用 xhr 发起 POST 请求
① 步骤:
(1) 创建 xhr 对象
(2) 调用 xhr.open() 函数
(3) 设置 Content-Type 属性 (固定写法)
(4) 调用 xhr.send() 函数,同时指定要发送的数据
(5) 监听 xhr.onreadystatechange 事件
② 示例:
// 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 调用 xhr.open() 函数, 指定 请求方式 与 URL 地址
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 设置 Content-Type 属性 (固定写法)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 调用 xhr.send() 函数, 同时将数据以查询字符串的形式, 提交给服务器
xhr.send('bookname=三国志&author=陈寿&publisher=南宁图书馆出版社')
// 监听 xhr.onreadystatechange 事件
xhr.onreadystatechange = function() {
// 监听 xhr 对象的请求状态 readyState, 与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
注意:以上是固定写法,记住就行
十四、数据交换格式
1 什么是数据交换格式
数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域,经常提及的两种数据交换格式分别是 XML 和 JSON。其中XML用的非常少,
所以,我们重点学习的数据交换格式就是 JSON。
十五、JSON
1 什么是 JSON
JSON的英文全称是 JavaScript Object Notation,即“JavaScript对象表示法”。
简单来讲,JSON就是用字符串来表示Javascript 的对象 和 数组,它使用文本表示一个JS对象或数组的信息,
因此,JSON的本质是字符串。
2 JSON 的作用
JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,
但是JSON比 XML更小、更快、更易解析。
3 JSON 的现状
JSON是在2001年开始被推广和使用的数据格式,到现今为止,JSON已经成为了主流的数据交换格式。
4 JSON的两种结构
JSON就是用字符串来表示Javascript的对象和数组。所以,JSON中包含对象和数组两种结构,
通过这两种结构的相互嵌套,可以表示各种复杂的数据结构。
① 对象结构:
对象结构在JSON中表示为 { } 括起来的内容。数据结构为 {key: value, key: value,....} 的键值对结构。
其中,key 必须是使用英文的双引号包裹的字符串,value 的数据类型可以是数值型、字符串、布尔值、
null、数组、对象 6种类型。字符串必须使用英文的双引号包裹
示例:
{
name: "zzh",
'age': 20,
"sex": '男',
"address": undefined,
"hobby": ["1","2",'3'],
say: function() { }
}
代码说明:
name: "zzh" 语法错误,name 是 key,要拿英文的双引号包裹,正确的写法是 "name"。
'age': 20 语法错误,'age' 改为 "age"。
"sex": '男' 语法错误,字符串必须使用英文的双引号包裹,所以 '男' 改为 "男"。
"address": undefined 语法错误,value 的数据类型不包含 undefined,建议改为 null。
"hobby": ["1","2",'3'] 语法错误,数组里的 '3' 改为 "3"。
say: function() {} 语法错误,say 改为 "say",value 的数据类型不包含函数。
② 数组结构:
数组结构在JSON 中表示为[]括起来的内容。数据结构为["java" , "javascript", 30, true ...]。
数组中数据的类型可以是数值型、字符串、布尔值、null、数组、对象 6种类型。与对象结构一样,
凡是字符串必须使用双引号。
③ JSON语法注意事项
(1) 属性名必须使用双引号包裹
(2) 字符串类型的值必须使用双引号包裹
(3) JSON中不能写注释
(4) JSON的最外层必须是对象或数组格式
(5) 不能使用 undefined 或 函数 作为JSON的值
5 JSON 和 JS对象、数组的相互转化
要实现JSON字符串转换为JS对象,使用 JSON.parse(str) 方法:
let jsonStr = '{"a": "yu","b": "fish"}';
let obj = JSON.parse(jsonStr)
console.log(obj); //打印结果为 {a: "yu", b: "fish"}
console.log(typeof obj); //打印结果为 object,说明确实转换成对象了
要实现JSON字符串转换为JS数组,使用 JSON.parse(str) 方法:
let jsonStr = '["a","b"]';
let arr = JSON.parse(jsonStr)
console.log(arr); //打印结果为 ["a", "b"]
console.log(arr instanceof Array); //打印结果为 true,说明确实转换成数组了
要实现JS对象转换为JSON字符串,使用 JSON.stringify(obj) 方法:
let obj = {
a: 'yu',
b: 'fish'
}
let jsonStr = JSON.stringify(obj)
console.log(jsonStr); //打印结果为 {"a":"yu","b":"fish"}
console.log(typeof jsonStr); //打印结果为 string,说明确实转换成字符串了
要实现JS数组转换为JSON字符串,使用 JSON.stringify(arr) 方法:
let arr = ['a','b'];
let jsonStr = JSON.stringify(arr)
console.log(jsonStr); //打印结果为 ["a","b"]
console.log(typeof jsonStr); //打印结果为 string,说明确实转换成字符串了
6 序列化和反序列化
把对象转换为字符串的过程,叫做序列化,例如:调用JSON.stringify()函数的操作,叫做JSON序列化。
把字符串转换为对象的过程,叫做反序列化,例如:调用JSON.parse()函数的操作,叫做JSON反序列化。
十六、XMLHttpRequest Level2 的新特性
1 认识 XMLHttpRequest Level2
① 旧版 XMLHttpRequest 的缺点:
(1) 只支持文本数据的传输,无法用来读取和上传文件。
(2) 传送和接收数据时,没有进度信息,只能提示有没有完成。
② XMLHttpRequest Level2 的新功能
(1) 可以设置 HTTP 请求的时限
(2) 可以使用 FormData 对象管理表单数据
(3) 可以上传文件
(4) 可以获得数据传输的进度信息
2 设置 HTTP 请求时限
① 说明:
有时,Ajax 操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。
XMLHttpRequest Level2 对象增加了 timeout 属性,可以设置 HTTP 请求的时限。
设置 HTTP 请求时限的代码写在 open() 函数前面。
② 语法:
xhr.timeout = 3000
语法说明:
将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。
与之配套的还有一个timeout事件,用来指定回调函数。
xhr.ontimeout = function(e) {
alert('请求超时!')
}
代码说明:
当请求时间超过了最长等待时间,就会触发 ontimeout 事件,执行里面的回调函数。
3 FormData 对象管理表单数据
① 说明:
Ajax 操作往往用来提交表单数据。为了方便表单处理,HTML5 新增了一个 FormData 对象,
可以模拟表单操作。
② 示例:
// 1 新建 FormData 对象
let fd = new FormData();
// 2 为 FormData 添加表单项
fd.append('uname','zzh')
fd.append('upwd','123456')
// 3 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 4 指定请求类型与URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata');
// 5 直接提交 FormData 对象, 这与提交网页表单的效果, 完全一样
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
把打印结果展开会看到 data: {uname: "zzh", upwd: "123456"},说明数据添加成功
③ FormData 对象也可以用来获取网页表单的值,示例代码如下:
<body>
<form action="" method="post" id="zhuce">
<input type="text" id="userName" value="" autocomplete="off" name="uname"/>
<input type="password" name="password"/>
<input type="submit" value="提交" />
</form>
</body>
<script>
let zhuce = document.querySelector('#zhuce')
zhuce.onsubmit = function(e) {
e.preventDefault()
// 1 新建 FormData 对象
let fd = new FormData(zhuce);
// 2 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 3 指定请求类型与URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata');
// 4 直接提交 FormData 对象
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
}
</script>
代码说明:
把打印结果展开会看到 data: {uname: "zzh", password: "123"},说明说明数据添加成功。
<input> 标签里一定要加 name 属性,否则 data 为空,就添加数据失败了。
4 上传文件
XMLHttpRequest Level2 对象,不仅可以发送文本信息,还可以上传文件。
① 实现步骤:
(1) 定义 html 结构
(2) 验证是否选择了文件
(3) 向 FormData 中追加文件
(4) 使用 xhr 发起上传文件的请求
(5) 监听 onreadystatechange 事件
② 示例:
<body>
<input type="file" id="file" />
<button id="shangchuan">上传文件</button>
<br />
<!-- 显示上传到服务器上的图片 -->
<img src="" id="img" width="500">
</body>
<script>
let shangchuan = document.querySelector('#shangchuan');
let file = document.querySelector('#file')
let img = document.querySelector('#img')
shangchuan.onclick = function() {
// 验证是否选择了文件
if (file.files.length <= 0) {
return alert('请选择要上传的文件')
}
let fd = new FormData();
// 向 FormData 中追加文件
fd.append('touxiang', file.files[0])
let xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let dataImg = JSON.parse(xhr.responseText)
if (dataImg.status === 200) {
// 上传成功把上传的图片显示在页面上
img.src = 'http://www.liulongbin.top:3006' + dataImg.url
} else {
// 上传失败把返回数据里的信息弹出
alert(dataImg.message)
}
}
}
}
</script>
5 显示文件上传进度
XMLHttpRequest Level2 对象,可以通过监听 xhr.upload.onprogress 事件,来获取到文件的上传进度。
语法格式:
let xhr = new XMLHttpRequest()
// 监听 xhr.upload.onprogress 事件
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
// 计算出上传的进度
let percentComplete = Math.ceil((e.loaded / e.total) * 100);
console.log(percentComplete);
}
}
代码说明:
e.lengthComputable 是一个布尔值,表示当前上传的资源是否具有可计算的长度。
e.loaded 是已传输的字节。
e.total 是需要传输的总字节。
当文件上传成功时,还可以提示用户,这时用到 xhr.upload.onload 事件,
该事件是在 xhr.upload.onprogress 事件完成后触发,语法格式:
xhr.upload.onload = function() {
progress_bar.className = 'progress-bar progress-bar-success'
progress_bar.innerText = '图片上传成功!'
}
十七、了解同源策略和跨域
1 同源策略
① 什么是同源:
如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源。端口不写则默认是 80。
② 什么是同源策略:
同源策略(英文全称Same origin policy) 是浏览器提供的一个安全功能。
浏览器规定,A网站的 JavaScript 不允许和非同源的B网站之间进行资源交互,例如:
(1) 无法读取非同源网页的Cookie、LocalStorage 和IndexedDB。
(2) 无法对非同源网页进行 DOM 操作。
(3) 无法向非同源地址发送 Ajax 请求。
2 跨域
① 什么是跨域
与同源相反,跨域指如果两个页面的协议,域名和端口有一个不同 或 全都不同。
② 浏览器对跨域请求的拦截
浏览器允许发起跨域请求,跨域请求可以正常发起,服务器也可以正常的处理并响应跨域请求,
但是响应的数据不会直接给浏览器,而是先给同源策略,由同源策略判断这次请求是不是跨域,
如果是跨域,服务器响应的数据就被同源策略拦截,浏览器就无法得到服务器响应回来的数据,
如果不是跨域,浏览器就可以得到服务器响应回来的数据。
③ 如何实现跨域请求
现如今,实现跨域请求,最主要的两种解决方案,分别是 JSONP 和 CORS。
JSONP:出现的早,兼容性好 (兼容低版本IE)。是前端程序员为了解决跨域问题,
迫想出来的一种临时解决方案。缺点是只支持GET请求,不支持POST请求。
CORS:出现的较晚,它是W3C标准,属于跨域请求的根本解决方案。支持GET和POST请求。
缺点是不兼容某些低版本的浏览器。
十八、JSONP
1 JSONP 的实现原理
<script>标签不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的 js 脚本。
因此,JSONP的实现原理,就是通过<script>标签的src属性,请求跨域的数据接口,
并通过函数调用的形式,接收跨域接口响应回来的数据。
2 原生JS中的JSONP
<script>
function success(data) {
console.log(data);
}
</script>
<script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=zs&age=20">
</script>
代码说明:
JSONP 和 Ajax 之间没有任何关系,不能把JSONP请求数据的方式叫做 Ajax,
因为 JSONP 没有用到 XMLHttpRequest 这个对象。那该如何接收服务器响应回来的数据呢?
这个时候我们可以自定义一个函数用来接收服务器响应回来的数据,然后利用查询字符串在接口
后面写上 callback=你自定义的函数,自定义函数里面有一个形参,用来接收服务器响应回来的数据,
callback=你自定义的函数 就是告诉服务器要调用那个函数。
3 jQuery中的JSONP
jQuery 提供的 $.ajax() 函数,除了可以发起真正的 Ajax 请求之外,还能够发起 JSONP 请求,例如:
$(function() {
$.ajax({
url: 'http://www.liulongbin.top:3006/api/jsonp?name=zzh&age=20',
dataType: 'jsonp',
success: function(res) {
console.log(res);
}
})
})
默认情况下,使用jQuery发起JSONP请求,会自动携带一个callback=jQueryxxx的参数,
jQueryxxx是随机生成的一个回调函数名称。
4 自定义参数及回调函数名称
在使用jQuery 发起JSONP请求时,如果想要自定义JSONP的参数以及回调函数名称,
可以通过如下两个参数来指定:
$(function() {
$.ajax({
url: 'http://www.liulongbin.top:3006/api/jsonp?name=zzh&age=20',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'zzh',
success: function(res) {
console.log(res);
}
})
})
jsonp 参数用来修改参数,但一般不修改,默认 callback 就行。
jsonpCallback 参数用来修改回调函数的名字。
5 jQuery中JSONP的实现过程
jQuery 中的JSONP,也是通过<script>标签的 src 属性实现跨域数据访问的,只不过,
jQuery 采用的是动态创建和移除<script>标签的方式,来发起 JSONP 请求。
● 在发起 JSONP 请求的时候,动态的向<header>标签 append 一个<script>标签。
● 在 JSONP 请求成功以后,动态的从<header>标签移除刚才 append 进去的<script>标签。