如何發(fā)請求？
用 form 可以發(fā)請求，但是會刷新頁面或新開頁面
用 a 可以發(fā) get 請求，但是也會刷新頁面或新開頁面
用 img 可以發(fā) get 請求，但是只能以圖片的形式展示
用 link 可以發(fā) get 請求，但是只能以 CSS、favicon 的形式展示
用 script 可以發(fā) get 請求，但是只能以腳本的形式運行
有沒有什么方式可以實現(xiàn)：
get、post、put、delete 請求都行
想以什么形式展示就以什么形式展示
微軟的突破
IE 5 率先在 JS 中引入 ActiveX 對象（API），使得 JS 可以直接發(fā)起 HTTP 請求。
隨后 Mozilla、 Safari、 Opera 也跟進（抄襲）了，取名 XMLHttpRequest，并被納入 W3C 規(guī)范
Jesse James Garrett 講如下技術取名叫做 AJAX：異步的 JavaScript 和 XML
- 使用 XMLHttpRequest 發(fā)請求
- 服務器返回 XML 格式的字符串
- JS 解析 XML，并更新局部頁面
AJAX技術基于Javascript和HTTP Request.
AJAX應用和傳統(tǒng)Web應用有什么不同。
在傳統(tǒng)的Javascript編程中，如果想得到服務器端數據庫或文件上的信息，或者發(fā)送客戶端信息到服務器，需要建立一個HTML form然后GET或者POST數據到服務器端。用戶需要點擊”Submit”按鈕來發(fā)送或者接受數據信息，然后等待服務器響應請求，頁面重新加載。
因為服務器每次都會返回一個新的頁面， 所以傳統(tǒng)的web應用有可能很慢而且用戶交互不友好。
使用AJAX技術， 就可以使Javascript通過XMLHttpRequest對象直接與服務器進行交互。
通過HTTP Request， 一個web頁面可以發(fā)送一個請求到web服務器并且接受web服務器返回的信息(不用重新加載頁面)，展示給用戶的還是通一個頁面，用戶感覺頁面刷新，也看不到到Javascript后臺進行的發(fā)送請求和接受響應。
Ajax包含下列技術：
基于web標準（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（Document ObjectModel）進行動態(tài)顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操作；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將所有的東西綁定在一起。
HTML，css，dom，xml，xmlHttpRequest，javascript
請介紹一下XMLhttprequest對象。
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。通過XMLHttpRequest對象，Web開發(fā)人員可以在頁面加載以后進行頁面的局部更新。
如何使用 XMLHttpRequest
使用ajax原生方式發(fā)送請求主要通過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現(xiàn)異步通信效果
myButton.addEventListener('click', (e)=>{
let request = new XMLHttpRequest()
request.open('get', '/xxx') // 配置request
request.send()
request.onreadystatechange = ()=>{
if(request.readyState === 4){
console.log('請求響應都完畢了')
console.log(request.status)
if(request.status >= 200 && request.status < 300){
console.log('說明請求成功')
console.log(typeof request.responseText)
console.log(request.responseText)
let string = request.responseText
// 把符合 JSON 語法的字符串
// 轉換成 JS 對應的值
let object = window.JSON.parse(string)
// JSON.parse 是瀏覽器提供的
console.log(typeof object)
console.log(object)
console.log('object.note')
console.log(object.note)
}else if(request.status >= 400){
console.log('說明請求失敗')
}
}
}
})
// 后端代碼
}else if(path==='/xxx'){
response.statusCode = 200
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8001')
response.write(`
{
"note":{
"to": "小谷",
"from": "方方",
"heading": "打招呼",
"content": "hi"
}
}
`)
response.end()
AJAX都有哪些優(yōu)點和缺點？
1、最大的一點是頁面無刷新，用戶的體驗非常好。
2、使用異步方式與服務器通信，具有更加迅速的響應能力。
3、可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節(jié)約空間和寬帶租用成本。并且減輕服務器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。
4、基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。
ajax的缺點
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節(jié)。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機制。
5、不容易調試。
這邊ajax的 readyState有五種狀態(tài)：
0 － （未初始化）
(XMLHttpRequest)對象已經創(chuàng)建，但還沒有調用open()方法。值為0表示對象已經存在，否則瀏覽器會報錯：對象不存在。
1 － （載入/正在發(fā)送請求）
對XMLHttpRequest對象進行初始化，即調用open()方法，根據參數(method,url,true)，完成對象狀態(tài)的設置。并調用send()方法開始向服務端發(fā)送請求。值為1表示正在向服務端發(fā)送請求。
2 － （載入完成/數據接收）
此階段接收服務器端的響應數據。但獲得的還只是服務端響應的原始數據，并不能直接在客戶端使用。值為2表示send()方法執(zhí)行完成，已經接收完全部響應數據。并為下一階段對數據解析作好準備。
3 － （交互/解析數據）正在解析響應內容
此階段解析接收到的服務器端響應數據。即根據服務器端響應頭部返回的MIME類型把數據轉換成能通過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調用作好準備。值為3表示正在解析數據。
4 － （后臺處理完成）響應內容解析完成，可以在客戶端調用了
此階段確認全部數據都已經解析為客戶端可用的格式，解析已經完成。值為4表示數據解析完畢，可以通過XMLHttpRequest對象的相應屬性取得數據。
總之，整個XMLHttpRequest對象的生命周期應該包含如下階段：
創(chuàng)建－0初始化請求－1發(fā)送請求－2接收數據－3解析數據－4完成 。
開發(fā)中默認使用”===”來避免拋出異常。
