什么是AJax?
Ajax全稱為Asychronous JavaScript and XML，即異步的JavaScript和XML，它不是新的編程語言，而是一種使用現有標准的新方法，它可以在不重新加載整個網頁的情況下與服務器交換數據並更新部分網頁的數據。
Ajax的應用
下面以飛常准大數據網頁為例（https://data.variflight.com/analytics/CodeQuery），在瀏覽器中打開鏈接，在輸入框輸入"PEK"然后單擊【搜索】按鈕，如下圖所示：
得到查詢結果后仔細觀察查詢前后的頁面，特別是URL地址欄，可以發現查詢前和查詢后的URL沒有任何變化，但下面的列表中數據卻不一樣了，這其實就是AJax的效果——在部署按下全部頁面的情況下，通過Ajax異步加載數據，實現數據局部更新。
Ajax的基本原理
初步鏈接Ajax之后，下面來詳細了解它的基本原理。發送Ajax請求到網頁更新的過程可以簡單地分為以下3步驟：
- 發送請求。
- 解析返回數據。
- 渲染網頁。
依據步驟，可以知道Ajax的過程如下：
1. 發送請求
我們知道JavaScript可以實現頁面的各種交互功能。Ajax也不例外，它的底層也是JavaScript實現的。要使用Ajax技術，需要先創建XMLHttpRequest對象，缺少它就不能實現異步傳輸。所以，要執行Ajax時，需要執行以下代碼。
// JavaScript- 執行AJax代碼 var xmlhttp; if(window.XMLHttpRequest){ // IE7+ , Firefox、Chrome、Opera、Safari瀏覽器執行代碼 xmlhttp = new XMLHttpRequest(); }else{ // IE6、IE5瀏覽器執行代碼 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } xmlhttp.open("GET","/try/demo_get2.php?fname-Hennry&lname=Ford" , true); xmlhttp.send(); xmlhttp.open("POST","/try/demo_get2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlen coded"); xmlhttp.send();
在網頁中為某些事件的響應綁定異步操作：通過場景xmlhttp對象傳輸請求、攜帶數據。在發出請求前要定義請求對象的method、要提交給服務器中哪個文件情形請求的處理、要攜帶哪些數據，以及判斷是否為異步。
其中，與普通的Request提交數據一樣，這里也分為兩種形式——GET和POST，在實際中可以根據需求自主選擇。GET和POST都是向服務器提交數據，並且都會從服務器獲取數據。它們之間區別如下：
- 傳送方式：GET通過地址欄傳輸，POST通過報文傳輸。
- 傳送長度：GET參數有長度限制（受限於URL長度），而POST無限制。
- 傳輸有效性：GET優於POST。
對於GET方式的請求，瀏覽器會把HTTP header和data一並發送出去，服務器響應200（返回數據）；而對於POST,瀏覽器先發送header,服務器響應100 continue,瀏覽器再發送data,服務器響應200 OK（返回數據）。也就是說GET只需要一個步驟，而POST需要兩個步驟——這就是為什么GET比POST更有效的原因。
2. 解析請求
服務器在收到請求后，就會把附帶的參數作為輸入傳給處理請求文件，然后該文件根據傳入的數據作出處理，最終范湖結果，並通過Response對象發回去。客戶端根據xmlhttp對象來獲取Response的內容，返回的response可能是HTML也可能是JSON，接下來只需要在方法中用JavaScript做進一步的處理即可。
例如，這里使用谷歌瀏覽器打開飛常准大數據（https://data.variflight.com/analytics/CodeQuery），按【F12】打開調試模式。然后在頁面的搜索框輸入“PEK”,並單擊【查詢】按鈕。在調試面板切換到【Network】選項卡，找到名稱為“airportCode”的請求並單擊即可查看Ajax發起請求或返回的JSON數據。
3. 渲染網頁
JavaScript有改變網頁內容的能力，所以通過Ajax請求獲取返回數據后，通過解析就可以調用JavaScript獲取指定的網頁DOM對象進行更新、修改等數據處理了。例如，通過 document.getElementById().innerHTML 操作，便可以對某個元素內的元素進行修改，這樣網頁顯示的內容就改變了，這樣的操作也被稱為DOM操作——即對Document網頁文檔進行操作，如修改、刪除等。
Ajax方法分析
這里再次以飛常准大數據（https://data.variflight.com/analytics/CodeQuery）網頁為例，闡述應該去哪里查看AJax請求。
這里就需要借助瀏覽器的開發者工具，下面以Chrome瀏覽器為例：
步驟1：用Chrome打開網址https://data.variflight.com/analytics/CodeQuery。
步驟2：按下【F12】鍵，此時會彈出開發者工具。
步驟3：切換到【Network】選項卡，重新刷新當前頁面，可以發現這里出現了非常多的條目。其實這些條目就是頁面在加載過程中瀏覽器與服務器之間發送請求和接受響應的所有記錄，如圖1所示。
圖1
Ajax有其特殊的請求類型，它叫做xhr——即Type為xhr。單擊這個請求就可以看到它的詳細信息。
圖2
步驟4：單擊【airportCode】請求，會看到右側它的一些詳細信息，如圖3所示。
圖3
在進行請求分析時，若發現條目太多，不方便直接找出xhr方法時，可以單擊【Type】選項快速地對請求進行篩選分類，這是再按分類去查找xhr就快多了。