ajax是如何運作的？ ajax的工作原理介紹及其優缺點分析

本篇文章主要的介紹了關於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請求

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) }
}

AJAX的優點：  1.最大的優點就是頁面無需刷新，在頁面內與伺服器通信，非常好的使用者體驗。
 2.使用非同步的方式與伺服器通信，不需要中斷作業。
 3.可以把以前伺服器負擔的工作轉嫁給客戶端，減輕伺服器和頻寬，可以最大程度減少冗餘請求。

AJAX的缺點：

1.AJAX幹掉了Back和History功能，也就是對瀏覽器機制的破壞。 ###在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，因為瀏覽器只能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；用戶通常會希望單擊後退按鈕能夠取消他們的前一次操作，但是在Ajax應用程式中，這將無法實現。 ###2.安全問題技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業資料建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。 ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，讓駭客可以從遠端伺服器建立新的攻擊。還有ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。 ###3.搜尋引擎的支援比較弱。如果使用不當，AJAX會增加網路資料的流量，進而降低整個系統的效能。 ###4.、一些手持設備（如手機、PDA等）現在還不能很好的支援ajax，比如說我們在手機的瀏覽器上打開採用ajax技術的網站時，它目前是不支持的，當然，這個問題跟我們沒太多關係。 (這時候我們可以用其他的插件來代替)###

這篇文章到這就結束了（想看更多就到PHP中文網AJAX使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是ajax是如何運作的？ ajax的工作原理介紹及其優缺點分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！