目錄
一、AJAX概念和axios使用
1.1 什么是AJAX ?
1.2 怎么用AJAX ?
1.3 axios使用
二、認識URL
2.1 什么是URL?
2.2 URL的組成
組成
協議
域名
資源路徑
獲取-新聞列表
三、URL查詢參數
URL查詢參數
axios - 查詢參數
四、常用請求方法和數據提交
常用請求方法
數據提交
axios請求配置
數據提交-注冊賬號
axios錯誤處理
五、HTTP協議-報文
HTTP協議-請求報文
請求報文的格式
請求報文-錯誤排查
HTTP協議-響應報文
六、接口文檔
七、案例-用戶登錄
八、form-serialize插件
一、AJAX概念和axios使用
1.1 什么是AJAX ?
定義：
概念：AJAX是瀏覽器與服務器進行數據通信的技術
1.2 怎么用AJAX ?
1. 先使用axios庫，與服務器進行數據通信
- 基于XMLHttpRequest封裝、代碼簡單、月下載量在14億次
- Vue、React項目中都會用到axios
2. 再學習XMLHttpRequest對象的使用，了解AJAX底層原理
1.3 axios使用
語法：
1. 引入axios.js：https://cdn.staticfile.org/axios/0.18.0/axios.min.js
或者：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2. 使用axios函數
- 傳入配置對象
- 再用 .then 回調函數接收結果，并做后續處理
需求：請求目標資源地址,拿到省份列表數據，顯示到頁面
目標資源地址：http://hmajax.itheima.net/api/province
總結：
1. AJAX有什么用?
- 瀏覽器和服務器之間通信，動態數據交互
2. AJAX如何學
- 先掌握axios使用
- 再了解XMLHttpRequest原理
3. 這一節axios體驗步驟?
- 引入axios庫
- 使用axios語法
二、認識URL
認識URL
原因：知道作用和組成，方便與后端人員溝通
2.1 什么是URL?
定義：
例如：
概念：URL就是統一資源定位符，簡稱網址，用于訪問網絡上的資源
2.2 URL的組成
組成
協議
http協議：超文本傳輸協議，規定瀏覽器和服務器之間傳輸數據的格式
域名
域名：標記服務器在互聯網中方位
資源路徑
資源路徑：標記資源在服務器下的具體位置
獲取-新聞列表
需求：使用axios從服務器拿到新聞列表數據
目標資源地址: http://hmajax.itheima.net/api/news
總結：
1. URL是什么:
- 統一資源定位符，網址，用于訪問服務器.上資源
2. 請解釋這個URL，每個部分作用?
- http://hmajax.itheima.net/api/news
- 協議://域名/資源路徑
三、URL查詢參數
URL查詢參數
定義：瀏覽器提供給服務器的額外信息，讓服務器返回瀏覽器想要的數據
語法：http://xxxx.com/ xxx/xxx?參數名1=值1&參數名2=值2
axios - 查詢參數
語法：使用axios提供的params選項
注意: axios在運行時把參數名和值，會拼接到url!?參數名=值
城市列表：http://hmajax.itheima.net/api/city?pname=河北省
總結：
1. URL查詢參數有什么作用?
- 瀏覽器提供給服務器額外信息，獲取對應的數據
2. axios 要如何攜帶查詢參數?
- 使用params選項，攜帶參數名和值
案例-地區查詢
需求：根據輸入的省份名字和城市名字，查詢地區并渲染列表
首先：確定URL網址和參數說明
- 查詢某個省內某個城市的所有地區：http://hmajax.itheima.net/api/area
- 參數名：
- pname：省份名字或直轄市名字，比如北京、福建省、遼寧省...
- cname：城市名字，比如北京市、廈門市、大連市...
完整：http://hma
