Ajax基礎

簡介

是什麼

Asynchronous JavaScript and XML——異步JavaScript和XML

AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。

特色

• 不是編程語言，而是一種使用現有標準的新方法
• 無需加載整個界面，可與服務器交換數據，更新部分網頁
• 不須要瀏覽器插件，但須要用戶容許js在瀏覽器上運行

提出背景

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

發起請求的方式通常是<input type="submit">

在上世紀90年代，幾乎全部的網站都由HTML頁面實現，服務器處理每個用戶請求都須要從新加載網頁。形式是怎樣的呢？就好比說你在瀏覽器上登陸本身的微博帳號，填完了表單，點擊登陸按鈕，一次"完整"的HTTP請求就此觸發，服務器發現你的登陸密碼不對頭，立馬把網頁原本來本的返回給你，在用戶看來呢，就是一次從新加載的過程！用戶體驗極差！並且這個作法浪費了許多帶寬，由於在先後兩個頁面中的大部分HTML碼每每是相同的。因爲每次應用的溝通都須要向服務器發送請求，應用的迴應時間依賴於服務器的迴應時間。這致使了用戶界面的迴應比本機應用慢得多。

工做原理

包含的技術

AJAX是基於現有的Internet標準，而且聯合使用它們：

• XMLHttpRequest 對象 (異步的與服務器交換數據)
• JavaScript/DOM (信息顯示/交互)
• CSS (給數據定義樣式)
• XML (做爲轉換數據的格式)

原理簡述

經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。

原理詳述

Ajax的工做原理至關於在用戶和服務器之間加了一箇中間層(ajax引擎),使用戶操做與服務器響應異步化。

並非全部的用戶請求都提交給服務器,像—些數據驗證(好比判斷用戶是否輸入了數據)和數據處理(好比判斷用戶輸入數據是不是數字)等都交給Ajax引擎本身來作, 只有肯定須要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求。把這些交給了Ajax引擎，用戶操做起來也就感受更加流暢了。

瀏覽器普通交互方式：

瀏覽器的Ajax的交互方式：

同步與異步

異步傳輸是面向字符的傳輸，它的單位是字符；

同步傳輸是面向比特的傳輸，它的單位是幀，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。

同步的話，必須這個操做完了纔會執行下一步，在等待期間瀏覽器會掛起不能執行任何接下來的js代碼；

異步則是【告訴】瀏覽器去作，【告訴】是一瞬間的事情，而後就繼續執行下一步了，等到結果返回來了，瀏覽器會通知js執行相應的回調。

優勢和缺點

優勢

1.無刷新更新數據。

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

2.異步與服務器通訊。

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

3.前端和後端負載平衡。

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

4.基於標準被普遍支持。

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

5.界面與應用分離。

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

缺點

1.AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。

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

2.AJAX的安全問題。

簡單版：ajax暴露了瀏覽器與服務器交互的細節。

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

3.對搜索引擎支持較弱。

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

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

至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程序的異常機制的。關於這個問題，曾在開發過程當中遇到過，可是查了一下網上幾乎沒有相關的介紹。後來作了一次試驗，分別採用Ajax和傳統的form提交的模式來刪除一條數據……給咱們的調試帶來了很大的困難。

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

例如，我給你一個URL地址，若是採用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不一樣的。這個和資源定位的初衷是相背離的。

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

一些手持設備（如手機、PDA等）如今還不能很好的支持Ajax，好比說咱們在手機的瀏覽器上打開採用Ajax技術的網站時，它目前是不支持的。

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

編寫複雜、容易出錯 ；冗餘代碼比較多（層層包含js文件是AJAX的通病，再加上以往的不少服務端代碼如今放到了客戶端）；破壞了Web的原有標準。

原生JS實現步驟

• 第一步，建立XMLHttpRequest對象（瀏覽器兼容性）
• 第二步，註冊回調函數
• 第三步，建立請求，指定請求類型、地址、異步/同步
• 第四步，發送請求
• 第五步，異步獲取響應數據
• 第六步，利用js與DOM進行頁面局部刷新

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
複製代碼

XHR對象（XMLHttpRequest）

是什麼

一個爲向服務器發送請求和解析服務器響應提供了流暢的接口。

屬性

onreadystatechange

一個JavaScript函數對象，當readyState屬性改變時會調用它。回調函數會在user interface線程中調用。

readyState

表示請求/響應過程的當前活動階段

• 0：未初始化。還沒有調用open()
• 1：啓動。已經調用open()，還沒有調用send()
• 2：發送。已經調用send()，還沒有接收到響應
• 3：接收。已經收到部分響應數據
• 4：完成。已經收到所有響應數據

status

響應的HTTP 狀態。

如 200 表示成功，而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會致使一個異常。

statusText

HTTP 狀態的說明。

當狀態爲 200 的時候它是 "OK"，當狀態爲 404 的時候它是 "Not Found"。和 status 屬性同樣，當 readyState 小於 3 的時候讀取這一屬性會致使一個異常。

responseText

做爲響應主體被返回的文本。

若是 readyState 小於 3，這個屬性就是一個空字符串。當 readyState 爲 3，這個屬性返回目前已經接收的響應部分。若是 readyState 爲 4，這個屬性保存了完整的響應體。

responseXML

若是響應的內容類型是"text/xml"或"application/xml"，這個屬性將保存着響應數據的XML DOM文檔。

方法

open()

做用：初始化請求

xhr.open(method,url,async,user,password)

method 請求方式，如get,post,put等等
url 請求路徑，能夠是相對路徑也能夠是絕對
async 是否異步請求 傳佈爾值，默認true
user 用戶名,可選參數,爲受權使用;默認參數爲空string.
password 密碼,可選參數,爲受權使用;默認參數爲空string.
複製代碼

send()

做用：發送請求

參數爲發送的請求體，不傳請求體的話最好傳個null

setRequestHeader()

做用：設置請求頭

參數兩個，第一個請求體名稱header，第二個要賦的值value

abort()

做用：取消當前響應，關閉鏈接而且結束任何未決的網絡活動。

這個方法把 XMLHttpRequest 對象重置爲 readyState 爲 0 的狀態，而且取消全部未決的網絡活動。例如，若是請求用了太長時間，並且響應再也不必要的時候，能夠調用這個方法。

getResponseHeader()

做用：返回指定響應頭的值

參數：響應頭的名稱

getAllResponseHeaders()

做用：返回全部頭部信息的字符串

json字符串與json對象的相互轉化

字符串轉對象

JSON.parse(str)

eval('('+str+')')

// eval函數用於將字符串中的JS代碼解析出來並執行！！     
   當使用eval函數解析JSON字符串時，須要在函數內部將JSON字符串用()拼接
   表示eval函數中的字符串不是用於執行，而是要進行字符串解析
複製代碼

對象轉字符串

JSON.stringify(obj)
複製代碼

JQuery的Ajax

$.ajax({
    //請求方式
    type : "POST",
    //請求的媒體類型
    contentType: "application/json;charset=UTF-8",
    //請求地址
    url : "http://127.0.0.1/admin/list/",
    //數據，json字符串
    data : JSON.stringify(list),
    //是否用jsonp跨域
    dataType: ''
    //請求成功
    success : function(result) {
        console.log(result);
    },
    //請求失敗，包含具體的錯誤信息
    error : function(e){
        console.log(e.status);
        console.log(e.responseText);
    }
});

複製代碼

跨域問題

解釋jsonp的原理，以及爲何不是真正的ajax

Jsonp並非一種數據格式，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是經過動態建立script標籤，而後經過標籤的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，爲了處理這些返回的數據，須要事先在頁面定義好回調函數，本質上使用的並非ajax技術

JSON

是什麼

JavaScript Object Notation——javascript對象表示法

一種數據格式

面試題

Ajax面試題