柚子快报邀请码778899分享：okhttp AJAX 基础
AJAX
1、AJAX定义与axios使用
定义： AJAX(Asynchronous Javascript And XML)，即异步的JavaScript和XML，是浏览器与服务器进行数据通信的技术。
axios示例：
2、URL
2.1 URL简介
定义：URL(Uniform Resource Locator)，称为统一资源定位符或网址。
URL示例：http://www.bilibili.com/v/douga/
示例名称作用http://协议规定浏览器和服务器之间传输数据的格式www.bilibili.com/域名标记服务器在互联网中的位置(确定要访问的服务器)v/douga/资源路径标记资源在服务器上的具体位置
2.2 URL查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数1=值1&参数2=值2
查询参数示例：
2.3 常用请求方法
请求方法：对服务器的资源，要采取的操作
请求方法操作GET获取数据(默认方式，不区分大小写)POST提交数据PUT修改数据(全部)DELETE删除数据PATCH修改数据(部分)
POST用于注册示例：
3、axios错误处理
使用关键字catch捕获
4、HTTP协议
HTTP协议规定了浏览器发送及服务器返回内容的格式
4.1 请求报文
请求报文： 浏览器发送给服务器的内容
组成：
名称示例作用请求行POST /api/register HTTP/1.1请求方式、请求地址、协议请求头Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9 Connection: keep-alive Content-Length: 46 Content-Type: application/json Host: hmajax.itheima.net Origin: null User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)以键值对的格式携带的附加信息，如Content-Type请求体{“username”:“wqwe12322_”,“password”:“1234556”}请求的信息
通过谷歌浏览器网络面板查看请求报文 错误排查：通过请求报文排查错误原因，并修复
4.2 响应报文
**响应报文：**服务器按照HTTP协议要求的格式，返回给浏览器的内容
组成：
名称示例作用响应行HTTP/1.1 400 Bad Request协议、HTTP协议响应状态码、状态信息响应头Date: Thu, 12 Oct 2023 12:06:55 GMTContent-Type: application/json; charset=utf-8Content-Length: 54Connection: keep-aliveSet-Cookie: acw_tc=2f624a51d;path=/;HttpOnly;Max-Age=1800Server: nginxVary: OriginAccess-Control-Allow-Origin: nullAccess-Control-Allow-Credentials: trueAccept-Ranges: bytesx-frame-options: SAMEORIGINx-xss-protection: 1; mode=blockx-content-type-options: nosniffvx-download-options: noopenx-readtime: 9以键值对的格式携带的附加信息，如Content-Type空行分隔响应头，空行之后是返回给浏览器的资源响应体{“code”:10005,“message”:“账号被占用”,“data”:null}返回的资源
HTTP协议响应状态码
状态码说明1XX信息2XX成功3XX重定向消息4XX客户端错误5XX服务端错误
4.3 接口文档
接口文档：描述接口的文章
接口：使用AJAX和服务器通讯时，使用的URL、请求方法、参数
5、form-serialize收集表单信息
语法：data = serialize**(form**, {hash:true, empty:true})。 使用时，要给表单添加。
参数取值解释form要获取数据的表单hashtrue、falsetrue：返回JS对象false:查询字符串emptytrue、false是否获取空值
示例：
6、bootstrap弹窗使用
官网示例：
使用步骤：
1、引入官方CSS和JS
2、CSS控制弹窗的显示和关闭
3、通过JS控制弹窗的出现和关闭
let box = document.querySelector('.box')
let mybox = new bootstrap.Modal(box)
mybox.show() // 显示
mybox.hide() // 关闭
7、XMLHttpRequest对象使用
7.1 XMLHttpRequest基本使用
XMLHttpRequest对象用于与服务器交互，是AJAX的基本原理；也是axios的内部实现原理。
使用步骤：
创建XMLHttpRequest对象调用open方法，配置请求方法和URL监听loadend事件，接收响应结果调用send方法，发起请求
7.2 XMLHttpRequest查询参数
7.3 URLSearchParams使用
作用： 将JS对象转换为URL查询参数
const city_infor = {
pname:'贵州省',
cname:'贵阳市'
}
const param = new URLSearchParams(city_infor)
const string_param = param.toString()
8、Promise
Promise对象用于表示一个异步操作最终完成(或失败)及其结果值。
语法：
// 创建promise对象
const p = new Promise((resolve, reject) => {
// 执行异步任务，并且传递结果
// 成功调用：resolve()触发then()执行
// 失败调用：reject()触发catch()执行
})
// 接收结果
p.then(res => {
// 成功
}).catch(error => {
// 失败
})
8.1 实现axios函数
function myAxios(config)
{
return new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest()
if(config.params)
{
const param = new URLSearchParams(config.params)
const str_param = param.toString()
config.url += `?${str_param}`
}
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', () => {
if(xhr.status >= 200 && xhr.status < 300)
{
resolve(JSON.parse(xhr.response))
}
else
{
reject(new Error(xhr.response))
}
})
if(config.data)
{
xhr.setRequestHeader('Content-Type','application/json')
const str = JSON.stringify(config.data)
xhr.send(str)
}
else{
xhr.send()
}
})
}
8.2 Promise.all静态方法
概念：合并多个Promise对象，等待所有对象同时完成(或某一个失败)，然后执行后序逻辑
9、同步代码&异步代码、回调函数
9.1 同步异步&异步代码
同步代码：逐行执行，原地等待结果后，才继续向下执行
异步代码：调用后耗时，不阻塞代码执行，将来完成后触发回调函数
JS中的异步代码：setTimeout/setInterval、事件、AJAX
9.2 回调函数地狱
定义：在回调函数内一直向下嵌套回调函数
// 示例
问题：
可读性差异常难以捕获耦合性严重
解决方法：
promise链式调用
使用then函数返回新的Promise对象特性，一直串联下去
then回调函数中，return的值会传给then函数新生成的Promise对象
// 示例
使用async和await
10、事件循环(EventLoop)
事件循环： 执行代码和收集异步任务，在调用栈空闲时，反复调用队列里的回调函数执行机制
事件循环作用：JavaScript是单线程的，为了不阻塞JS引擎，设计了事件循环用于处理异步任务
JS代码执行过程：
执行同步代码，遇到异步代码交给宿主浏览器环境执行异步有了结果后，把回调函数放入任务队列排队当调用栈空闲后，反复调用任务队列里的回调函数
10.1 宏任务与微任务
宏任务：由浏览器环境执行的异步代码
微任务：由JS引擎环境执行的异步代码
任务(代码)执行所在环境JS脚本执行事件(script)浏览器setTimeout/setInterval浏览器AJAX请求完成事件浏览器用户交互事件浏览器Promise对象.then()JS引擎
同时有宏任务和微任务在队列时，先执行微任务(清空微任务队列)再执行宏任务。
柚子快报邀请码778899分享：okhttp AJAX 基础
文章链接
发表评论