柚子快報激活碼778899分享：前端 AJAX 入門 day1
柚子快報激活碼778899分享：前端 AJAX 入門 day1
目錄
1.AJAX 概念和 axios 使用
2.認識 URL
3.URL 查詢參數(shù)
4.常用請求方法和數(shù)據(jù)提交
5.HTTP協(xié)議-報文
5.1?HTTP 協(xié)議－請求報文
5.2 HTTP 協(xié)議－響應(yīng)報文
6.接口文檔
7.案例 - 用戶登錄
8.form-serialize 插件
1.AJAX 概念和 axios 使用
“Ajax” 是 “Asynchronous(異步) JavaScript and XML” 的縮寫，是一種用于創(chuàng)建動態(tài)網(wǎng)頁的技術(shù)。它允許網(wǎng)頁在不重新加載整個頁面的情況下與服務(wù)器進行交互和更新內(nèi)容，從而提高用戶體驗和頁面的響應(yīng)速度。
Ajax 的基本工作流程是：
用戶在網(wǎng)頁上觸發(fā)事件（如點擊按鈕）。JavaScript 代碼使用?XMLHttpRequest?對象向服務(wù)器發(fā)送請求。服務(wù)器處理請求并返回數(shù)據(jù)。JavaScript 代碼處理返回的數(shù)據(jù)，并更新頁面內(nèi)容，而無需重新加載整個頁面。
怎么用 AJAX ？
1.
先使用
axios
[?k‘sio
?
s]
庫，
與服務(wù)器進行
數(shù)據(jù)通信
基于 XMLHttpRequest 封裝、代碼簡單、月下載量在 14 億次 Vue、React 項目中都會用到 axios
2.
再學習 XMLHttpRequest 對象的使用，了解 AJAX 底層原理
語法：
1.
引入 axios.js：
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2.
使用 axios 函數(shù)
? 傳入配置對象 ? 再用 .then 回調(diào)函數(shù)接收結(jié)果，并做后續(xù)處理
練習：
需求：請求目標資源地址，拿到省份列表數(shù)據(jù)，顯示到頁面
目標資源地址：
http://hmajax.itheima.net/api/province
代碼：
2.認識 URL
URL，即統(tǒng)一資源定位符（Uniform Resource Locator），是用來指定互聯(lián)網(wǎng)資源位置的地址。
一個典型的 URL 由以下幾個部分組成：
協(xié)議（Protocol）：指定使用的網(wǎng)絡(luò)協(xié)議，例如?http、https、ftp?等。比如?https://?表示使用安全的 HTTP 協(xié)議。域名（Domain Name）：表示資源所在的服務(wù)器的名稱，例如?www.example.com。端口號（Port）（可選）：指定服務(wù)器上用于通信的端口。例如，http://example.com:8080?指的是端口號為 8080 的服務(wù)器。資源路徑（Path）：指向服務(wù)器上特定的資源或文件的位置。例如?/path/to/resource。查詢字符串（Query String）（可選）：提供附加的參數(shù)或數(shù)據(jù)，通常以???開始。例如??key1=value1&key2=value2。錨點（Fragment）（可選）：指向頁面內(nèi)部的某個部分或位置，通常以?#?開始。例如?#section1。
一個完整的 URL 可能如下所示：
https://www.example.com:8080/path/to/resource?key1=value1&key2=value2#section1
最常見的URL是這樣的：
參數(shù)說明：
http 協(xié)議：超文本傳輸協(xié)議，規(guī)定瀏覽器和服務(wù)器之間傳輸數(shù)據(jù)的格式
域名：標記服務(wù)器在互聯(lián)網(wǎng)中方位
資源路徑：標記資源在服務(wù)器下的具體位置
3.URL 查詢參數(shù)
定義：瀏覽器提供給服務(wù)器的
額外信息
，讓服務(wù)器返回瀏覽器想要的數(shù)據(jù)
語法：http://xxxx.com/xxx/xxx
?
參數(shù)名1=值1
&
參數(shù)名2=值2
語法：使用 axios 提供的
params
選項
注意：axios 在運行時把參數(shù)名和值，會拼接到 url
?參數(shù)名=值
城市列表：
http://hmajax.itheima.net/api/city?pname=河北省
案例：
地區(qū)查詢
需求：根據(jù)輸入的省份名字和城市名字，查詢地區(qū)并渲染列表
效果圖：
代碼：
4.常用請求方法和數(shù)據(jù)提交
請求方法：對服務(wù)器
資源
，要執(zhí)行的
操作
使用場景：
當數(shù)據(jù)需要在服務(wù)器上
保存
案例：
數(shù)據(jù)提交－注冊賬號
需求：通過 axios 提交用戶名和密碼，完成注冊功能
注冊用戶 URL 地址：
http://hmajax.itheima.net/api/register
請求方法：
POST
參數(shù)名：
username
用戶名（中英文和數(shù)字組成，最少 8 位）
password
密碼（最少 6 位）
代碼：
axios錯誤處理，可以讓客戶端更直觀看到錯誤信息。從而去修改。
捕捉到的 error 是一個錯誤對象。
5.HTTP協(xié)議-報文 ?
5.1?HTTP 協(xié)議－請求報文
HTTP 協(xié)議：規(guī)定了瀏覽器發(fā)送及服務(wù)器返回內(nèi)容的
格式
請求報文
：瀏覽器按照 HTTP 協(xié)議要求的
格式
，發(fā)送給服務(wù)器的
內(nèi)容
請求報文的組成部分有:
1. 請求行：請求方法，URL，協(xié)議 2. 請求頭：以鍵值對的格式攜帶的附加信息，比如：Content-Type 3. 空行：分隔請求頭，空行之后的是發(fā)送給服務(wù)器的資源 4. 請求體：發(fā)送的資源
5.2 HTTP 協(xié)議－響應(yīng)報文
HTTP 協(xié)議：規(guī)定了瀏覽器發(fā)送及服務(wù)器返回內(nèi)容的
格式
響應(yīng)報文
：服務(wù)器按照 HTTP 協(xié)議要求的
格式
，
返回給瀏覽器的
內(nèi)容
響應(yīng)報文的組成部分有:
1. 響應(yīng)行（狀態(tài)行）：協(xié)議、HTTP 響應(yīng)狀態(tài)碼、狀態(tài)信息 2. 響應(yīng)頭：以鍵值對的格式攜帶的附加信息，比如：Content-Type 3. 空行：分隔響應(yīng)頭，空行之后的是服務(wù)器返回的資源 4. 響應(yīng)體：返回的資源
HTTP 響應(yīng)狀態(tài)碼
HTTP 響應(yīng)狀態(tài)碼：用來表明請求
是否成功
完成
比如：
404（服務(wù)器找不到資源）
6.接口文檔
接口文檔
：
描述
接口
的文章
（后端工程師）
接口
：使用 AJAX 和服務(wù)器通訊時，
使用的
URL
，
請求方法
，
以及參數(shù)
傳送門
：https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8
通過接口文檔，就可以根據(jù)里面的需求來實現(xiàn)代碼。
7.案例 - 用戶登錄
案例－用戶登錄
1. 點擊登錄時，判斷用戶名和密碼長度 2. 提交數(shù)據(jù)和服務(wù)器通信 3. 提示信息
并且實現(xiàn)成功或者失敗返回不同顏色的提示框
代碼：
歡迎-登錄
提示消息
8.form-serialize 插件
作用：
快速
收集表單元素的值
使用：
1.引入form-serialize 插件的 js文件2.通過調(diào)用serialize(表單，對象)函數(shù)來實現(xiàn)
使用serialize函數(shù)，快速收集表單元素的值 ? ? ? ?* 參數(shù)1：要獲取哪個表單的數(shù)據(jù) ? ? ? ?* ?表單元素設(shè)置name屬性，值會作為對象的屬性名 ? ? ? ?* 參數(shù)2：配置對象 ? ? ? ?* ?hash 設(shè)置獲取數(shù)據(jù)結(jié)構(gòu) ? ? ? ?* ? ?- true：JS對象（推薦）一般請求體里提交給服務(wù)器 ? ? ? ?* ? ?- false: 查詢字符串(username="Xxx" & ) ? ? ? ?* ?empty 設(shè)置是否獲取空值 ? ? ? ?* ? ?- true: 獲取空值（推薦）數(shù)據(jù)結(jié)構(gòu)和標簽結(jié)構(gòu)一致 ? ? ? ?* ? ?- false：不獲取空值
代碼演示：
案例－用戶登錄
使用 form-serialize 插件，
收集
用戶名和密碼
代碼實現(xiàn)：
歡迎-登錄
提示消息
柚子快報激活碼778899分享：前端 AJAX 入門 day1
好文鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Voghion時尚外貿(mào)坊
