一. 前后端交互流程
1.服务器 : 提供某种服务器的机器(计算机)
qq音乐:音频服务器 , 迅雷:文件服务器 ,
qq邮箱:邮件服务器,爱奇艺:视频服务器,谷歌:web服务器
2. 前端 访问 服务器的四种方式
1. 直接在地址栏输入网址 ,网页会跳转( 全局刷新 )
2. a标签的href属性 ,网页会跳转( 全局刷新 )
3. location.href = 'url' ,网页会跳转( 全局刷新 )
4. AJAX ,网页不会跳转
3. 什么是ajax
1. ajax技术 : 在网页不跳转的情况下 向服务器请求数据
2. ajax应用场景: 局部刷新
4. ajax组成部分
(1)Ajax(阿贾克斯):全称 Asynchronous Javascript And XML(异步的js与xml),说人话: 用js发送异步的网络请求
(2)A : Asynchronous 异步
同步 : 指的是代码按照从上往下顺序执行
异步 : 代码不会立即执行,而是要等一会儿执行
ECMAScript只有两个语法是异步的:定时器 与 ajax
DOM事件也是属于异步的,但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的 时候,主要以js为主,DOM一般不讨论。
(3)J:Javascript
(4)A :And
(5)X : XML 与 XMLHttpRequest
XML : 解决跨平台数据传输。
在JSON没有出来以前, 网络传输主要以XML格式数据为主。 后来JSON问世,逐渐取代XML。
5. 前后端交互三个流程
1. 请求 (前端),2.处理 (后端),3.响应(后端)
二. ajax工作原理
1.ajax工作流程
(1) 创建xhr对象:let xhr = new XMLHttpRequest()
(2)设置请求方法和地址 : xhr.open('请求方法','请求地址')
(3)发送请求:xhr.send()
(4)注册响应事件:xhr.onload = function(){}
这个函数不是立即执行的,而是等服务器把数据响应返回才会执行(PS:什么时候执行取决于你的网速快慢)
get与post区别
1.传参方式不同
get请求: 直接在url后面拼接参数 (参数在url中,安全性不高)
get传参格式: url?key=value
post请求:需要设置请求头(固定语法):xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') (注意:这是固定格式,错一个字母都不行)
使用xhr的send方法发送参数: xhr.send('参数名=参数值'); (注意:不要加前面的?)