Ajax工做原理及優缺點

1. Ajax是什麼？

全稱是 asynchronous javascript and xml，是已有技術的組合，主要用來實現客戶端與服務器端的異步通訊效果（無需從新加載整個網頁的狀況下），實現頁面的局部刷新。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新，用於建立快速動態網頁。

早期的瀏覽器並不能原生支持 ajax，可使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對 ajax 的原生支持。

2. Ajax的工做原理

使用 Ajax 原生方式發送請求主要經過 XMLHttpRequest(IE7+、Firefox、Chrome、Safari 以及Opera) 、ActiveXObject(IE5 和 IE6)對象實現異步通訊效果。

• 建立XMLHttpRequest對象：

var xhr;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xhr=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行代碼
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

• 向服務器發送請求：使用 XMLHttpRequest 對象的 open() 和 send() 方法

//經過 GET 方法發送信息，請向 URL 添加信息
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send();

//像 HTML 表單那樣 POST 數據，使用 setRequestHeader() 來添加 HTTP 頭
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

//當使用 async=true 時，需規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();

//當您使用 async=false 時,把代碼放到 send() 語句後面便可,不推薦使用
xhr.open("GET","/try/ajax/ajax_info.txt",false);
xhr.send();
document.getElementById("myDiv").innerHTML=xhr.responseText;

使用GET仍是POST？

與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

然而，在如下狀況中，請使用 POST 請求：

• • 沒法使用緩存文件（更新服務器上的文件或數據庫）
  • 向服務器發送大量數據（POST 沒有數據量限制）
  • 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

//來自服務器的響應並不是 XML，使用 responseText 屬性,返回字符串形式的響應
document.getElementById("myDiv").innerHTML=xhr.responseText;

//來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，使用 responseXML 屬性,請求 cd_catalog.xml 文件，並解析響應
xmlDoc=xhr.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

• onreadystatechange事件：當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

//當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}
//若是存在多個 AJAX 任務，那麼應該爲建立 XMLHttpRequest 對象編寫一個標準的函數，併爲每一個 AJAX 任務調用該函數。該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）
function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

xhr.readyState的值及解釋：

0：請求未初始化（尚未調用 open()）。

1：請求已經創建，可是尚未發送（尚未調用 send()）。

2：請求已發送，正在處理中（一般如今能夠從響應中獲取內容頭）。

3：請求在處理中；一般響應中已有部分數據可用了，可是服務器尚未完成響應的生成。

4：響應已完成；您能夠獲取並使用服務器的響應了。

xhr.status的值及解釋：

100——客戶必須繼續發出請求

101——客戶要求服務器根據請求轉換HTTP協議版本

200——交易成功

201——提示知道新文件的URL

202——接受和處理、但處理未完成

203——返回信息不肯定或不完整

204——請求收到，但返回信息爲空

205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件

206——服務器已經完成了部分用戶的GET請求

300——請求的資源可在多處獲得

301——刪除請求數據

302——在其餘地址發現了請求數據

303——建議客戶訪問其餘URL或訪問方式

304——客戶端已經執行了GET，但文件未變化

305——請求的資源必須從服務器指定的地址獲得

306——前一版本HTTP中使用的代碼，現行版本中再也不使用

307——申明請求的資源臨時性刪除

400——錯誤請求，如語法錯誤

401——請求受權失敗

402——保留有效ChargeTo頭響應

403——請求不容許

404——沒有發現文件、查詢或URl

405——用戶在Request-Line字段定義的方法不容許

406——根據用戶發送的Accept拖，請求資源不可訪問

407——相似401，用戶必須首先在代理服務器上獲得受權

408——客戶端沒有在用戶指定的餓時間內完成請求

409——對當前資源狀態，請求不能完成

410——服務器上再也不有此資源且無進一步的參考地址

411——服務器拒絕用戶定義的Content-Length屬性請求

412——一個或多個請求頭字段在當前請求中錯誤

413——請求的資源大於服務器容許的大小

414——請求的資源URL長於服務器容許的長度

415——請求資源不支持請求項目格式

416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段

417——服務器不知足請求Expect頭字段指定的指望值，若是是代理服務器，多是下一級服務器不能知足請求

500——服務器產生內部錯誤

501——服務器不支持請求的函數

502——服務器暫時不可用，有時是爲了防止發生系統過載

503——服務器過載或暫停維修

504——關口過載，服務器使用另外一個關口或服務來響應用戶，等待時間設定值較長

505——服務器不支持或拒絕支請求頭中指定的HTTP版本

1xx:信息響應類，表示接收到請求而且繼續處理

2xx:處理成功響應類，表示動做被成功接收、理解和接受

3xx:重定向響應類，爲了完成指定的動做，必須接受進一步處理

4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行

5xx:服務端錯誤，服務器不能正確執行一個正確的請求

3. Ajax的優缺點

優勢： 1.無刷新更新數據：在不刷新整個頁面的狀況下維持與服務器通訊

 2.異步與服務器通訊：使用異步的方式與服務器通訊，不打斷用戶的操做

　　         3.前端與後端負載均衡：將一些後端的工做移到前端，減小服務器與帶寬的負擔

 4.基於規範被普遍支持：不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行。

　　         5.界面與應用分離：Ajax使得界面與應用分離，也就是數據與呈現分離

缺點： 1.Ajax不支持Back與History功能，即對瀏覽器機制的破壞：在動態更新頁面的狀況下，用戶沒法回到前一頁的頁面狀態，由於瀏覽器僅能記憶歷史紀錄中的靜態頁面

    2.安全問題：AJAX技術給用戶帶來很好的用戶體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。ajax的邏輯能夠對客戶端的安全掃描技術隱藏起來，容許黑客從遠端服務器上創建新的攻擊。還有ajax也難以免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。 

　　　　　　　  3.對搜索引擎支持較弱：若是使用不當，AJAX會增大網絡數據的流量，從而下降整個系統的性能。解決的辦法：能夠先用服務器渲染。

                           4.破壞程序的異常處理機制

　　　　　　　  5.違背URL與資源定位的初衷

　　　　　　　  6.不能很好地支持移動設備

　　　　　　　  7.客戶端肥大，太多客戶段代碼形成開發上的成本

4.應用場景

1.動態加載數據，按需取得數據。【樹形菜單、聯動菜單.../省市聯動】

2.改善用戶體驗。【輸入內容前提示、帶進度條文件上傳...】

3.電子商務應用。【購物車、郵件訂閱...】

4.訪問第三方服務。【訪問搜索服務、rss閱讀器】

5.數據的佈局刷新

不適用於搜索 ，基本的導航，替換大量的文本，部分簡單的表單

參考網站：https://www.runoob.com/ajax/ajax-tutorial.html