目录
1. 认识前后端交互
+ 前端想办法从服务器获取一些数据
+ 例子: 新闻网站
=> 前端 :
-> 根据一个已知数据, 把数据渲染成页面
-> 已知数据不再是自己写好的
=> 后端 (服务端):
-> 根据前端的需求, 准备好对应的数据
-> 给到前端
+ 例子: 登录
=> 前端:
-> 当用户点击登录按钮的时候
-> 拿到用户输入的用户名和密码
-> 想办法把用户名和密码发送给后端
-> 根据后端给出的结果, 给用户提示
=> 后端:
-> 接受前端传递来的用户名和密码
-> 进行正确性的验证
-> 把验证结果返回给前端
2. 认识 ajax
+ 是一个前端和后端交互的手段(技术)
+ ajax ( 阿贾克斯 )
=> a: async 异步
=> j : javascript 脚本语言
=> a: and 和
=> x: xml 严格的 html 格式
+ 作用: 从服务器获取一些信息
=> 商品列表
=> 需要从数据库里面获取到这些信息
=> 在这个过程中前端只能沟通后端
=> 后端把数据给到前端, 前端渲染在页面上
+ 什么时候需要使用 :
=> 当你需要和后端沟通的时候
=> 我们就可以使用 ajax 技术
=> 例: 你需要新闻列表, 使用 ajax 向后端索要新闻列表信息
你需要验证用户名面是否正确, 你可以使用 ajax 把用户名密码发送给后端
......
+ ajax 是有固定步骤的
3. ajax 的 步骤
如何发送一个 ajax 请求 :
1. 创建一个 ajax 对象, 帮我完成本次请求
=> 语法: var xhr = new XMLHttpRequest( )
=> xhr 就是我们需要的 ajax 对象, 能帮我们发送一个请求
=> 请求: 前端主动发起, 向后端索要一些信息
2. 配置本次请求的信息
=> 语法: xhr.open('请求方式', '请求地址', 是否异步)
=> 请求方式: 接口文档内的内容
=> 请求地址: 向哪一个服务器地址能拿到数据
接口文档内的内容(基准地址 + 接口地址)
=> 是否异步: 选填, 默认是异步的, 可以选填 false, 表示非异步
3. 把配置好的请求发送出去
=> 语法: xhr.send( )
4. 绑定一个接受响应的事件
=> 响应: 后端给你返回的信息
=> 因为请求是异步的, 你如果按照同步代码书写接受结果, 是拿不到结果的
=> 语法: xhr.onload = function ( ) { 代码 }
=> 时机: 会在当前请求完成以后被触发(后端给回对应的响应以后)
=> 如何拿到后端给我的响应结果(数据信息):
-> 在 ajax对象 内有一个成员叫做 responseText
-> xhr.responseText
-> 后端给到前端的响应文本内容// 1. 创建 ajax 对象 const xhr = new XMLHttpRequest() // 2. 配置请求地址 xhr.open('GET', 'http://localhost:8888/test/first') // 3. 把本次请求发送出去 xhr.send() // 4. 绑定事件 xhr.onload = function () { // 这个事件会在请求结束后, 响应回到浏览器以后 // 触发这个函数 // console.log('本次请求成功了') console.log(xhr.responseText) // JSON.parse 需要解析的必须是一个 json 格式的字符串 // 如果报错, 证明你肯定不是一个 json 格式 // 直接打印一下响应体 xhr.responseText // 当 后端 返回的是 json 格式数据的时候 // 我们前端要把 json 格式转换成 js 的数据类型, 方便使用 // 语法: JSON.parse(json 格式数据) const result = JSON.parse(xhr.responseText) console.log(result) }
4. ajax 的异步问题
+ ajax 是一个默认异步的技术手段
+ ajax 强烈 不推荐同步请求
=> 同步: 从上到下依次执行, 上一行代码没有完成, 后面的代码不会执行
-> 当你的网络环境不好的时候, 一旦请求发送出去, 当请求没有回来的时候
-> 此时你什么都干不了
=> 异步: 先放在队列池里面
-> 等到所有同步代码执行完毕, 在来执行异步的代码
ajax 的异步出现在什么时候
1. 创建 ajax 对象
=> 同步代码
2. 配置本次请求信息
=> 同步代码
3. 发送本次请求(把请求发送给后端和接受后端返回的响应)
=> 发送请求是 同步 的
=> 接受响应是 异步 的
4. 绑定事件
=> 同步绑定事件 , 但是事件的触发一定是因为 响应
=> 会根据 ajax 完成以后触发
ajax 的同步异步问题
=> open 第三个参数不写的时候, 默认是 true, 表示 异步
=> open 第三个参数选填是 false 表示 非 异步 ( 同步 )
结论:
=> 如果你发送异步请求, 可以是 步骤 1 2 3 4 , 也可以是步骤 1 2 4 3
=> 如果你发送同步请求, 步骤必须是 1 2 4 3 , 先绑定事件, 后发送请求
+ 所以:
=> 不管发送 同步 还是 异步 请求
=> 最好的书写顺序 1 2 4 3
异步 发送 ajax 请求 :
console.log('start') // 1. 创建一个 ajax 对象 const xhr = new XMLHttpRequest() // 2. 配置本次的请求信息 // 第三个参数传递一个 false, 表示 非异步, 同步 xhr.open('GET', 'http://localhost:8888/test/second') // 3. 把本次请求发送出去 xhr.send() // 4. 接受响应 xhr.onload = function () { console.log(JSON.parse(xhr.responseText)) } console.log('end')为什么可以在控制台打印出内容(为什么可以触发事件)
1. 控制台打印 start , 直接执行 console.log('start')
2. 创建 ajax 对象 , 直接执行 new XMLHttpRequest( )
3. 配置请求信息 , 直接执行 xhr.open( )
4. 只把请求同步的发送出去 xhr.send( )
=> 把接受的事情放在异步队列里面
5. 绑定一个响应回来的触发的事件 xhr.onload = fn
6. 控制台打印 end , 直接执行 console.log('end')
此时同步代码完成
=> 可以执行异步代码了
7. 接受后端返回的响应
=> 触发 onload 事件
=> 在控制台打印响应体
同步 发送 ajax 请求 :
console.log('start') // 发送一个 ajax // 1. 创建一个 ajax 对象 const xhr = new XMLHttpRequest() // 2. 配置本次的请求信息 // 第三个参数传递一个 false, 表示 非异步, 同步 xhr.open('GET', 'http://localhost:8888/test/second', false) // 3. 把本次请求发送出去 xhr.send() // 4. 接受响应 xhr.onload = function () { console.log(JSON.parse(xhr.responseText)) } console.log('end')为什么变成同步以后, 没办法触发事件了
1. 控制台打印 start , 直接执行 console.log('start')
2. 创建 ajax 对象 , 直接执行 new XMLHttpRequest( )
3. 配置请求信息 , 直接执行 xhr.open( )
4. 把本次请求同步的发出去 xhr.send( )
5. 会等待响应的回来, 因为改成的同步接受
=> 此时把请求换成同步的了
=> 这里没有接受到响应的时候, 不会继续向后执行代码
=> 需要等到 send 完全完成了, 才会继续向后执行代码
=> 响应回到浏览器了, 继续向后执行代码
=> 你并没有让他打印出来
6. 绑定一个事件, 请求完成的时候触发 , 直接执行 xhr.onload = fn
=> 绑定一个请求完成的事件, 会在请求完成的时候触发
=> 因为当你绑定事件的时候, 本次 xhr 请求已经全部完成了
=> 所以这个事件就再也不会触发了
7. 控制台打印 end , 直接执行 console.log('end')
推荐 书写 顺序 : 1 2 4 3 ( 不管 异步 还是 同步 )
console.log('start') // 发送一个 ajax // 1. 创建一个 ajax 对象 const xhr = new XMLHttpRequest() // 2. 配置本次的请求信息 // 第三个参数传递一个 false, 表示 非异步, 同步 xhr.open('GET', 'http://localhost:8888/test/second', false) // 4. 接受响应 xhr.onload = function () { console.log(JSON.parse(xhr.responseText)) } // 3. 把本次请求发送出去 xhr.send() console.log('end')
5. 前后端交互的请求方式 ( method/type )
+ 表示前后端交互的一种 "说话方式"
+ 前端 和 后端交互的时候, 前端需要给后端一些信息
=> 例子:
=> 你如果想获取新闻列表, 那么你要告诉后端一些信息
-> 哪一天的新闻
-> 什么类型相关
-> 要多少条新闻
-> ...
=> 你如果想进行登录的操作, 那么你要告诉后端一些信息
-> 用户名 是什么
-> 密码 是什么
前后端交互的 请求方式
+ 不止局限于 ajax 请求
+ 只要是网络请求, 就分请求方式
常见的请求方式 :
1. GET : 偏向 获取 的语义, 当你需要向服务器 索要 一些数据的时候使用
2. POST : 偏向 提交 的语义, 当你需要 给 服务器一些数据的时候使用
3. PUT : 偏向 提交 的语义, 偏向提交给服务器, 服务器进行添加操作
4. DELETE : 偏向 删除 的语义, 告诉服务器我需要删除一些信息
5. PATCH : 偏向 提交 的语义, 偏向提交给服务器, 服务器进行局部信息的修改
6. HEAD : 用于获取服务器 响应头 说明信息的一个请求
7. CONNECT : 保留请求的连接方式
8. OPTIONS : 不需要任何响应的请求, 只是为了获取服务器配置信息, 需要服务器允许
GET 和 POST 的区别 : ( 面试题 )
1. 语义不一样
=> GET 偏向 获取 的语义
=> POST 偏向 提交 的语义
2. 携带信息的位置不一样
=> GET : 携带信息是直接在 请求地址后面 以 查询字符串 的形式进行拼接携带
=> POST : 携带信息是在 请求体 位置内进行信息的携带
3. 携带信息的大小不一样
=> GET : 原则上可以携带任意大小的数据信息,
但是因为 IE 的原因, 会被 浏览器限制 (IE: 2KB )
=> POST : 原则上可以携带任意大小的数据信息, 但是会被 服务器 进行 限制
4. 携带信息的格式不一样
=> GET : 只能携带 查询字符串 一种格式, 而且信息必须是 url 编码
=> POST : 理论上可以携带 很多格式 的信息( 查询字符串 / json / 二进制流 / ... ) ,
但是需要在发送请求的时候特殊说明一下 ( 在请求说明信息里面单独配置 )
5. 安全问题
=> GET: 明文发送, 相对不安全
=> POST: 暗文发送, 相对安全
6. 发送一个带有参数的 GET 请求
+ 当你需要携带参数给后端的时候
+ 因为: GET 请求是在直接地址后面携带参数
+ 所以: 在 open 的第二个位置携带参数
+ 因为: 是 查询字符串 格式
+ 所以: 需要在地址后面拼接上一个 查询字符串 格式
查询字符串格式
+ 'key=value' 叫做一个 查询字符串
=> 'name=xhl'
=> 'age=18'
+ 多个数据信息之间用 '&' 分隔
=> 'key=value&key2=value2'
=> 'name=xhl&age=18'
+ 注意: 地址 和 查询字符串 之间 使用 问号(?) 分隔// 1. 创建 ajax 对象 const xhr = new XMLHttpRequest() // 2. 配置请求信息 // 在发送一个 get 请求到 /test/third 地址 // 携带了两个信息 xhr.open('GET', 'http://localhost:8888/test/third?name=小灰狼&age=18') // 3. 绑定事件 xhr.onload = function () { console.log(JSON.parse(xhr.responseText)) } // 4. 把请求发送出去 xhr.send()
7. 发送一个带有参数的 POST 请求
发送一个带有参数的 POST 请求
+ 因为 POST 请求是在请求体位置内携带参数信息
+ 所以: 需要把携带的信息写在 send 后面的 ( ) 内部
=> xhr.send() 的小括号内, 就是用来书写请求体的位置
+ 因为: 需要书写成查询字符串格式
+ 所以: 直接在 ( ) 内书写 一个 查询字符串 携带信息
+ 注意: 如果你发送 POST 请求, 并且需要携带信息, 那么一定要在发送之前特殊说明
=> 如果你发送的是 查询字符串: applicetion/x-www-form-urlencoded
=> 如果你发送的是 json格式: application/json
=> 如果你发送的是 二进制流: mutilpart/data
+ 因为: POST 请求可以携带多种格式, 但是需要在请求信息里面说明
+ 需要在发送请求之前设置一下请求体的数据格式
+ 设置特殊说明的语法:
=> xhr.setRequestHeader('content-type', 对应的类型)
+ 语法: xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')const xhr = new XMLHttpRequest() xhr.open('POST', 'http://localhost:8888/test/fourth') xhr.onload = function () { console.log(xhr.responseText) console.log(JSON.parse(xhr.responseText)) } // 因为发送的是 post 请求, 并且携带了参数 // 请求之前, 做出特殊说明,提前设置请求头信息 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') xhr.send('name=小灰狼&age=18')
8. 总结
ajax
+ 是一个前端和后端交互的技术手段
2. ajax 的基本步骤
2-1. 创建 ajax 对象
=> const xhr = new XMLHttpRequest( )
2-2. 配置本次的请求信息
=> xhr.open('请求方式', '请求地址', 是否异步)
2-3. 绑定一个请求完成的事件
=> xhr.onload = function ( ) { }
=> 事件内拿到响应体 xhr.responseText
=> 根据响应体格式决定是否进行 json 格式解析
2-4. 发送请求
=> xhr.send( )3. 发送一个带有参数的 GET 请求
const xhr = new XMLHttpRequest( )
+ 直接在请求地址的后面拼接 查询字符串
+ 注意: 地址和查询字符串之间要书写一个 问号(?)
xhr.open('GET', '请求地址?key=value&key2=value2')
xhr.onload = function ( ) { ... }
xhr.send()4. 发送一个带有参数的 POST 请求
const xhr = new XMLHttpRequest( )
xhr.open('GET', '请求地址')
xhr.onload = function ( ) { ... }
+ 我们都是使用的查询字符串格式
+ 注意: 在发送请求之前, 设置请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
+ 在 send 后面的 () 内书写参数
xhr.send('key=value&key2=value2')5. GET 和 POST 的区别
+ GET
1. 偏向于 获取 的语义
2. 在请求地址后面以 查询字符串 的形式携带参数
3. 参数大小限制大概 2KB 左右
4. 参数只能是 查询字符串 格式
5. 相对 不安全
+ POST
1. 偏向于 提交 的语义
2. 在 请求体 内携带参数
3. 参数大小被 服务器限制
4. 参数可以是很多格式, 但是要在请求头内特殊说明
5. 相对 安全
9. 扩展 : 状态码
ajax 状态码 :
+ 用一个数字来描述当前这个 ajax 处于什么步骤
语法:
+ 如何拿到 ajax 状态码
+ 语法: ajax对象.readyState
+ 得到: 就是当前 ajax 的状态码
意义:
0 : 表示 创建 ajax 对象 成功
1 : 表示 配置 请求信息 成功
2 : 表示请求已经发送出去, 并且服务器给回的响应已经到了 浏览器
3 : 表示浏览器 正在 解析响应报文, 并且把真实响应体内容逐步赋值给 xhr 的 responseText
4 : 表示浏览器 解析响应报文 完成, xhr 对象内已经有完整的响应体内容了
事件:
+ xhr.onreadystatechange = function ( ) { }
+ 当 ajax 状态码改变的时候触发const xhr = new XMLHttpRequest() xhr.open('GET', 'http://localhost:8888/test/first') xhr.onreadystatechange = function () { if (xhr.readyState === 2) { console.log('2 : ', xhr.responseText) } if (xhr.readyState === 3) { console.log('3 : ', xhr.responseText) } if (xhr.readyState === 4) { console.log('4 : ', xhr.responseText) } } xhr.send()
http 状态码 (了解)
+ 是网络协议的一部分
+ 用来描述本次请求的状态
+ 各种数字来描述各种情况
分类 :
1. 100 ~ 199 => 表示连接继续
2. 200 ~ 299 => 表示各种意义的成功
=> 200 标准成功
=> 201 创建成功
=> 204 删除成功
=> ...
3. 300 ~ 399 => 表示 重定向
=> 重定向: 你请求的是 a 服务器地址, 但是 a 服务器把你的请求转嫁到了 b 服务器, 真实给你返回数据的是 b 服务器
=> 301 : 永久重定向
=> 302 : 临时重定向
=> 304 : 缓存
=> ...
4. 400 ~ 499
=> 表示各种客户端错误=> 403 : 权限不够
=>
=> ...
5. 500 ~ 599
=> 表示各种服务端错误
=> 500: 表示标准服务器错误
=> 501: 服务器过载或维护
=> ...
语法: xhr.status
得到: 本次请求的 http 状态码const xhr = new XMLHttpRequest() xhr.open('GET', 'http://localhost:8888/test/first') xhr.onload = function () { console.log(xhr.status) } xhr.send()
ajax 的兼容问题 :
1. 创建 ajax 对象的兼容问题
=> 标准浏览器: new XMLHttpRequest( )
=> IE 低版本: new ActiveXObject('Microsoft.XMLHTTP')
=> 注意: 需要在真实的 IE 低版本内核中才能使用
2. 接受响应的事件
=> 标准浏览器: xhr.onload = function ( ) { }
=> IE 低版本: xhr.onreadystatechange = function ( ) { }
-> 在事件内进行一些条件判断来实现var xhr = new XMLHttpRequest() xhr.open('GET', 'http://localhost:8888/test/second') // xhr.onload = function () { // console.log(xhr.responseText) // } // ajax 状态码改变的事件 // 随着 ajax 状态码的改变而触发 // 1 变成 2 的时候触发一次, 此时拿不到的响应体 // 2 变成 3 的时候, 触发一次, 此时拿不到完整的响应体 // 3 变成 4 的时候, 触发一次, 此时可以拿到完整的响应体 // 但是 4 只是表示 ajax 完成了, status 为 200 ~ 299 之间, 表示请求成功 xhr.onreadystatechange = function () { // 保证 readyState === 4 // 保证 status 是 200 ~ 299 之间 // 才可以正常拿到所有响应体 if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) { console.log(xhr.responseText) } } xhr.send()
10. 图例 :
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
