XMLHttpRequest的基本使用
什么XMLHttpRequest
XMLHttpRequest（簡稱 xhr）是瀏覽器提供的 Javascript 對象，通過它，可以請求服務器上的數據資源。之前所學的 jQuery 中的 Ajax 函數，就是基于 xhr 對象封裝出來的
使用xhr發起GET請求
步驟
- 創建 xhr 對象
- 調用 xhr.open() 函數
- 調用 xhr.send() 函數
- 監聽 xhr.onreadystatechange 事件
// 1. 創建 XHR 對象
var xhr = new XMLHttpRequest()
// 2. 調用 open 函數
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 調用 send 函數
xhr.send()
// 4. 監聽 onreadystatechange 事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器響應的數據
console.log(xhr.responseText)
}
}
了解xhr對象的readyState屬性
XMLHttpRequest 對象的 readyState 屬性，用來表示當前 Ajax 請求所處的狀態。每個 Ajax 請求必然處于以下狀態中的一個：
使用xhr發起帶參數的GET請求
使用 xhr 對象發起帶參數的 GET 請求時，只需在調用 xhr.open 期間，為 URL 地址指定參數即可：
這種在 URL 地址后面拼接的參數，叫做查詢字符串。
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
查詢字符串
什么是查詢字符串
定義：查詢字符串（URL 參數）是指在 URL 的末尾加上用于向服務器發送信息的字符串（變量）。
格式：將英文的 ? 放在URL 的末尾，然后再加上 參數＝值 ，想加上多個參數的話，使用 & 符號進行分隔。以這個形式，可以將想要發送給服務器的數據添加到 URL 中。
GET請求攜帶參數的本質
無論使用 .get()，又或者直接使用 xhr 對象發起 GET 請求，當需要攜帶參數的時候，本質上，都是直接將參數以查詢字符串的形式，追加到 URL 地址的后面，發送到服務器的。
URL編碼與解碼
什么是URL編碼
URL 地址中，只允許出現英文相關的字母、標點符號、數字，因此，在 URL 地址中不允許出現中文字符。如果 URL 中需要包含中文這樣的字符，則必須對中文字符進行編碼（轉義）。
URL編碼的原則：使用安全的字符（沒有特殊用途或者特殊意義的可打印字符）去表示那些不安全的字符。
URL編碼原則的通俗理解：使用英文字符去表示非英文字符
如何對URL進行編碼與解碼
瀏覽器提供了 URL 編碼與解碼的 API，分別是：
- encodeURI() 編碼的函數
- decodeURI() 解碼的函數
使用xhr發起POST請求
步驟
- 創建 xhr 對象
- 調用 xhr.open() 函數
- 設置 Content-Type 屬性（固定寫法）
- 調用 xhr.send() 函數，同時指定要發送的數據
- 監聽 xhr.onreadystatechange 事件
// 1. 創建 xhr 對象
var xhr = new XMLHttpRequest()
// 2. 調用 open 函數
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 設置 Content-Type 屬性（固定寫法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 調用 send 函數
xhr.send('bookname=水滸傳&author=施耐庵&publisher=上海圖書出版社')
// 5. 監聽事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
數據交換格式
什么是數據交換格式
數據交換格式，就是服務器端與客戶端之間進行數據傳輸與交換的格式
前端領域，經常提及的兩種數據交換格式分別是 XML 和 JSON。其中 XML 用的非常少，所以，我們重點要學習的數據交換格式就是 JSON
XML
什么是XML
XML 的英文全稱是 EXtensible Markup Language，即可擴展標記語言。因此，XML 和 HTML 類似，也是一種標記語言。
XML和HTML的區別
XML 和 HTML 雖然都是標記語言，但是，它們兩者之間沒有任何的關系。
- HTML 被設計用來描述網頁上的內容，是網頁內容的載體
- XML 被設計用來傳輸和存儲數據，是數據的載體
XML的缺點
- XML 格式臃腫，和數據無關的代碼多，體積大，傳輸效率低
- 在 Javascript 中解析 XML 比較麻煩
JSON（???）
什么是JSON
概念：JSON 的英文全稱是 JavaScript Object Notation，即“JavaScript 對象表示法”。簡單來講，
JSON 就是 Javascript 對象和數組的字符串表示法，它使用文本表示一個 JS 對象或數組的信息，因此，
JSON 的本質是字符串。
作用：JSON 是一種輕量級的文本數據交換格式，在作用上類似于 XML，專門用于存儲和傳輸數據，但是 JSON 比 XML 更小、更快、更易解析。
現狀：JSON 是在 2001 年開始被推廣和使用的數據格式，到現今為止，JSON 已經成為了主流的數據交換格式
JSON的兩種結構
JSON 就是用字符串來表示 Javascript 的對象和數組。所以，JSON 中包含對象和數組兩種結構，通過這兩種結構的相互嵌套，可以表示各種復雜的數據結構。
對象結構
對象結構在 JSON 中表示為 { } 括起來的內容。數據結構為 { key: value, key: value, … } 的鍵值對結構。其中，key 必須是使用英文的雙引號包裹的字符串，value 的數據類型可以是數字、字符串、布爾值、null、數組、對象6種類型。
數組結構
數組結構在 JSON 中表示為 [ ] 括起來的內容。數據結構為 [ "java", "javascript", 30, true … ] 。數組中數據的類型可以是數字、字符串、布爾值、null、數組、對象6種類型。
JSON語法注意事項
① 屬性名必須使用雙引號包裹
② 字符串類型的值必須使用雙引號包裹
③ JSON 中不允許使用單引號表示字符串
④ JSON 中不能寫注釋
⑤ JSON 的最外層必須是對象或數組格式
⑥ 不能使用 undefined 或函數作為 JSON 的值
JSON 的作用：在計算機與網絡之間存儲和傳輸數據。
JSON 的本質：用字符串來表示 Javascript 對象數據或數組數據
JSON和JS對象的關系
JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。例如：
JSON和JS對象的互轉
要實現從 JSON 字符串轉換為 JS 對象，使用 JSON.parse() 方法：
要實現從 JS 對象轉換為 JSON 字符串，使用 JSON.stringify() 方法：
應用場景
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
console.log(typeof xhr.responseText)
var result = JSON.parse(xhr.responseText)
console.log(result)
}
}
序列化和反序列化
把數據對象 轉換為 字符串的過程，叫做序列化，例如：調用 JSON.stringify() 函數的操作，叫做 JSON 序列化。
把字符串 轉換為 數據對象的過程，叫做反序列化，例如：調用 JSON.parse() 函數的操作，叫做 JSON 反序列化。
jQuery高級用法- jQuery實現文件上傳
定義UI結構
<!-- 導入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 文件選擇框 -->
<input type="file" id="file1" />
<!-- 上傳文件按鈕 -->
<button id="btnUpload">上傳</button>
驗證是否選擇了文件
$('#btnUpload').on('click', function() {
// 1. 將 jQuery 對象轉化為 DOM 對象，并獲取選中的文件列表
var files = $('#file1')[0].files
// 2. 判斷是否選擇了文件
if (files.length <= 0) {
return alert('請選擇圖片后再上傳！‘)
}
})
向FormData中追加文件
// 向 FormData 中追加文件
var fd = new FormData()
fd.append('avatar', files[0])
使用jQuery發起上傳文件的請求
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
// 不修改 Content-Type 屬性，使用 FormData 默認的 Content-Type 值
contentType: false,
// 不對 FormData 中的數據進行 url 編碼，而是將 FormData 數據原樣發送到服務器
processData: false,
success: function(res) {
console.log(res)
}
})
jQuery實現loading效果
ajaxStart(callback)
Ajax 請求開始時，執行 ajaxStart 函數。可以在 ajaxStart 的 callback 中顯示 loading 效果，示例代碼如下：
// 自 jQuery 版本 1.8 起，該方法只能被附加到文檔
$(document).ajaxStart(function() {
$('#loading').show()
})
注意： $(document).ajaxStart() 函數**會監聽當前文檔內所有的 Ajax 請求。
ajaxStop(callback)
Ajax 請求結束時，執行 ajaxStop 函數。可以在 ajaxStop 的 callback 中隱藏 loading 效果，示例代碼如下：
// 自 jQuery 版本 1.8 起，該方法只能被附加到文檔
$(document).ajaxStop(function() {
$('#loading').hide()
})
什么是axios
Axios 是專注于網絡數據請求的庫。
相比于原生的 XMLHttpRequest 對象，axios 簡單易用。
相比于 jQuery，axios 更加輕量化，只專注于網絡數據請求。
axios發起GET請求
axios 發起 get 請求的語法：
axios.get('url', { params: { /*參數*/ } }).then(callback)
具體的請求示例如下：
// 請求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 請求的參數對象
var paramsObj = { name: 'zs', age: 20 }
// 調用 axios.get() 發起 GET 請求
axios.get(url, { params: paramsObj }).then(function(res) {
// res.data 是服務器返回的數據
var result = res.data
console.log(res)
})
axios發起POST請求
axios 發起 post 請求的語法：
axios.post('url', { /*參數*/ }).then(callback)
具體的請求示例如下:
// 請求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服務器的數據
var dataObj = { location: '北京', address: '順義' }
// 調用 axios.post() 發起 POST 請求
axios.post(url, dataObj).then(function(res) {
// res.data 是服務器返回的數據
var result = res.data
console.log(result)
})
直接使用axios發起請求
axios 也提供了類似于 jQuery 中 $.ajax() 的函數，語法如下：
axios({
method: '請求類型',
url: '請求的URL地址',
data: { /* POST數據 */ },
params: { /* GET參數 */ }
}).then(callback)
發起get請求
document.querySelector('#btn3').addEventListener('click', function () {
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsData = { name: '鋼鐵俠', age: 35 }
axios({
method: 'GET',
url: url,
params: paramsData
}).then(function (res) {
console.log(res.data)
})
})
發起post請求
document.querySelector('#btn4').addEventListener('click', function () {
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: '娃哈哈',
age: 18,
gender: '女'
}
}).then(function (res) {
console.log(res.data)
})
})
