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例項物件 varxhr=newXMLHttpReuqest 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轉換為JSJSON.parse(JSON格式的字串) JS轉換為JSONJSON.stringify(JS格式的物件和陣列)

FormData物件管理表單資料使用這個物件的表單元素都必須有name屬性

FormData傳輸簡單的資料

1.獲取表單元素 2.newFormData(獲取到的表單元素)這樣就得到了表單域內的所有資料 3.使用xhr物件

FormData傳輸檔案

1.獲取表單域中的檔案列表注意此時的變數files是陣列形式 varfiles=document.queryselector('').files; 2.建立FormData例項化物件把檔案傳過去 varfd=newFormData(files[0]) 3.使用xhr傳參的時候把fd傳過去就好了

4.計算檔案上傳進度固定寫法

xhr.upload.onprogress=function(e){ //e.lengthComputable是一個布林值,表示當前上傳的資源是否具有可計算的長度 if(e.lengthComputable){ //e.loaded已傳輸的位元組 //e.total需要傳輸的位元組 varsum=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是伺服器返回的資料 })