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 是服務器回傳的資料 })轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/303493.html
標籤：JavaScript