AJAX 小知識

時間 2019-11-16

標籤 ajax 知識欄目 Ajax 简体版

原文原文鏈接

1.如何發請求？

咱們知道有幾種方式能夠發請求，可是都有其侷限性，以下：javascript

用 form 能夠發請求，可是會刷新頁面或新開頁面html

用 a 能夠發 get 請求，可是也會刷新頁面或新開頁面java

用 img 能夠發 get 請求，可是只能以圖片的形式展現程序員

用 link 能夠發 get 請求，可是只能以 CSS、favicon 的形式展現ajax

用 script 能夠發 get 請求，可是只能以腳本的形式運行小程序

思考：有沒有這樣的發請求的方式？跨域

get、post、put、delete 請求都行

想以什麼形式展現就以什麼形式展現

2.AJAX 的出現

AJAX即「Asynchronous JavaScript and XML」（異步的JavaScript與XML技術)瀏覽器

2.1 AJAX 的歷史

服務器之殤服務器

上個世紀90年代，幾乎全部的網站都由HTML頁面實現，服務器處理每個用戶請求都須要從新加載網頁。這樣的處理方式效率不高。用戶的體驗是全部頁面都會消失，再從新載入，即便只是一部分頁面元素改變也要從新載入整個頁面，不只要刷新改變的部分，連沒有變化的部分也要刷新。這會加劇服務器的負擔。網絡
異步加載和iframe方案

這能夠用異步加載來解決。1995年，JAVA語言的初版發佈，隨之發佈的的Java applets（JAVA小程序）首次實現了異步加載。瀏覽器經過運行嵌入網頁中的Java applets與服務器交換數據，沒必要刷新網頁。1996年，Internet Explorer將iframe元素加入到HTML，支持局部刷新網頁。
XMLHttp 的出現

1998年先後，Outlook Web Access小組寫成了容許客戶端腳本發送HTTP請求（XMLHTTP）的第一個組件。該組件原屬於微軟Exchange Server，而且迅速地成爲了Internet Explorer 4.0[2]的一部分。部分觀察家認爲，Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程序，併成爲包括Oddpost的網絡郵件產品在內的許多產品的領頭羊。可是，2005年初，許多事件使得Ajax被大衆所接受。Google在它著名的交互應用程序中使用了異步通信，如Google討論組、Google地圖、Google搜索建議、Gmail等。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創，該文的迅速流傳提升了人們使用該項技術的意識。另外，對Mozilla/Gecko的支持使得該技術走向成熟，變得更爲簡單易用。
總結爲：

IE 5 率先在 JS 中引入 ActiveX 對象（API），使得 JS 能夠直接發起 HTTP 請求。隨後 Mozilla、 Safari、 Opera 也跟進（抄襲）了，取名 XMLHttpRequest，並被歸入 W3C 規範

2.2 AJAX 的優缺點

優勢

（1）實現局部更新：

就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更爲迅捷地迴應用戶動做，並避免了在網絡上發送那些沒有改變的信息。

（2）僅依賴於瀏覽器和JavaScript：

Ajax不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣，Ajax應用程序必須在衆多不一樣的瀏覽器和平臺上通過嚴格的測試。隨着Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。一樣，也出現了另外一種輔助程序設計的技術，爲那些不支持JavaScript的用戶提供替代功能。
缺點

（1）瀏覽器的兼容問題：

Ajax在本質上是一個瀏覽器端的技術，首先面臨無可避免的第一個問題便是瀏覽器的兼容性問題。各家瀏覽器對於JavaScript／DOM／CSS的支持總有部分不太相同或是有Bug，甚至同一瀏覽器的各個版本間對於JavaScript／DOM／CSS的支持也有可能部分不同。這致使程序員在寫Ajax應用時花大部分的時間在調試瀏覽器的兼容性而非在應用程序自己。所以，目前大部分的Ajax連接庫或開發框架大多以js連接庫的形式存在，以定義更高階的JavaScript API、JavaScript對象（模板）、或者JavaScript Widgets來解決此問題。

（2）局部刷新帶來的問題：

Ajax技術之主要目的在於局部交換客戶端及服務器之間的數據。如同傳統之主從架構，無可避免的會有部分的業務邏輯會實如今客戶端，或部分在客戶端部分在服務器。因爲業務邏輯可能分散在客戶端及服務器，且以不一樣之程序語言實現，這致使Ajax應用程序極難維護。若有用戶接口或業務邏輯之更動需求，再加上前一個JavaScript/DOM/CSS 之兼容性問題，Ajax應用每每變成程序員的夢魘。

3.AJAX 的使用

3.1 AJAX的原理

使用 XMLHttpRequest 發請求
服務器返回 XML 格式的字符串
JS 解析 XML，並更新局部頁面

3.2 AJAX 的目的：

使用 js 發請求，使用 js 處理返回的響應。

3.3 請用原生 JS寫出一個AJAX請求：

<body>
	<button id="button">點我</button>
	<script> button.addEventListener('click',(e)=>{ let request = new XMLHttpRequest() request.open(method,address) request.send() reqeust.onreadychange() = ()={ if(request.readyState === 4){ if(request.status >= 200 && reuest.status< 300){ let string = esponseText let object =window.JSON.parse(string) } } } }) </script>
</body>
複製代碼

分析：

let request = new XMLHttpRequest() 建立一個AJAX實例
request.open(method,address) 初始化請求，通常有3個參數，若是沒有設置就是默認值 request.open(method,url,async)
- method ：請求的類型；GET 或 POST
- url ：文件在服務器上的位置
- async ：true（異步）或 false（同步）
request.send() 發送請求(若是參數爲String，只能爲 post請求)

reqeust.onreadychange() 監聽 readystatue 的變化，每當 readyState 改變時，就會觸發 onreadystatechange 事件。

request.readyState XMLHttpRequest 的狀態。從 0 到 4 發生變化

值	readyState 狀態	意義
0	`UNSENT`(未打開)	`open()`方法還未被調用，請求未初始化
1	`OPENED` (未發送)	`open()`方法已經被調用，服務器鏈接已創建
2	HEADERS_RECEIVED (已獲取響應頭)	`send()`方法已經被調用, 響應頭和響應狀態已經返回.請求已接收
3	LOADING (正在下載響應體)	響應體下載中; `responseText`中已經獲取了部分數據.
4	DONE (請求完成)	整個請求過程已經完畢.