BK0106XX 邵O遠
巨匠電腦信義分校/Java認證
前言
如果說現在專業的網頁程式工程師的履歷上一定會有的一個技術，就是Ajax。我們就來簡單的談談什麼是Ajax，並使用jQuery程式庫來實作一些簡單的範例。
什麼是Ajax？
Ajax本身是Asynchronous Javascript and XML的縮寫，字面上意思就是使用JavaScript與XML和伺服器做非同步溝通的技術。為什麼Ajax會變得如此的重要？因為傳統的網頁程式要和伺服器溝通時，不論是一個多麼小的溝通都一定要透過整頁更新才能做到。因為時代和技術的更新，現在如果使用Ajax，網頁就可以在背景使用一個Javascript的XMLHttpRequest功能跟伺服器溝通，避免使用者因為整頁更新下載多餘沒有更新的東西。雖然最初這個名稱是因為溝通使用XML格式，但後來比較常見的是使用JSON格式，現在演變成不管用什麼格式都統稱Ajax。
Ajax的優缺點
Ajax主要的優勢是在於跟伺服器互動多的網頁，比如說應用程式型的網頁。一般來說一個應用程式只會在幾主要畫面的框架之間變換，如果使用ajax在背景跟伺服器溝通，就可以避免使用者持續的透過網路下載像是框架本身這種不會變動更新的資料，甚至只是送資料給伺服器而畫面本身完全沒有改變這種情況時，可以大幅加快使用者使用網頁程式時候的回應速度，減少使用者的等待和離開程式的感覺。
然而Ajax最主要的缺點是程式開發的時候會有很多細節要注意，不過要開發一個速度很快且使用者經驗很好的網頁程式本來就不是一件容易的事。還好這個技術已經開發了很久，有很多很好的程式庫已經幫我們解決很多的問題了。最主要需要注意的事項有：
．因為畫面沒有隨使用的狀態持續更新，所以URL也不會跟著狀態改變，所以會產生按上一頁並不會回到上一個畫面的問題，想把畫面記錄到書籤的時候也會有困難，搜尋引擎在讀取網站的時候也會有困難。利用網址#後面的改變不會讓畫面更新的特性就可以解決這個問題。
．不同的瀏覽器對XMLHttpRequest的實作是不一樣，就連不同版本可能也會有差甚至不支援。也有可能需要注意不同的裝置像是手機或是電子閱讀器支援的程度，因此雖然使用開發程式庫能幫助不少也還是需要注意這個問題，像是設計另一個無ajax的畫面在不支援的時候顯示。
．非同步溝通會讓除錯難度變高，也會產生一些資料安全的問題。雖然Ajax會被限制在同一個網域來提高安全性，但在程式開發的時候難度也會相對的提高。
實作
jQuery是一套開發Ajax的JavaScript程式庫，目前非常常見也非常受歡迎，除了支援跨瀏覽器，也提供了很多幫助開發網頁程式的功能。我們就用它來實作一個小小的範例。
檔案一：ajax.html(以下附上程式碼)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function loadText() {
$.get("text.txt",function(data,status){
$("#div1").html(data);
});
}
</script>
</head>
<body>
<div id="div1">Something is going to happen here!</div>
<div id="div2">Nothing will happen here.</div>
<a href="#" onclick="loadText()">Click Me!!</a><br />
</body>
</html>
檔案二：text.txt
Something just happened!
範例討論
做為一個Ajax的入門範例，我們只需專注在一個畫面和一個動作。
檔案一的第4行就是使用jQuery的意思。這裡我們用的是Google的開放資源，能夠加快速度。
6-10行是我們定義的一個函式，是把text.txt的內容放進div1這個地方。因為在這裡我們不需要去探討伺服器端的技術所以我們只用一個簡單的文字檔來代替，就是檔案二，之後我們可以用更複雜的url來完成更複雜的動作，或取得更複雜的資料。
第16行我們做了一個按鈕，按下就會呼叫我們剛才6-10寫的函式並執行。
這個範例雖然很短，但我們可以看到除了div1之外的東西都不需要改變，所以沒有在按按鈕之後重複的下載，如果畫面更複雜的話這表示我們省掉了很多的頻寬，也就是增加了很多速度。在這裡我們只有把收到的資料直接放進div1，我們只要更改loadText()函式就可以把收到的資料拿來做更多的用途。
結語
Ajax本身只是一個概念，一個讓使用者得到更好的使用經驗的方法。如果用在不對的地方，不只會讓開發者工作加重也會讓使用者使用上產生問題。多利用一些像jQuery這種已經開發得很成熟的程式庫，可以讓開發容易很多，也可減少問題的產生，讓程式開發的焦點放在網頁程式的本身。
在巨匠電腦上課時，每人都有一台自己的電腦，上課時可以自由運用電腦，無論是查詢或搭配實做，在學習上都有很大的助益。
留言列表
大匠巨作 (2)
