URL的組成；
https://www.cnblogs.com/wangbojs/p/15339835.html
https 通信協議
www.cnblogs.com 服務器名稱
wangbojs/p/15339835.html 資源在服務器上具體的從存放位置
客戶端與服務器通訊過程 請求=>處理=>相應
1.客戶端請求服務器
2.服務器處理這次請求
3.服務器響應客戶端
資源的請求方式
get請求: 通常用於獲取服務器資源(要資源)
例如: 根據URL地址 從服務器獲取HTML文件, css文件, js文件, 圖片文件, 數據資源等
POST請求: 通常用於向服務器提交數據(送資源)
例如: 登錄時,向服務器提交登錄信息, 注冊時向服務器提交注冊信息
Ajax
Ajax是在網頁中利用XMLHttpRequest對象和服務器進行數據交互的方式, 就是 Ajax
Ajax能然我們輕松實現網頁與服務器之間的數據交互
Ajax的應用場景
用戶名檢測, 注冊用戶時 通過Ajax的方式動態監測用戶名是否被占用
搜索提示, 當輸入搜索關鍵字時, 通過Ajax的形式,動態加載搜索提示列表
數據分頁顯示 當點擊頁碼時, 通過Ajax的形式,根據頁碼值動態刷新表格的數據
數據增刪改查 都需要通過Ajax的形式來實現數據交互
使用原生js實現Ajax請求步驟
1. 創建xhr實例對象
var xhr = new XMLHttpReuqest
2. 調用xhr.open()函數
xhr.open('請求方式','URL地址[GET方式下寫:? + 查詢字符串]')
3. 調用xhr.send()函數
xhr.send([POST方式下寫查詢字符串])
4. 調用xhr.setRequestHeader()函數 固定寫法且只有在POST請求會用到
xhr.setRequestHeader('Content-Type','x-www-form-urlencoded')
5. 監聽xhr.onreadystatechange事件
xhr.onreadystatechange = function(){
// 固定寫法
if(xhr.readystate === 4 && xhr.status === 200){
console.log(xhr.responeText)
}
}
原生Ajax的新特性
xhr.timeout = 1000; // 設置請求時限
xhr.ontimeout = function(){} // 設置請求超時后的回調函數
JSON
JSON就是javascripe對象和數組的字符串表示法
JSON的本質是字符串, 一種輕量級的文本數據交換格式, 專門用於存儲和傳輸數據
JSON的兩種結構
JSON就是用字符串來表示 javascript 的對象和數據
例: {name:name} 轉換為JSON {"name":"name"}
JSON和JS對象互轉
JSON轉換為JS JSON.parse(JSON格式的字符串)
JS轉換為JSON JSON.stringify(JS格式的對象和數組)
FormData對象 管理表單數據 使用這個對象的表單元素都必須有 name屬性
FormData傳輸簡單的數據
1. 獲取表單元素
2. new FormData(獲取到的表單元素) 這樣就得到了表單域內的所有數據
3. 使用xhr對象
FormData傳輸文件
1. 獲取表單域中的文件列表 注意此時的變量 files 是數組形式
var files = document.queryselector('').files;
2. 創建 FormData 實例化對象 把文件傳過去
var fd = new FormData(files[0])
3. 使用 xhr 傳參的時候把 fd 傳過去就好了
4. 計算文件上傳進度 固定寫法
xhr.upload.onprogress = function(e){
// e.lengthComputable 是一個布爾值, 表示當前上傳的資源是否具有可計算的長度
if(e.lengthComputable){
// e.loaded 已傳輸的字節
// e.total 需要傳輸的字節
var sum = Math.ceil((e.loaded / e.total)*100)
}
}
// 上傳完成事件
xhr.upload.onload = function(){
}
axios 專注於網絡數據請求的庫
相比於原生的XMLHttpRequest對象, axios簡單易用
get請求語法
axios.get(url,{params:請求數據}),then(function(res){
// 請求回調函數
// 需要注意的一點是 res.data是服務器返回的數據, res是axios經過重寫的
})
POST請求語法
axios.post('url',{參數}).then(function(res){
// 回調函數, 注意 res.data是服務器返回的數據
})
axios請求語法
axios({
method:'請求類型',
url:'請求的URL地址',
data:{POST請求的數據}
params:{GET請求的數據}
}).then(function(res){
res.data 是服務器返回的數據
})