ajax技術介紹

想要了解什麼是ajax先從幾個問題開始： 1.ajax怎麼同時發送多個請求？

---

在ajax應用中，一般一個頁面要同時發送多個請求，若是隻有一個XMLHttpRequest 對象，前面的請求還未完成，後面的就會把前面的覆蓋掉，若是每次都建立一個新的 XMLHttpRequest對象，也會形成浪費。解決的辦法就是建立一個XMLHttpRequset的對象池，若是池裏有空閒的對象，則使用此對象，不然將建立一個新的對象。

---

2.手動編寫一個ajax，不依賴第三方庫？

<script>
    // 1. 建立 xhr 對象
   var xhr = new XMLHttpRequest();
    // 2.打開服務流
    // 參數一：請求的方式 get或者post
	// 參數二：請求的地址 若是是get請求，數據是會墜在url地址上發送過去
	// 參數三：是否異步 默認值是true （異步） false （同步）
    xhr.open('get', 'demo.php?username=feifei&age=18', true);
    // 3.因爲是get請求，因此不須要發送請求體數據，直接發送一個null
    xhr.send(null);
    // 4.服務器響應
    // 但凡是readyState狀態發生改變的時候，就觸發的事件
    // 若是當readyState狀態爲4的時候表明ajax已經回到了客戶端
    // xhr.status == 200 表明服務器響應成功 
    // 只有當這二者都知足的時候，表明將服務端的數據拿回到了客戶端
    // xhr.responseText裏面存放着服務器響應回來的數據
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
            var data = xhr.responseText;
            console.log(data);
        }
    } 
</script>
複製代碼

什麼是ajax?

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。

ajax的優缺點：

優勢：

1.局部刷新、

​ AJAX最大優勢就是能在不刷新整個頁面的前提下與服務器通訊維護數據。這使得Web應用程序更爲迅捷地響應用戶交互，並避免了在網絡上發送那些沒有改變的信息，減小用戶等待時間，帶來很是好的用戶體驗。

2.異步加載

​ AJAX使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力。優化了Browser和Server之間的溝通，減小沒必要要的數據傳輸、時間及下降網絡上數據流量。

3.前端和後端負載平衡

​ AJAX能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，AJAX的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔，提高站點性能。

4.基於標準被普遍支持

​ AJAX基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行。隨着Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。一樣，也出現了另外一種輔助程序設計的技術，爲那些不支持JavaScript的用戶提供替代功能。

界面與應用分離

​ Ajax使WEB中的界面與應用分離（也能夠說是數據與呈現分離），有利於分工合做、減小非技術人員對頁面的修改形成的WEB應用程序錯誤、提升效率、也更加適用於如今的發佈系統。

​

缺點：

ajax幹掉了back和history功能，即對瀏覽器機制的破壞

​ 在動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態，由於瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差異很是微妙；用戶一般會但願單擊後退按鈕可以取消他們的前一次操做，可是在Ajax應用程序中，這將沒法實現。

ajax的安全問題

​ AJAX技術給用戶帶來很好的用戶體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。

對搜索引擎支持較弱

​ 不利於SEO優化，對搜索引擎的支持比較弱。若是使用不當，AJAX會增大網絡數據的流量，從而下降整個系統的性能

破壞程序的異常處理機制

​ 難以調試 ###ajax的語法

分爲四個步驟(再也不兼容IE低版本)：

1.建立xhr對象

var xhr=new XMLHttpRequest();

2.打開服務流
2.1 get方式:
xhr.open("GET","ajax_info.txt?username='zhangsan&gender='男'",true);
2.2 post方式：
xhr.open("POST","ajax_info.txt?",true);

小結：
open()中三個參數：open(method,url,async)
規定請求的類型、URL 以及是否異步處理請求。
- method：請求的類型；GET 或 POST
- url：文件在服務器上的位置
- async：true（異步）或 false（同步）

get和post方式的差別：
get的參數直接墜在url中，post方式在send()中傳遞

3.向服務器發送請求
3.1 get方式
xhr.send();
3.2 post方式
xhr.send("username='zhangsan&gender='男'");

4.服務器響應
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        console.log(xhr.resposeText);
    }
}
複製代碼

• 參數介紹： 屬性 描述 onreadystatechange 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

readyState	
 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
 0: 請求未初始化
 1: 服務器鏈接已創建
 2: 請求已接收
 3: 請求處理中
 4: 請求已完成，且響應已就緒
 status	200: "OK"
 404: 未找到頁面
複製代碼