目標
1. 理解ajax基本使用
2. 會使用XMLHttpRequest對象實現數據交互
3. 了解onreadystatechange服務器響應信息
4. 會使用FormData對象上傳文件
5. 了解upload事件對象
知識要點
1.ajax使用
- ajax是： *Ajax* 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）
- 新建XMLHttpRequest對象；
```js
let xhr = new XMLHttpRequest();
```
- 配置請求參數
```js
xhr.open("get","/checkUser",true); //true是異步，false是同步
```
- 接收返還值
```js
xhr.onload = function(){
let res = JSON.parse(xhr.responseText);
}
```
- 發送服務器
```
xhr.send();
```
## 針對ajax的詳細解釋
- get注意點
- get通過parmas傳參
- get和querystring的問題,通過url傳參
- post注意點
- 發送數據時候需要設置http正文頭格式；
```js
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //默認編碼
xhr.setRequestHeader("Content-type","multipart/form-data"); //二進制編碼
xhr.setRequestHeader("Content-type","application/json"); //json編碼
```
- 獲取頭部信息；
- getAllResponseHeaders 或者是getResponseHeader ；
## onreadystatechange
onreadystatechange：存有處理服務器響應的函數，每當 readyState 改變時，onreadystatechange 函數就會被執行。
readyState：存有服務器響應的狀態信息。
- 0: 請求未初始化（代理被創建，但尚未調用 open() 方法）
- 1: 服務器連接已建立（`open`方法已經被調用）
- 2: 請求已接收（`send`方法已經被調用，並且頭部和狀態已經可獲得）
- 3: 請求處理中（下載中，`responseText` 屬性已經包含部分數據）
- 4: 請求已完成，且響應已就緒（下載操作已完成）
status常用狀態
|
HTTP狀態碼
|
描述
|
|
100
|
繼續。繼續響應剩余部分，進行提交請求
|
|
200
|
成功
|
|
301
|
永久移動。請求資源永久移動到新位置
|
|
302
|
臨時移動。請求資源零時移動到新位置
|
|
304
|
未修改。請求資源對比上次未被修改，響應中不包含資源內容
|
|
401
|
未授權，需要身份驗證
|
|
403
|
禁止。請求被拒絕
|
|
404
|
未找到，服務器未找到需要資源
|
|
500
|
服務器內部錯誤。服務器遇到錯誤，無法完成請求
|
|
503
|
服務器不可用。臨時服務過載，無法處理請求
|
- 返還數據類型
- 服務器返還json數據
```js
xhr.responseText //來獲取
```
- 服務器返還xml數據
```js
xhr.responseXML //獲取值
```
- 重寫response里的content-type內容
- xhr.overrideMimeType('text/xml; charset = utf-8')
- 同步及異步ajax；
- 設置true和false區別；
ajax代碼封裝
function ajax(options) { let opts = Object.assign({ url: "", method: "get", data: "", headers:{ "content-type":"application/x-www-form-urlencoded", }, success(res) {} }, options) let xhr = new XMLHttpRequest(); if(opts.method==="get"){ console.log(o2u(opts.data)) // data: { // hello: "你好", // height: "178cm" // } // hello=還好&height=178cm opts.url = opts.url+"?"+o2u(opts.data); } xhr.open(opts.method,opts.url,true); // 設置頭部 for(let key in opts.headers){ xhr.setRequestHeader(key,opts.headers[key]); } let sendData; switch(opts.headers['content-type']){ case 'application/x-www-form-urlencoded': sendData = o2u(opts.data); break; case 'application/json': sendData = JSON.stringify(opts.data); break; } xhr.onload = function(){ opts.success(JSON.parse(xhr.responseText)); } if(opts.method=="get"){ xhr.send(); }else{ xhr.send(sendData); } function o2u(obj){ let keys = Object.keys(obj); let values = Object.values(obj); // hello=你好; // height=178cm return keys.map((v,k)=>{ return `${v}=${values[k]}`; }).join("&"); } }
2.利用FormData來實現文件上傳
- 創建FormData對象
- 監控上傳進度
upload 事件
- onloadstart 上傳開始
- onprogress 數據傳輸進行中
- evt.total ：需要傳輸的總大小；
- evt.loaded :當前上傳的文件大小；
- onabort 上傳操作終止
- onerror 上傳失敗
- onload 上傳成功
- onloadend 上傳完成（不論成功與否）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="file" class="myfile" /> <button>點擊我上傳文件</button> </body> <script> document.querySelector("button").onclick = function(){ let file = document.querySelector(".myfile").files[0]; // console.log(files); let form = new FormData(); form.append("img",file); form.append("name","張三"); let xhr = new XMLHttpRequest(); xhr.open("post","/upload",true); xhr.onload = function(){ console.log(xhr.responseText); } xhr.send(form); } </script> </html>