關於Javascript中ajax應用詳解

1:定義
AJAX全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是一種建立互動式網頁應用的網頁開發技術。
Ajax 不是一種單一的技術。實際上是幾種技術，每種技術都各有其特色，這些技術以全新強大方式融合在一起。Ajax 包含：

使用 XHTML 和 CSS 基於標準的呈現
使用文件物件模型的動態顯示和互動
使用 XML 和 XSLT 的資料交換和操作
使用 XMLHttpRequest 的非同步資料檢索
將它們綁定到一起的 JavaScript
雖然這個技術說明從某種程度上講有些過時了，但基本模式依然是完整的：HTML 和 CSS 呈現資料和樣式，DOM 和相關方法支援頁面即時更新，XHR 支援與伺服器通訊，JavaScript 安排整體顯示。

2.原理
Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。

以往我們瀏覽網頁的原理是由Client向Server提交頁面申請，再由Server將申請通過HTTP傳回給Client產生瀏覽頁面：

使用Ajax後的工作原理如下圖，可見通過Ajax在使用者互動方面有了很大改進，使用者可以不用為提交了Form而長時間等待伺服器應答，而且通過Ajax也可以開發出華麗的Web互動頁面。

要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。

3：XMLHttpRequest
XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。所以我們先從XMLHttpRequest講起，來看看它的工作原理。www.111cn.net

首先，我們先來看看XMLHttpRequest這個對象的屬性。

它的屬性有：

屬性  描述

onreadystatechange     每次狀態改變所觸發事件的事件處理常式。

responseText    從伺服器處理序返回資料的字串形式。

responseXML  從伺服器處理序返回的DOM相容的文檔資料對象。

status   從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）

status Text   伴隨狀態代碼的字串資訊

readyState  對象狀態值

對象狀態值：

readyState          含義

0 (未初始化)     對象已建立，但是尚未初始化（尚未調用open方法）；

1 (初始化)    對象已建立，尚未調用send方法；

2 (發送資料)   send方法已調用，但是當前的狀態及http頭未知；

3 (資料傳送中)  已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText擷取部分資料會出現錯誤；

4 (完成)   資料接收完畢，此時可以通過通過responseXml和responseText擷取完整的回應資料；

但是，由於各瀏覽器之間存在差異，所以建立一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest對象的方法。

代碼如下

複製代碼

function CreateXmlHttp() { //非IE瀏覽器建立XmlHttpRequest對象 if(window.XmlHttpRequest) { xmlhttp=new XmlHttpRequest(); } //IE瀏覽器建立XmlHttpRequest對象 if(window.ActiveXObject) { try { xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); } catch(e) { try{ xmlhttp=new ActiveXObject(“msxml2.XMLHTTP”); } catch(ex){} } } } function Ustbwuyi() { var data=document.getElementById(“username”).value; CreateXmlHttp(); if(!xmlhttp) { alert(“建立xmlhttp對象異常！”); return false; } xmlhttp.open(“POST”,url,false); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.getElementById(“user1″).innerHTML=”資料正在載入…”; if(xmlhttp.status==200) { document.write(xmlhttp.responseText); } } } xmlhttp.send(); }

如上所示，函數首先檢查XMLHttpRequest的整體狀態並且保證它已經完成（readyStatus=4），即資料已經發送完畢。然後根據伺服器的設定詢問請求狀態，如果一切已經就緒（status=200），那麼就執行下面需要的操作。

對於XmlHttpRequest的兩個方法，open和send，其中open方法指定了：

向伺服器提交資料的類型，即post還是get。
請求的url地址和傳遞的參數。
傳輸方式，false為同步，true為非同步。預設為true。如果是非同步通訊方式(true)，客戶機就不等待伺服器的響應；如果是同步方式(false)，客戶機就要等到伺服器返回訊息後才去執行其他動作。我們需要根據實際需要來指定同步方式，在某些頁面中，可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，而後一個是會覆蓋前一個的，這個時候當然要指定同步方式。
Send方法用來發送請求。

知道了XMLHttpRequest的工作流程，我們可以看出，XMLHttpRequest是完全用來向伺服器發出一個請求的，它的作用也局限於此，但它的作用是整個ajax實現的關鍵，因為ajax無非是兩個過程，發出請求和響應請求。並且它完全是一種用戶端的技術。而XMLHttpRequest正是處理了伺服器端和用戶端通訊的問題所以才會如此的重要。

現在，我們對ajax的原理大概可以有一個瞭解了。我們可以把伺服器端看成一個資料介面，它返回的是一個純文字流，當然，這個文字資料流可以是XML格式，可以是Html，可以是Javascript代碼，也可以只是一個字串。這時候，XMLHttpRequest向伺服器端請求這個頁面，伺服器端將文本的結果寫入頁面，這和普通的web開發流程是一樣的，不同的是，用戶端在非同步擷取這個結果後，不是直接顯示在頁面，而是先由javascript來處理，然後再顯示在頁面。至於現在流行的很多ajax控制項，比如magicajax等，可以返回DataSet等其它資料類型，只是將這個過程封裝了的結果，本質上他們並沒有什麼太大的區別。

4：優缺點
ajax的優點
Ajax的給我們帶來的好處大家基本上都深有體會，在這裡我只簡單的講幾點：

最大的一點是頁面無重新整理，在頁面內與伺服器通訊，給使用者的體驗非常好。
使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。
可以把以前一些伺服器負擔的工作轉嫁到用戶端，利用用戶端閑置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。
基於標準化的並被廣泛支援的技術，不需要下載外掛程式或者小程式。
ajax的缺點
下面我著重講一講ajax的缺陷，因為平時我們大多注意的都是ajax給我們所帶來的好處諸如使用者體驗的提升。而對ajax所帶來的缺陷有所忽視。

下面所闡述的ajax的缺陷都是它先天所產生的。

1.ajax幹掉了back按鈕

ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。後退按鈕是一個標準的web網站的重要功能，但是它沒法和js進行很好的合作。這是ajax所帶來的一個比較嚴重的問題，因為使用者往往是希望能夠通過後退來取消前一次操作的。那麼對於這個問題有沒有辦法？答案是肯定的，用過Gmail的知道，Gmail下面採用的ajax技術解決了這個問題，在Gmail下面是可以後退的，但是，它也並不能改變ajax的機制，它只是採用的一個比較笨但是有效辦法，即使用者單擊後退按鈕訪問記錄時，通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當使用者在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜尋，然後將搜尋結果反映到Ajax元素上，以便將應用程式狀態恢複到當時的狀態。） 但是，雖然說這個問題是可以解決的，但是它所帶來的開發成本是非常高的，和ajax架構所要求的快速開發是相背離的。這是ajax所帶來的一個非常嚴重的問題。

2安全問題

技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業資料建立了一個直接通道。這使得開發人員在不經意間會暴露比以前更多的資料和伺服器邏輯。ajax的邏輯可以對用戶端的安全掃描技術隱藏起來，允許駭客從遠端伺服器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點，諸如跨網站腳步攻擊、SQL注入攻擊和基於credentials的安全性漏洞等。

3.搜尋引擎的支援比較弱

4.破壞了程式的異常機制

至少從目前看來，像ajax.dll，ajaxpro.dll這些ajax架構是會破壞程式的異常機制的。關於這個問題，我曾經在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。後來我自己做了一次實驗，分別採用ajax和傳統的form提交的模式來刪除一條資料……給我們的調試帶來了很大的困難。

5.其他方面的一些問題

另外，像其他方面的一些問題，比如說違背了url和資源定位的初衷。例如，我給你一個url地址，如果採用了ajax技術，也許你在該url地址下面看到的和我在這個url地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。

6.一些手持功能（如手機、PDA等）現在還不能很好的支援ajax

一些手持功能（如手機、PDA等）現在還不能很好的支援ajax，比如說我們在手機的瀏覽器上開啟採用ajax技術的網站時，它目前是不支援的，當然，這個問題和我們沒太多關係。

5 .GET與POST
當我們不通過重新載入頁面，用Ajax訪問伺服器的時候，有兩個選擇可以將請求資訊傳送到伺服器上。這兩個選擇分別是GET和POST。

GET和POST有很多東西可寫，我這裡就只具體說ajax裡的兩者運用,具體的下次再來寫吧…

GET的目的就如同其名字一樣是用於擷取資訊的。它旨在顯示出頁面上你要閱讀的資訊。瀏覽器會緩衝GET請求的執行結果，如果同樣的GET請求再次發出，瀏覽器就會顯示緩衝的結果而不是重新運行整個請求。這一流程不同於瀏覽器的處理過程，但是它是有意設計成這樣以使GET調用更有效率。GET調用會檢索要顯示在頁面中的資料，資料不會在伺服器上被更改，因此重新請求相同資料的時候會得到相同的結果。

POST方法應該用於你需要補救伺服器資訊的地方。如某調用要更改儲存在伺服器上的資料，而從兩個同樣的POST調用返回的結果或許會完全不同，因為第二個POST調用的值與第一個的值不相同，這是由於第一個調用已經更新了其中一些值。POST調用通常會從伺服器上擷取響應而不是保持前一個響應的緩衝。

Get 與 Post 的區別
Ajax中我們經常用到get和post請求.那麼什麼時候用get請求,什麼時候用post方式請求呢? 在做回答前我們首先要瞭解get和post的區別。

get是把參數資料隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個欄位一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。使用者看不到這個過程。
對於get方式，伺服器端用Request.QueryString擷取變數的值，對於post方式，伺服器端用Request.Form擷取提交的資料。兩種方式的參數都可以用Request來獲得。
get傳送的資料量較小，不能大於2KB。post傳送的資料量較大，一般被預設為不受限制。但理論上，因伺服器的不同而異。
get安全性非常低，post安全性較高。
<form method=”get” action=”a.asp?b=b”>跟<form method=”get” action=”a.asp”>是一樣的，也就是說，method為get時action頁面後邊帶的參數列表會被忽視；而<form method=”post” action=”a.asp?b=b”>跟<form method=”post” action=”a.asp”>是不一樣的。
另外 Get請求有如下特性：它會將資料添加到URL中，通過這種方式傳遞到伺服器，通常利用一個問號？代表URL地址的結尾與資料參數的開端，後面的參數每一個資料參數以“名稱=值”的形式出現，參數與參數之間利用一個串連符&來區分。 Post請求有如下特性：資料是放在HTTP主體中的，其組織方式不只一種，有&串連方式，也有分割符方式，可隱藏參數，傳遞大批資料，比較方便。

通過以上的說明，現在我們大致瞭解了什麼時候用get什麼時候用post方式了吧，對!當我們在提交表單的時候我們通常用post方式，當我們要傳送一個較大的資料檔案時，需要用post。當傳遞的值只需用參數方式(這個值不大於2KB)的時候，用get方式即可。

6.跨域
ajax本身實際上是通過XMLHttpRequest對象來進行資料的互動，而瀏覽器出於安全考慮，不允許js代碼進行跨網域作業，所以就誕生了很多跨域的解決方案。當本域和子域間進行訪問時最簡單的就是設定document.domain，當不同域的訪問，大概有下列方法：

1.web端代理的方式，即使用者訪問A網站時所產生的對B網站的跨域訪問請求均提交到A網站的指定頁面，由該頁面代替使用者頁面完成互動，從而返回合適的結果。

2.iframe，解決方案就是用window.location對象的hash屬性，利用JS改變hash值網頁不會重新整理，可以這樣實現通過JS訪問hash值來做到通訊，大體就是AB網站各嵌入一個對方網站的iframe，然後通過連續不斷的監聽hash值的變化來進行通訊。比如A網站通過改變B網站iframe的hash後，B網站監聽到hash的變化後就進行處理，這種方式需要開發人員可以控制兩個網站的代碼。

3.通過script標籤來請求，原理就是在本域內的A內產生一個JS標籤，它的SRC指向請求的另外一個域的某個頁面B，這個src裡面通常會加一個A頁面定義好的回呼函數，B返回資料即可，可以直接返回調用這個回呼函數，這種跨域的通訊方式被稱為JSONP，此方案存在的缺陷是， script的src屬性完成該調用時採取的方式時get方式，如果請求時傳遞的字串過大時，可能會無法正常運行。

4.window.name，window.name是一種解決跨域資料轉送的新技術，通過在iframe中載入一個跨域的HTML檔案，並且在HTML檔案中設定window.name的值為需要傳給接受者的資料，接收者就可以取得到window.name的值並且返回，比較關鍵的是同源策略的影響對location的控制不受限制，所以需要載入一個代理的頁面來讓發送頁面讀取window.name.

5.使用flash，原理是JavaScript將資料提交給本域下的 Flash，通過 Flash 中轉去訪問其他域的介面，只需要其他域的根目錄下有一個crossdomain.xml檔案，檔案中設定允許所有網域名稱或允許本域訪問即可。

具體情況例子我會再開一篇文章詳細介紹跨域問題。

7.安全
由於 Ajax 被用於開發很多可在 Web 上看到的應用程式，因此它的流行使其成為攻擊者在 JavaScript 代碼中尋找漏洞的目標。

Ajax 存在的核心是可以用它來建立資料驅動網站。真正吸引攻擊者的不是可以將 Ajax 用作 Web 應用程式開發工具，而是資料，不管是金融資料、個人資料還是機密資料，都是珍貴的線上商品，Ajax 再次發現自己成為了網路犯罪的焦點。

a:
基於瀏覽器的攻擊
JavaScript 是 Ajax 的基礎，惡意代碼經常使用它。要讓一個基於瀏覽器的攻擊生效，惡意代碼必須能夠利用 Web 技術（在此是 JavaScript），使瀏覽器自己運行攻擊者希望啟動並執行代碼。www.111cn.net

舉一個簡單的例子，在發生一個基於瀏覽器的攻擊時，受害者會發現其首頁被篡改，或者當受害者在其瀏覽器地址欄中輸入一個 URL 時，會被重新導向到另一個網站。儘管這令人討厭且很麻煩，但這些都不是最壞的情形。

許多基於瀏覽器的攻擊被設計用來阻止受感染電腦發送通知或減少其他攻擊。通常，對受害者瀏覽器進行的攻擊會阻止他們訪問惡意軟體清除程式或使用 Web 訂閱檔案更新。其他威脅還包括瀏覽器代理和擊鍵記錄。

預防措施
保護自己不受基於瀏覽器的攻擊比較容易，只需禁用 Java™ 技術、JavaScript 和 Microsoft® ActiveX® 控制項即可。不過，這樣做通常會阻止運行許多 Web 應用程式。相反，您應該確保 作業系統、瀏覽器軟體和防毒軟體的及時更新。另外，還可以使用一個信譽良好的防火牆程式，並在下載檔案和訪問網站時小心謹慎。

b:
SQL 注入
SQL 注入如何成為了 Ajax 安全的一個威脅？畢竟 Ajax 中沒有 “S”。很簡單，SQL 注入之所以構成威脅是因為 Ajax 在用戶端運行。Web 應用程式伺服器端仍然需要 SQL 資料庫。

當攻擊者在網站開發不完善的地區（比如一個表單）輸入惡意代碼時，就會發生 SQL 注入。如果受攻擊網站比較脆弱，那麼該資料庫的所有內容都可能會曝光。密碼資料庫曝光或者從線上支付系統盜取信用卡資料使用的就是這種攻擊方法。最近，入侵者利用這種方法從明星網站竊取粉絲郵箱地址。儘管沒有盜竊財物，但是濫發垃圾郵件者利用了這些郵箱地址，借用明星產品為幌子來傳播惡意軟體。

與其他 Web 技術一樣,應減輕使用 Ajax 開發的應用程式中的 SQL 注入。不過，僅使用基於 JavaScript 的 sanitation 技術尚不足以防止這類利用。JavaScript 是在用戶端運行而不是在伺服器端運行，這才是發生 SQL 注入的主要原因。

預防措施
在使用 Ajax 時，要保護您的資料庫，則必須驗證使用者輸入，而且該驗證是在伺服器 端進行的。參數化語句或者預先處理語句，這些都是為了阻止 SQL 注入，因為不能將值直接輸入資料庫或者 SQL 陳述式中。相反，在使用預留位置（也稱為綁定變數）時，預留位置的值是通過一個單獨的 API 呼叫提供的。

c:
跨網站指令碼
XSS 是注入攻擊的另一個樣本，惡意代碼被注入到應用程式。易受 XSS 攻擊的 Web 應用程式包括基於瀏覽器的指令碼，就像那些常見的 Ajax 攻擊一樣。通常，攻擊者利用這類弱點將惡意指令碼傳遞給對該網站毫無戒心的訪問者。這些指令碼負責盜用身份，竊取 Cookie，暗中監視訪客的 Web 使用，訪問機密資訊，甚至阻止服務攻擊。

2010 年成為新聞焦點的著名的 XSS 攻擊涉及到社會資訊網路。這次攻擊是從一個名為 @Matsta 的使用者開始的，造成當瀏覽者滑鼠滑過惡意訊息時，出現 JavaScript 快顯視窗。其他 XSS 對該網站的攻擊導致使用者被重新導向到一個調查網站或者內容不健康的網站。

預防措施
在使用 Ajax 進行開發時，可以採用以下步驟防止出現 XSS 漏洞

確保 JavaScript 變數被引用。
使用 JavaScript 十六進位編碼。
使用 JavaScript Unicode 編碼。
避免反斜線編碼（"、' 或 \）。
使用 JSON.parse 或 json2.js 庫來分析 JSON。
避免使用 eval() 方法分析 JSON，它執行任何包含 JSON 的指令碼。
d:

Ajax 橋接
Ajax 應用程式被構建用來串連託管它們的網站。作為一項安全措施，來自網站 A 的應用程式不能串連到網站 B。然而，許多網站依靠第三方網站和資料來源來建立混搭網站。人們建立了 Ajax 橋接服務，通過一個主機提供 Web 服務，該服務將充當代理，用來在該瀏覽器上啟動並執行 JavaScript 和第三方網站之間轉寄資料。使用 Ajax 橋接，現在網站 A 可以向來自網站 B 的訪客提供資料或內容。

正如 Ajax 不是一項特定技術而是一個技術集合，橋接也不是一個特定漏洞。Ajax 橋接為惡意駭客提供了額外攻擊媒介，增加了威脅。諸如 XSS 和 SQL 注入等攻擊可以通過 Ajax 橋接服務傳遞。儘管網站 B 可能用盡一切辦法保護其 Web 應用程式免受訪客帶來的相應威脅，但是網站 A 可以使用 Ajax 橋接攻擊網站 B，這常常被忽視。

預防措施
要避免橋接漏洞，則需要在使用橋接來訪問時與第三方的網站之間建立信任。您也應該審核第三方網站以何種方式訪問您的網站，並掃描可能被橋接利用的任何漏洞。

 好吧，以上基本是我覺得ajax有關的技術和一些東西，內容不全，每個點都值得我們去深入學習..