开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情
目录
XMLHttpRequest : http请求对象,负责实现ajax技术(小黄人 = xhr)
1.概念
ajax就是一种 用于向服务器请求数据的 技术 (让浏览器和服务器进行交互)
(ajax就是一个技术的名字 axios框架就是为了实现ajax技术)
ajax技术 概念
在网页不跳转(也就是局部刷新)的情况下,向服务器请求数据(访问服务器)
2.前后端交互的三个流程(☆)
1.请求(浏览器)
2.处理(服务器)
3.响应(服务器)
3.ajax工作流程
(1)创建 XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// XMLHttpRequest对象 : 是负责实现ajax技术的对象 Request :请求
(2)设置请求方法和请求地址
xhr.open('请求方法method' , '请求地址url')
// 请求方法 get 或 post
(3)发送请求
xhr.send()
(4)注册响应完成事件 这个事件不会立即执行,而是等服务器响应后才会执行 受带宽、请求大小、天气、高峰期等因素影响
xhr.onload = function () {
// 获取服务器响应的数据 xhr.responseText 必须要在onload里面获取数据
// response 响应
console.log(xhr.responseText)
//实际开发中,服务器一般会返回json格式字符串 , 前端需要把 json -> js
let res = JSON.parse(xhr.responseText)
}
XMLHttpRequest : http请求对象,负责实现ajax技术(小黄人 = xhr)
(1)创建XMLHttpRequest
小黄人,就相当于黄袍加身的外卖小哥
(2)设置请求
告诉小黄人服务器地址
(3)发送请求
小哥出发去指定地址取外卖
去指定地址 速度的快慢受很多因素的影响
(4) 注册回调函数
就相当于小哥把取回的外卖送到你家门口
4.请求方法为 get
ajax发送get请求参数 : 在url后面拼接 key是参数
格式 : url ? key=value
(1).实例化ajax对象
let xhr = new XMLHttpRequest()
(2).设置请求方法和地址
//get请求的数据直接添加在url的后面 格式是 url?key=value
xhr.open('get', '接口url')
(3).发送请求
xhr.send()
(4).注册回调函数
xhr.onload = function() {
console.log(xhr.responseText)
}
5.请求方法为 post
（1） post 请求需要单独设置请求头 ： 不需要记 ： 固定格式
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
(2) post参数在xhr.send() 方法中发送
格式 : xhr.send('key = value') 多个参数之间用 &
例如 key=value&key=value1
(1)创建xhr对象
let xhr = new XMLHttpRequest()
(2)设置请求方法和地址
xhr.open('post','https://autumnfish.cn/api/user/register')
(3)设置请求头 : 只有post请求才需要
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
(4)发送请求
xhr.send('username=afsafs')
(5)注册响应事件
xhr.onload = function(){
console.log(xhr.responseText)
}
6. get 跟 post 区别 ☆
1.传参方式不同
get是直接在url 后面拼接
post 是在请求体中发送(二进制数据流传输)
2.传参速度不同
get :传输速度快
post:传输速度慢
3.数据大小不同
get : 有大小限制 ,不同的浏览器大小限制有区别(一般浏览器最多为2MB 内核(浏览器)不同数据大小也不同)
post : 没有限制
一般文件上传的都是post
4.安全性不同
get : 安全性低
post : 安全性高
登录注册一般都是post
