本篇文章主要的介紹了關於ajax的定義和ajax工作時的原理。最後還有關於ajax的優缺點介紹。下面就讓我們一起進入這篇文章吧
1.概念:什麼是AJAX
AJAX全稱為「Asynchronous JavaScript and XML」(異步JavaScript和XML),是一種創建互動式網頁應用的網頁開發技術。
2.為什麼要使用他?
最大的優點:不刷新整個頁面的情況下與伺服器通訊保持原有頁面狀態,通俗點,瀏覽網頁的時候回有兩種情況,點擊,1,白屏,等待跳到另一個頁。 2.頁面不刷新,局部出現新內容獲得更好的使用者體驗。
3.基本原理
先看圖
XHR相當於是個通訊兵,來負責客戶端與伺服器之間的通訊傳輸。要打仗了,前方陣地不可能只等著通信兵傳遞訊息其他什麼也不幹吧,所以前方陣地還在幹著自己的事情派通信兵去請求後方指揮的命令(伺服器),指揮下達命令指揮,通信兵再吧命令傳到前方陣地(客戶端),然後客戶端吧資料渲染到頁面。
3.那什麼是XHR? (AJAX工作原理)
他的全名是XMLHttpRequest,AJAX就是透過瀏覽器的內建物件XHMHttpResquest來傳送非同步請求的,非同步請求不會妨礙前方陣地(客戶端)的任何操作。
4.了解異步和同步
剛才說了異步,那什麼是同步,同步就是前方陣地和通信兵一起去像伺服器請求數據,直到通信兵請求到數據我才開始渲染頁面,在請求的過程中一直是白屏等待的。
5.XMLHttpResquest物件的屬性有哪些?
AJAX既然是透過瀏覽器的內建物件XMLHttpRequest來處理非同步請求的那我們先來了解下他又哪些屬性
屬性 觸發這個事件處理器,通常會呼叫一個javaScript函數
2. readyState 請求的狀態:
0>.請求未初始化
1>.伺服器連結已建立
2>.請求已接收
3>.請求處理中
4>.請求已完成,回應已就緒
3.responseText 回傳請求資料文字
4.responseXML 傳回XML文件物件
5.status 傳回狀態碼如404 200
6.建立XMLHttpRequest物件並傳送AJAX請求
6.建立XMLHttpRequest物件並傳送AJAX請求
為了因應所有的現代瀏覽器,偵測是否支援XMLHttpRequest物件(想看更多就到PHP中文網AJAX開發手冊
欄位中學習)
window.onload = function(){ //1.创建XMLHttpRequest对象考虑兼容性 var xhr = null if(window.XMLHttpRequest){ //现代浏览器 xhr = new XMLHttpRequest() }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP')//IE5/6 } } console.log('状态A'+xhr.readyState) //2.设置请求方式。第一种方式get请求(2)post请求 var url = '数据' //get请求,true异步请求,false,同步 xhr.open('get', url, true) console.log('状态B'+xhr.readyState) /*(2)post请求 必须添加请求头 var url = '数据' xhr.open('post', url, true) xhr.setRequestHander('Content-type','application/x-www-form-urlencoded') *///3.发送请求 xhr.send() console.log('状态C'+xhr.readyState)//4.回调函数 xhr.onreadyStatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.resposeText) //字符串 //console.log(xhr.resposeXML) } }
這篇文章到這就結束了(想看更多就到PHP中文網AJAX使用手冊欄位中學習),有問題的可以在下方留言提問。
以上是ajax是如何運作的? ajax的工作原理介紹及其優缺點分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!