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來處理非同步請求的那我們先來瞭解下他又哪些屬性
屬性 描述
1. onreadyStatechange 狀態改變的事件觸發程序每個狀態改變時都會觸發 這個事件處理器，通常會調用一個javaScript函數
2. readyState 請求的狀態：
0>.請求未初始化
1>.伺服器連結已建立
2>.請求已接收
3>.請求處理中
4>.請求已完成，響應已就緒
3.responseText 返回請求資料文本
4.responseXML 返回XML文檔對象
5.status 返回狀態代碼 如404 200

6.建立XMLHttpRequest對象並發送AJAX請求
為了應對所有的現代瀏覽器，檢測是否支援XMLHttpRequest對象（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）

 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技術的網站時，它目前是不支援的，當然，這個問題和我們沒太多關係。(這個時候我們可以用其他的外掛程式來代替)

本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。