咱們知道有幾種方式能夠發請求,可是都有其侷限性,以下:javascript
用 form 能夠發請求,可是會刷新頁面或新開頁面html
用 a 能夠發 get 請求,可是也會刷新頁面或新開頁面java
用 img 能夠發 get 請求,可是只能以圖片的形式展現程序員
用 link 能夠發 get 請求,可是只能以 CSS、favicon 的形式展現ajax
用 script 能夠發 get 請求,可是只能以腳本的形式運行小程序
思考:有沒有這樣的發請求的方式?跨域
- get、post、put、delete 請求都行
- 想以什麼形式展現就以什麼形式展現
AJAX即「Asynchronous JavaScript and XML」(異步的JavaScript與XML技術)瀏覽器
服務器之殤服務器
上個世紀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 規範
優勢
(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應用每每變成程序員的夢魘。
使用 js 發請求 ,使用 js 處理返回的響應。
<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 或 POSTurl
: 文件在服務器上的位置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 (請求完成) | 整個請求過程已經完畢. |
request.status
200表示OK;404表示未找到頁面。參考文章:
AJAX-阮一峯
爲何form表單提交沒有跨域問題,但ajax提交有跨域問題?
AJAX-MDN