Ajax：跨域、防抖和节流、HTTP协议
在善意的“双向奔赴”中，每个普通人都如星辰，微小但释放着自己的光芒，交织成灿烂的星河
文章目录
- 跨域
- 防抖和节流
- HTTP协议
- HTP状态码以及代表意义
- 错误代码的影响
- 移动的小天使
跨域
- 同源策略
- 概念：协议，域名，端口都一样
- 协议：例如 http或者https
- 域名：例如 www.bai.com
- 端口：http协议默认端口是80，https默认端口是443
- 概念：协议，域名，端口都一样
- 两个非同源的URL带来的影响
- 无法读取非同源网页的cookie、LocalStorage和IndexedDB
- 无法接触非同源网页的dom
- 无法向非同源地址发送ajax请求 (可以去请求，浏览器会阻止接收结果)
- 跨域
- 概念：违反了同源策略的ajax请求
- 实现跨域
- JSONP
- 步骤
- 随便准备一个函数，用于接收服务器返回的结果
- 函数要有一个形参，形参就是服务器返回的结果
- 定义一个script标签，标签的src指向接口地址
- 必须执行callback函数，函数的值是前面准备好的函数名
- 随便准备一个函数，用于接收服务器返回的结果
- 原理：当请求接口之后，接口返回一段调用函数的代码，调用的函数(就是我们准备好的函数)就是向接口发送请求时携带的callback函数
- 步骤
- 安装第三方包
- CORS (跨资源共享)
- 服务器代理
- 用node.js中间件代理跨域
Access-Control-Allow-Origin: '*'
- JSONP
防抖和节流
- 防抖
- 概念：防抖策略是当事件被触发后，延迟n秒在执行回调，如果在n秒内事件又被触发，则重新计时
- 实现步骤
- 设置
var timer = null放抖动的timer - 判断timer是否为null，如果不为null则清除定时器
- 设置定时器，约定一段时间后执行某些功能函数
- 设置
- 节流
- 概念：节流策略可以减少一段时间内事件的触发频率 (减少事件内部代码的执行次数)
- 实现步骤
- 设置节流阀
var timer = null - 事件内部判断timer，如果timer不为null (说明有一个定时器正在执行)，则return
- 设置定时器，在定时器内部编写程序代码，并且打开节流阀
timer = null
- 设置节流阀
- 总结
- 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面N多次的触发都会被忽略
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性的执行一部分事件
HTTP协议
- 概念：HTTP是超文本传输协议，协议规定了客户端与服务器交互数据时，数据的格式
- 请求消息
- 请求行 (请求方式、请求的url、协议的版本)
- 请求头 (由多行键值对组成)
Content-Type告诉服务器提交的数据是什么格式的User-Agent告诉服务器发送到请求的浏览器是什么浏览器
- 请求体 (提交的数据就是请求体 GET方式没有请求体，POST方式才有请求体)
- 响应消息
- 响应行 (协议及版本)
- 响应头 (
Content-Type:application/json;charset=utf-8服务器告诉浏览器返回的数据是什么格式的) - 响应体 (返回的主要内容就是返回的数据，可以在network->请求->response查看)
HTP状态码以及代表意义
- 200：请求成功
- 201：添加成功
- 304：请求的资源没有改变 (去缓存中取数据即可)
- 400：请求的格式不对 (最有可能得原因是请求参数写错了)
- 404：请求的资源不存在 (url地址可能错误)
- 500：服务器内部错误
错误代码的影响
- 分类
- 解析代码时的错误 (语法、词法错误)
- 运行代码时的错误 (调用函数等等)
- 错误对当前script代码段的影响
- 解析代码时的错误会导致整个script代码全部瘫痪
- 运行代码时的错误会导致错误之前的代码能够执行，错误之后的代码不能执行
注意：两个没有关系的script代码段前一个script代码段无论发生什么都不会影响后面的script代码段
移动的小天使
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery.js"></script><style>img {position: absolute;}</style>
</head><body><img src="angel.gif" alt=""><script>// 1.设置节流阀var timer = null// 2.事件内部,判断timer,如果不为null(说明有一个定时器正在执行),return$(document).on('mousemove', function (e) {if (timer != null) {return}// 3.设置定时器,定时器内部,编写程序代码.并且打开节流阀 (timer = null)timer = setTimeout(function () {var x = e.pageX // 鼠标距离页面左边的位置var y = e.pageY // 鼠标距离页面上边的位置// 设置img的位置$('img').css({ left: x + 'px', top: y + 'px' })console.log('今天星期三')// 重置timer为null,相当于打开节流阀timer = null}, 30)})</script>
</body></html>