標籤:body 指令碼 mis gem pac let ref images click
Ajax 是什嗎?
Ajax 即“Asynchronous Javascript And XML”(非同步 JavaScript 和 XML)是指一種建立互動式網頁應用的網頁開發技術。
它由以下幾種技術組合而成,包括:
- HTML/XHTML——主要的內容表示語言。
- CSS——為XHTML提供文字格式設定定義。
- DOM——對已載入的頁面進行動態更新。
- XML——資料交換格式。
- XSLT——將XML轉換為XHTML(用CSS修飾樣式)。
- XMLHttp——用XMLHttpRequest來和伺服器進行非同步通訊,是主要的通訊代理。
- JavaScript——用來編寫Ajax引擎的指令碼語言。
在Ajax解決方案中,HTML/XHTML、DOM以及JavaScript是必須的。大概分為三個過程:
- 使用XMLHttpRequest發請求
- 伺服器返回XML格式字串
- JS解析XML並更新局部變數
XMLHttpRequest對象
當需要非同步與伺服器交換資料時,需要XMLHttpRequest對象來非同步交換。XMLHttpRequest對象的主要屬性有:
- onreadystatechange——每次狀態改變所觸發事件的事件處理常式。
- responseText——從伺服器處理序返回資料的字串形式。
- responseXML——從伺服器處理序返回的DOM相容的文檔資料對象。
- status——從伺服器返回的數字代碼,狀態代碼如404(未找到)和200(已就緒)。
- status Text——伴隨狀態代碼的字串資訊。
- readyState——對象狀態值。對象狀態值有以下幾個:
0 - (未初始化)還沒有調用send()方法
1 - (載入)已調用send()方法,正在發送請求
2 - (載入完成)send()方法執行完成
3 - (互動)正在解析響應內容
4 - (完成)響應內容解析完成,可以在用戶端調用了
對於readyState的狀態值,其中“0”狀態是預設狀態值,而對於成功訪問的狀態(得到資訊)我們大多數採用“4”進行判斷
Ajax的核心就是是JavaScript對象XmlHttpRequest,這個對象為向伺服器發送請求和解析伺服器響應提供了流暢的介面。XmlHttpRequest可以使用JavaScript向伺服器提出請求並處理響應,而不阻塞使用者。XMLHttpRequest對象用法
XMLHttpRequest對象有兩個重要方法 open與send
let request = new XMLHttpRequest() request.open(‘GET‘,‘/xxx‘) // 配置request request.send()
open方法:
URL是相對於當前頁面的路徑,也可以似乎用絕對路徑。open方法不會向伺服器發送真正請求,它相當於初始化請求並準備發送。只能向同一個域中使用相同協議和連接埠的URL發送請求,否則會因為安全原因報錯。
在發送同步請求的時候沒問題,只有得到響應後才會執行檢查status語句,但是在非同步請求時,JavaScript會繼續執行,不等產生響應就檢查狀態代碼,這樣我們不能保證檢查狀態代碼語句是在得到響應後執行,這時候我們可以檢查request對象的readyState屬性,該屬性工作表示請求/響應過程中的當前活動階段,每當readyState值改變的時候都會觸發一次onreadystatechange事件。
request.onreadystatechange = function(){ if(request.readyState===4){ if(request.status>=200 && request.status<300){ let string = request.responseText // 把符合 JSON 文法的字串轉換成 JS 對應的值 let object = window.JSON.parse(string) }else if(request.status >= 400){ console.log(‘說明請求失敗‘) } } }
CORS(跨源資源共用)
CORS(Cross-Origin Resource Sharing)允許瀏覽器向跨源(協議 + 網域名稱 + 連接埠)伺服器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
同源策略 : 只有協議+連接埠+網域名稱 一模一樣的才允許發AJAX請求。AJAX可以讀取響應內容。
突破同源策略 === 跨域
CORS將導致跨域訪問的請求分為三種:Simple Request(請求沒有包含任何自訂要求標頭),Preflighted Request(請求包含了任何自訂要求標頭)以及Requests with Credential(跨域請求包含了當前頁面的使用者憑證)。
//回應標頭用來記錄可以訪問該資源的域 ,它的值要麼是請求時Origin欄位的具體值,要麼是一個*,表示接受任意網域名稱的請求。 (‘Access-Control-Allow-Origin‘:,‘*‘)
原生 JS 寫出AJAX 請求
let request = new XMLHttpRequest() request.open(‘get‘,‘/xxx‘) request.send() request.onreadystatechange = function(){ if(request.readyState===4){ if(request.status>=200 && request.status<300){ let string = request.responseText let object = window.JSON.parse(string) }else if(request.status >= 400){ console.log(‘說明請求失敗‘) } } }
jQuery.ajax封裝代碼連結
window.jQuery = function(nodeOrSelector){ let nodes = {} nodes.addClass = function(){} nodes.html = function(){} return nodes }window.$ = window.jQuerywindow.jQuery.ajax = function({url,method,body,headers}){ return new Promise(function(resolve,reject){ let request = new XMLHttpRequest() request.open(method,url) for(let key in headers){ let value = headers[key] requeq.setRequestHeader(key,value) } request.onreadystatechange = ()=>{ if(request.readyState===4){ if(request.status >=200 && request.status <300){ resolve.call(undefined,request.responseText) }else if(request.status >= 400){ reject.call(undefined,request) } } } request.send(body) })}myButton.addEventListener(‘click‘,(e)=>{ window.jQuery.ajax({ url: ‘/xxx‘, method: ‘get‘, headers:{ ‘content-type‘:‘application/x-www-form-urlencoded‘, ‘frank‘: ‘18‘ }, }).then( (text)=>{console.log(text)}, (request)=>{console.log(request)}, ) })
Ajax 詳解及CORS