使用 Ajax 技術的目的
概念
Ajax 是一種技術的名稱《︽ⅲ“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）
主要價值：無需重新加載整個網頁的情況下，能夠局部更新部分網頁的技術显设。
代碼執(zhí)行過程分析
Ajax代碼執(zhí)行過程分析.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:// 協(xié)議
127.0.0.1 域
:3001 端口
/getHeroSkin 資源路徑
?heroName=%E5%A8%9C%E5%8F%AF%E9%9C%B2%E9%9C%B2 查詢參數
查看請求參數
看執(zhí)行結果.png
提高工作效率設置代碼片段
提前在使用的開發(fā)頁面中映入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)
}
}
