客户端与服务器:
在上网过程中客户端负责获取数据,服务器负责发送和接受数据
url的组成:
通信协议+服务器地址+路径
抓包
通过F12开发人员工具,选择网络选项进行数据获取
资源分为静态资源和动态资源,静态资源指的是页面中img、js、css等一切固定的内容,动态资源指的是从服务器中请求到的数据内容
ajax是一种异步请求数据的web开发技术(在不需要重新刷新页面的情况下,通过异步请求加载后台数据,实现局部刷新)
Portman可以在不写任何代码的情况下更快捷的从某个服务器获取到数据,用来对接口的调用和调试
接口文档
什么是接口文档
1、项目开发过程中前后端工程师有一个统一的文件进行沟通交流开发2、项目维护中或者项目人员更迭,方便后期人员查看、维护
接口分为四部分:方法、uri、请求参数、返回参数
表单的组成
-
表单标签
-
表单域:包含各种框
-
表单按钮
form 标签的属性
-
action:表单数据提交到的路径,向何处发送表单
-
target:_self 在本窗扣进行跳转;__blank在新的窗口进行跳转
-
method:规定表单数据以何种方式提交到 action URL,默认值是 get
-
get:提交少量、简单的数据
-
post:提交大量、复杂的数据,或包含文件上传数据
-
-
enctype:提交表单数据之间,对表单数据进行编码
-
application/x-www-form-urlencoded:发送之前编码所有字符(默认)
-
multipart/form-data:不对字符进行编码,在使用包含文件上传控件的表单时,必须使用该值
-
....最后一个基本不用
-
表单同步提交
-
点击 submit 按钮时,触发表单提交的操作,从而跳转到 action URL 的行为
-
表单同步提交的缺点:
-
提交数据立即跳转网页,用户体验不好
-
跳转页面后,原本页面的数据、信息会被清除
-
-
缺点的解决方法:
-
表单只用来收集数据,用 ajax 来将数据提交到服务器
-
ajax 提交表单数据
-
监听表单提交事件,并获取表单数据
$('#form1').on('submit',function(e){ alert('监听表单提交事件成功') // 阻止表单默认行为(提交) e.preventDefault() 获取表单数据 $(this).serialize() })
模板引擎
-
概念:根据程序员设定的 模板结构 和 数据 ,渲染页面
-
好处:
-
减少了字符串的拼接
-
使代码结构更加清晰
-
使代码便于阅读和维护
-
-
使用步骤:
-
引入 template-web.js 文件
-
定义数据(要渲染的数据)
-
定义模板
-
模板的 HTML 结构,必须定义到 script 标签中,注意:需要把 type 属性改成 text/html
-
给模板添加一个 id
-
模板里面如果需要使用传入的数据,利用 {{}}来实现
-
调用 template 函数 ,函数的返回值就是拼接好的字符串
var htmlStr=template('id',data)
-
渲染 HTML 结构
-
-
模板引擎标准语法
-
{{}}
-
输出
{{value}} {{obj.key}} {{obj['key']}} {{a?b:c}} {{a||b}} {{a+b}}
-
原文输出:如果输出的 value 值中,包含了 HTML 标签结构,则需要使用原文输出的方法,才保证 HTML 标签被真正的渲染
{{@ value}}
-
条件输出
{{if value}} {{/if}} {{if value1}} {{else if value2}} {{/if}}
-
循环输出
{{each arr}} {{$index}}---{{$value}} {{/each}}
-
过滤器
{{value | filterName}} // 定义过滤器的语法 template.defaults.imports.filterName=function(value){ return 处理的结果 }
1. XMLHttpRequest对象
xhr对象的使用
步骤
- 创建 xhr 对象
- 调用 xhr.open() 函数
- 调用 xhr.send() 函数
- 监听 xhr.onreadystatechange 事件
<script>
//发起get请求
;let xhr = new XMLHttpRequest() // 创建xhr对象
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') // 使用open函数
xhr.send() // 使用send函数
xhr.onreadystatechange = () => {
// readyState 请求状态
;if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
// 发起post请求
;在open下一行设置Content-Type属性
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 在send内填写参数
;xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 查询字符串
var xhr = new XMLHttpRequest()
// 这种在 URL 地址后面拼接的参数,叫做查询字符串。
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
</script>
了解xhr对象的readyState属性
XMLHttpRequest 对象的 readyState 属性,用来表示当前 Ajax 请求所处的状态。 当前只需了解值等于4时 , 请求完成.
2. 数据交换格式 JSON
前端领域 , 经常提及的数据交换格式分别是XML和JSON , 实际工作用的基本都是JSON
-XML
- XML也是一种标记语言 , 但和HTML没有任何关系
- XML用来存储和传输数据 , HTML用来展示数据
- XML格式臃肿 , 体积大 , 传输效率低 , 在JS中解析比较麻烦
-JSON(重要)
JSON的本质就是字符串 , 作用类似XML , 传输和存储数据 , 但JSON的体积更小 , 传输速度更快 , 解析简单. JSON内部的值可以是数字 , 字符串 , 布尔值 , null , 数组 , 对象 , 键必须用双引号包裹 , 值如果是字符串也必须双引
JSON的两种结构:
{
"name": "zs",
"age": 18
};
// 数组结构
["java","python","c++"]
[100,200,300]
[true,false,null]
注意: 以上结构都要包裹在引号内
JSON对象和JSON字符串的相互转换 JSON.parse() 转换为对象(反序列化) JSON.stringify() 转换为字符串(序列化)
3. XMLHttpRequest Level2新特性
- timeout 设置超时时间 单位毫秒
- ontimeout 超过设定时间执行的函数
H5新增的FormData对象 可以用于上传文件
<script>
;// 获取表单中所有数据
;let fd = new FormData(传入原生form元素);
// 获取文件上传框中所有文件
$('#file').files[0]
</script>
什么是同源
如果两个页面的协议、域名、端口都相同,则两个页面具有相同的源(老乡关系)
当一个网页的域名后没有跟(:数字)时,则这个地址的端口默认为80
什么是同源策略
同源策略使浏览器提供的一个安全功能,用于隔离潜在恶意文件的重要安全机制
指的是一个网站的脚本,不允许和非同源网站之间进行资源的交互:
1.无法读取非同源网页的cookie、LocalStoreage和indexedDB
2.无法接触非同源网页的DOM
3.无法向非同源地址发送Ajax请求
什么是跨域
当两个页面的协议、域名、端口有一种不一致就是跨域(外地关系)
出现跨域的原因使因为浏览器的同源策略不允许非同源的URL之间进行资源交互
浏览器是可以发起跨域请求的,被请求的服务器也会正常接受并相应回数据,但会被浏览器拦截到,从而无法被页面获取
JSONP
只支持GET请求,不支持POST
本质是js脚本,不是Ajax
实现原理
通过script标签的src属性,请求跨域的数据接口,并通过函数调用接受跨域接口响应回来的数据
防抖
当事件触发后,延迟n秒后再执行回调,如果在延迟时间段中事件再次触发,则会重新计时
实现防抖
1.定义延时器的id
2.定义防抖的函数
3.触发事件时清空定时器
实现缓存
1.定义全局缓存对象
2.将结果通过键值对的形式保存到缓存对象
3.在向服务器请求数据之前先判定缓存中是否有这个属性,如果有直接读取
节流
在一段时间内,事件被重复触发,只执行一次
实现节流
1.定义全局节流变量
2.表示可以执行下次操作;不为空,表示不能执行下次操作
3.当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作
4.每次执行操作前,必须先判断节流阀是否为空0.
防抖和节流
当事件被重复触发时,防抖只有最后一次生效,前面不管触发多少次都会被忽略,节省请求资源(王者荣耀重复回城效果)
节流会减少事件触发的频率(王者荣耀攻击按钮)