使用 Ajax 技术的目的
概念
Ajax 是一种技术的名称。“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
主要价值：无需重新加载整个网页的情况下，能够局部更新部分网页的技术。
代码执行过程分析
Ajax代码执行过程分析.png
请求三要素
-
请求方法
GETPOST -
请求地址
http://xxxx -
请求参数
{heroName : 赵云}
完整URL地址：
http://127.0.0.1:3001/getHeroSkin?heroName=%E5%A8%9C%E5%8F%AF%E9%9C%B2%E9%9C%B2
组成部分：
http:// 协议
127.0.0.1 域
:3001 端口
/getHeroSkin 资源路径
?heroName=%E5%A8%9C%E5%8F%AF%E9%9C%B2%E9%9C%B2 查询参数
查看请求参数
看执行结果.png
提高工作效率设置代码片段
提前在使用的开发页面中映入JQ文件
设置代码片段.png
"ajax结构": {
"prefix": "ajax",
"body": [
"$.ajax({",
" method: '',",
" url: '',",
" data: {},",
" success: (res) => {",
" $1",
" }",
"})",
],
"description": "ajax结构生成"
}
Ajax封装原理
// 封装一个自己的 ajax 函数
function myAjax(options) {
//对象用于与服务器交互
const xhr = new XMLHttpRequest()
// 把对象转换成查询参数
const data = new URLSearchParams(options.data)
// .toUpperCase() - 转换成大写
// 👉 处理 GET 请求
if (options.method.toUpperCase() === 'GET') {
xhr.open(options.method, `${options.url}?${data}`)
xhr.send()
}
// 👉 处理 POST 请求
else if (options.method.toUpperCase() === 'POST') {
xhr.open(options.method, options.url)
// 考虑到 POST 的兼容问题，添加 Content-Type
xhr.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded',
)
// 请求参数需要写到 send 方法中
xhr.send(data)
}
xhr.onload = function () {
const obj = JSON.parse(xhr.response)
// 👉 调用 success 函数，把转换后成对象后的 res 传递给形参
options.success(obj)
}
}
