宅學習 - Social Learning Space 社交學習空間@FJU CSIE

AJAX( Asynchronous JavaScript And XML )

AJAX這項技術的出現，讓網頁設計又更上一層樓
因為AJAX讓網頁變得更有效率的存取資訊，且更節省頻寬的利用
原本的網頁存取都是要更新整個網頁來得到資訊
但AJAX提供了部分動態資訊的更新
就是可以把不需要更新的部分留著，頻寬都只花在更新需要的部分。

AJAX主要由三大技術組成:

1.XHTML（或者 HTML）加上 CSS 來作為資料的呈現。
2.利用 DOM 以及 Javascript 來進行存取資料（大多為 XML）的處理。
3.利用 XMLHttpRequest 物件與遠端的 web server 進行非同步的資料交換。

應用實例:

1.輸入驗證
2.動態清單
3.自動表單填寫
4.網頁聊天室
5.進度列
6.提示文字
7.自動完成

簡單的實作:  http://www.csie.fju.edu.tw/~ie955253/ex.html

選擇東區/西區 下面會對應到不同的動態資訊

參考資料:http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ajax.shtml

利用Google AJAX APIs 其中的Multimedia Search收尋Image

Google Search包含Web,Video,News,Book,Patent(專利),local(當地)

google.search.ImageSearch():

參數:safe,imgsz,imgc,imgtype,as_filetype,as_sitesearch

safe:(1)strict:text and image (2)moderate:image (3)off:nothing

imgsz:(1)small:icons (2)medium:2.5k - 16k pixels (3)large:16k - 480k (4)extra_large:480k and up

imgc:(1)black_and_white:限制只有黑白的image (2)grayscale:限制只有揮度 (3)color:限制只有彩色

filetype:(1)filetype_jpg:限制只有jpg檔案 (2)filetype_png (3)filetype_gif (4)filetype_bmp

imagetype:(1)faces:限制只有臉部特寫的image (2)news:限制只有新聞的image (3)photo:限制只有網路照片

sitesearch:僅收尋某個網址的照片或圖片

google.search.SearchControl()實做google.search.Search這個虛擬介面(interface),對於使用者而言SearchControl()是一個包裝好的介面(container)

相信不少人有用過AJAX，這個技術在網頁製作方面提供不少方便的功能。

全名：Asynchronous JavaScript And XML

它最大的特點是非同步傳送資料及更新頁面，讓使用者在執行功能後 不需要重新載入整個頁面，提升瀏覽的流暢度。

從名字上可看出AJAX不是一個獨立的新語言，算是Javascript的延伸，一種撰寫的技巧。

語法方面，它主要是先建立一個XMLHttpRequst然後經由GET或POST的方式將資料傳到別的頁面，別的頁面處理完以後再將結果送回來

不過在實作的時候，如果像這樣慢慢建立起來，得花上不少時間。網路上有些地方有提供Open source的AJAX工具

像是DOJO Toolkit 還有Yahoo! User Interface Library等等可以參考

http://dojotoolkit.org/

http://developer.yahoo.com/yui/

像我們期末專題使用的AJAX部分，即是使用Prototype.js裡的函式 來達到非同步更新的效果。

資料來源 取自 http://www.prototypejs.org/

裡面提供了Javascript Framework 供設計者使用，檔案裡面有不少函式可以套用，如果不清楚如何使用的話，網路上有不少教學網站或文章，可以好好利用。

AJAX固然好用，可是使用AJAX也有些心的問題產生，如同老師說過  "上一頁"跟"下一頁"的定義會變得模糊不清，有時候點錯東西，按"上一頁"按鈕 會有無效的情況。

另外就是..AJAX主要是在Client端上執行，安全性也是一個大問題(其實不只在AJAX或Javascript，整個網際網路，安全問題一向是大宗)。AJAX提供了Client與Server之間互動的新模型，也意味著新模型挑戰傳統的安全方法，無論在設計或使用方面的確值得去考慮這項問題。

相信大家上了課都知道，Java Script 雖然方便，但也是隱藏了很大的危險性。
像是 XSS 這種攻擊，隨時可能在身邊發生，讓我們防不勝防。
這時候就可以使用一些第三方的外掛程式來禁止 Java Script 的使用，或是乾脆關掉瀏覽器的 Java Script。
偏偏這個年頭 Java Script 又十分的重要，AJAX 也是建立在其之上，如果關掉了，很多服務幾乎都是半殘了。

我自己比較喜歡用的瀏覽器 Firefox 中，有一款叫做 NoScript 的 Add-on ，還蠻好用的。
我也是看到蠻多人在推薦才去試看看的，之前使用的 Add-on 對於 Java Script 只有開啟和關閉兩種功能而已。
但是 NoScript 有豐富的設定可以使用！像是可以設定白名單，讓某些常用的、確定安全的服務使用 Java Sciprt。
甚至還可以設定 Untrust 的清單，如果之後有遇到同樣的 Script 時，就會自動排除掉。
其實對於一般使用者而言最重要的是，他不用多設定什麼，一開始就把大部分的 Java Script 都禁用了，
但是使用者卻可以很輕易的透過一個鍵就暫時允許正在使用的網域中使用 Java Script ，這樣才不會造成使用上的困擾。

我覺得很多安全性相關的軟體，要注重的不只是本身功能有多強而已！
因為再強的功能，如果不能符合人性，不能迎合使用者的方法造成使用者不便的話
大多數的人可能選擇一時的方便而自己捨棄了軟體的安全性！

所以很推薦大家使用 Firefox + NoScript 。
用了他之後上網的時候就會放心多了吧！
不過要注意的就是使用的初期可能會忘記自己用了這個 Add-on
會以為很多服務怎麼怪怪的，都沒有反應之類的，這時候按下暫時允許的鈕，就會回覆了
而大家常用比較有名的服務就可以加到白名單當中，下次再用的話就沒有這種困擾了。
如果赤裸裸的用瀏覽器在各種論壇中闖來闖去，真的是險象還生
只能說人心險惡，就是有很多人為了不同的目的想辦法鑽著漏洞
為了自保，該有的基本防範還是要有嘍！

Ajax 全名為 Asynchronous JavaScript And XML
        意思為 非同步JavaScript和XML
        是一種創建互動式網頁應用的網頁開發技術

四大組成
        JavaScript
        CSS (Cascading Style Sheets)
        DOM (Document Object Model)
        XMLHttpRequest

目的:提高網頁的互動性、速度、可用性

優點:能在不更新整個頁面的前提下維護資料,減少頻寬浪費,增加互動性、操作性

缺點:在動態更新頁面的情況下,用戶無法回到前一個頁面狀態,因為瀏覽器僅能記下歷史記錄中的靜態頁面

解決方法:瀏覽器允許JavaScript動態更新錨點,這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點

AJAX教學參考網站
http://www.maxkiesler.com/index.php/weblog/comments/42_recent_ajax_tutorials/
http://caterpillar.onlyfun.net/Gossip/AjaxGossip/AjaxGossip.html

資料來源:wiki百科等

這一次做專題,從lab3就開始做ajax的整合

我認為在web2.0的應用裡面,Ajax的地位很重要

它讓使用者的介面不再因為會依值重新載入而變得醜陋也讓整個網頁更具有互動性,

在這一次的整合裡面又再一次的把以前webfund的技術再複習一次 ,

也就是利用雄哥學長傳下來的監聽div的方法,

把php的參數導出去另外一個php獨立運作完後再顯示在原本的div裡面

我也發現google map api的技術好用的地方

當我們在視窗裡面開一個google map以後所有的ajax都是google做完了

不用麻煩的值參數導出去,只要利用JavaScript的function就能做到以前自己要傳很多參數到php的效果