白也blog - axios
type: channel
link: http://www.baiyeovo.cn/index.php/tag/axios/
items: AJAX复习笔记

AJAX复习笔记
type: item
date: 2022-04-11T19:22:00+08:00
description: 原生AJAX1.ajax技术:可以在网页不跳转的情况下 向服务器发送请求 应用:局部刷新 2.ajax语法:使用内置对象XMLHttpRequst 请求方法get和post区别： 传参方式不同 get请求： 直接在url后面拼接参数 * 参数在url中，安全性不高 post请求： 1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') * 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴 2.使用xhr的send方法发送参数： xhr.send('参数名=参数值'); * 注意：不要加前面的? get请求参数//(1)创建XMLHttpRequest对象(小黄人) const xhr = new XMLHttpRequest() //(2)设置请求方法和地址 xhr.open('get', 'https://autumnfish.cn/api/joke') //(3)发送请求 xhr.send() //(4)注册响应回调事件 /* 这个事件不是立即执行,而是过一会执行. 取决于很多因素:带宽 天气 服务器 网络运营商 */ xhr.onload = function () { console.log(xhr.responseText); }post请求//(1).实例化ajax对象 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).发送请求 ： 参数格式 'key=value' xhr.send('key=value') //(5).注册回调函数 xhr.onload = function () { console.log(xhr.responseText) } ajax工作原理http协议 : 网络传输协议* 协议 : 规定网络数据传输格式 http协议组成 : 请求报文 + 响应报文* 浏览器发请求 必须是 ： 请求报文 * 服务器响应 必须是 ： 响应报文 请求报文 由三部分组成3.1 请求行 : 请求方法 + 请求地址 3.2 请求头 : 浏览器告诉服务器,我发送给你的数据是什么格式 (文本、json、图片、音视频等等) 3.3 请求体 : 请求参数 响应报文 由三部分组成4.1 响应行 : 服务器状态码、 服务器地址等2xx : 请求成功 200:成功 3xx : 重定向 302 服务端重定向(服务器主动修改浏览器网址) 4xx : 前端的问题 404 : url错误 400: 参数错误 403/402 : 没有权限 405：请求方法错误 5xx : 服务器的问题 500 服务器挂了(后台java代码像js一样爆红了)4.2 响应头 : 服务器告诉浏览器，我响应给你的数据是什么格式 (文本、json、图片、音视频等等) 4.3 响应体 : 服务器响应数据 5.ajax原理 ： 发送请求报文过程* 给服务器发请求，其实发的就是请求报文 从网页输入url到呈现过程 1.DNS解析 : 把域名解析成ip地址 2.TCP连接三次握手 : 建立 安全可靠的传输协议 2.1 什么是TCP : 一种 传输控制协议 2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的） 2.3 TCP三次握手 : 第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送) 第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送) 第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收) 3.HTTP请求 : 网络传输协议 3.1 浏览器发送请求 3.2 服务器处理请求 3.3 服务器响应请求 4.服务器响应数据之后,渲染引擎开始渲染页面 4.1 解析html生成：dom树 4.2 解析css生成：样式树 4.3 dom树 与 样式树 合并得到 渲染树 4.4 呈现页面 AXIOS框架axios语法 : axios .get('url') .then( res=>{ //请求成功 } ) .catch( err=>{ //请求错误} ) .then( ()=>{ //请求完成 } )axios基本使用//基本使用 document.que…