以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

聊聊 AJAX

本文,不是教你怎麼設計 AJAX,已經有太多述論述在談論怎麼設計 AJAX 了,如果這些論述你仍看不懂,對 AJAX 還是一頭霧水時,那可以好好看一下本文。

所有的文章都告訴你,AJAX=Asynchronous Javascript And XML,也都告訴你這是 Jesse James Garrett 所提出的名詞,順便也把 Jesse James Garrett 對 AJAX 的定義又翻譯了一遍,我也有翻喔,為了避免你還要到別處查,看一下:

好了,基本教義講完了,但有多少人就因為這幾條明白了 AJAX 呢?很少,連中文書都很少,現有中文書籍,過半是翻譯,劈頭就由 XMLHttpRequest 物件開始說起,結果一樣讓人一頭霧水。

為什麼?

一定一堆人在問為什麼,事實上,我個人認為結論很簡單,沒有人告訴你應該用不同角度去看待 AJAX 這項.....「技術」!

我為什麼特別把「技術」兩個字加強語氣?理由很簡單,AJAX 根本就是一項技巧,正如中國菜一樣,切功、炒功練好,能變換的菜色百百種,AJAX 有新技術嗎?要講有,就是除了 IE 瀏覽器之外的其他瀏覽器,已經在支援 XMLHttpRequest 物件了,這造成了廣泛的流通性,不再是 IE 專屬技術(IE 以 ActiveX 型式產生物件,ActiveX 的危險性,搖搖頭,就別談了,連 IE 都開始主動封鎖 ActiveX 物件,你說呢?)

如果你想自學 AJAX,而途徑是 Google 搜尋文件,我認為可以省省力氣,那些文抄公們,會讓你找到的前 10 頁的內容是一模一樣,然後就貼一段程式告訴你,如此如此這般般的 Hello World!真的,沒什麼屁用!這些文章,你都可以全部捨棄,看下面的連結就好。

建議閱讀:AJAX 上手篇 - by Mozilla

路人甲:「好了,卜維丰,你不虧人會死嗎?」

不是我愛虧人,再拜一拜 Google 大神,哇,一堆,什麼一定要用 AJAX 的幾十個情況,又是什麼幾十個 AJAX 範例等等,一堆文章讓人眼光燎亂,一堆 Framework 可以下載,Dojo,聽過吧!真的,我實在太配服了,不過,Dojo 是所謂 Client Side Framework,什麼意思?就是用戶端套件,可以把用戶端操作搞的像應用程式。看過雅虎新版郵件程式吧!這東西就是 Dojo 代表作之一。

重點來了,有 AJAX 這項整合技術發表才發展出來這些 Client Side Framework 嗎?我只能告訴你,那是動力之一,過去,光刷新換頁,就讓一堆追求完美的設計師吐血不已,現在,不用換頁了(不用換頁是 AJAX 的重要特色及缺陷)很多過去只能用想的事,現在能作到了,全都拜瀏覽器支援 XMLHttpRequest 物件。

XMLHttp 並不新鮮啊,這裡,我就發表過一篇關於 ASP XMLHttp 物件使用例,如果你對 AJAX 還一知半解,試著去想想,以前要用 ASP 或 PHP 向主機要資料,頁面非切換不可,現在不用了,默默的主機就收到指令執行,再把結果丟回來,多好啊,我打個比方,這和自己出去吃飯 vs 叫外賣一樣!

所以,非同步是 AJAX 重要精神之一,那妙了!看看這篇文章,先看標題:

Ajax & PHP without using the XmlHttpRequest Object

如果一個不用 XMLHttpRequest 物件的技術,也叫 AJAX 的話,那 Jesse James Garrett 看了不知作何感想!你想喔,一部不用油的車,可能是電動車或瓦斯車喔,那一部不用柴油的柴油車,到底是什麼?

學習 AJAX 首先,你不能把 AJAX 當神看待,AJAX 不是萬能,不能因為要出書,就把 AJAX 捧上天,AJAX 也有致命的缺陷,其次,AJAX 目前已經被炒到 Client Side 遠大於 Server Side 了(必然的,Server Side 能作的事真的不多),結果,大家都以 Google Mail 為師,反正,原始碼打開來,看到的是一堆 Javascript Code 的網站,就能掛上 AJAX 的招牌!呼!我 1999 年的作品,http://www.carousel.com.tw v9 ,就已經能作到讀取外部檔,就是頁面不動,不刷新, 那個年代,連 ActiveX 都沒有咧,所以也叫 AJAX?

用隱藏的 IFRAME 也能達成很多不刷新頁面的效果,一堆網站,就稱這是 AJAX,我個人認為這都有問題,這只是效果相同,本質上差異很大,這就是不能單用一個角度去看 AJAX 的意思。

AJAX 的技巧面遠遠大於技術面!

這句話,我認為很值得有志加入 AJAX 領域的人好好想一想,所謂戲法人人會變,巧妙各有不同,有人把購物車作成拖曳式,把產品圖拉到車子裡,完成放入購物車的動作,看起來很炫,非常炫,重點是,當放開滑鼠時,主機要真的能收到這項產品編號才是最重要的,所以,動作全是花招,這些花招全部用 Javascritp DOM 就能完成!

所以,如果你還在尋找 AJAX 是什麼,我用白話告訴你:你作你的,主機作主機的,互不干擾,主機搞定,自然會通知你,你在設計程式時,留個小秘探隨時等著接收主機搞定後回傳的資料。

這就是 AJAX 的主要精神!

寫這文章,我是來打書的,罵我吧!呵!最新作品,AJAX,預計 2007 年夏天出版。

這本書,我用 20 餘種不同角度讓你對 AJAX 能有基本了解,再將 AJAX 的核心-XMLHttpRequest 好好剖析一翻,再加上 20 餘個應用例子,以及和處理 AJAX 相關的 Javascript 指令用法及範例,都有成品實作,同時提供 ASP 及 PHP 原始檔供測試,每個範例還附上動畫展示,絕對是你上手 AJAX 必備的一本書,敬請期待!

卜維丰 3/13 07'

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

manicure   2017/5/4 上午 04:19:00

Hi there! This blog post couldn't be written much better!
Going through this article reminds me of my previous roommate!
He constantly kept talking about this. I most certainly will send
this article to him. Fairly certain he will have a very good read.
Many thanks for sharing!

manicure   2017/4/11 下午 06:44:00

Whats up very cool blog!! Man .. Beautiful .. Amazing ..
I will bookmark your website and take the feeds also?
I am glad to find numerous useful info right here in the submit,
we want develop extra techniques on this regard, thanks for
sharing. . . . . .

卜維丰   2010/2/5 上午 11:04:00

hsien, 連不到指定網址????

hsien   2010/1/29 下午 10:40:00

請問老師
關於範例51的
051-loadMenu.php
應該是顯示出XML的樹狀
可是我顯示出來的卻
把顯示內容串起來了
EX:
http://yaohsien.twhosts.info/051-loadMenu.php
請問我的問題出在哪?

卜維丰   2009/9/8 上午 10:02:00

Leo, 解決AJAX 一定會遇到的 90 個問題
參閱

Leo   2009/9/3 下午 04:45:00

初心接獲ajax,我本身是用asp,發覺愈來愈多網站,blog使用ajax來開發網站,我覺得你樓上的文章很屌,文末你提及將一你的新書提出,請問書名是什麼,請賜教

Leo   2009/9/3 下午 04:45:00

初心接獲ajax,我本身是用asp,發覺愈來愈多網站,blog使用ajax來開發網站,我覺得你樓上的文章很屌,文末你提及將一你的新書提出,請問書名是什麼,請賜教

遇上AJAX    2009/3/9 下午 05:53:00

可以了,我弄錯了...Sorry

遇上AJAX   2009/3/9 下午 04:34:00

057-autoComplete.html 輸出 alert 404,
php改成xml格式輸出(不讀資料庫)還是一樣,看到這麼好的範例卻show不出來,不知道那裡出了錯,卜老師有空解答一下,我是用IE6,apache,不知道有沒有再版的更新檔案?

卜維丰   2008/6/11 下午 04:47:00

大鳥, 注意一下你是用標準模式, 還是容錯模式, 建議你用標準模式

大鳥   2008/6/8 下午 10:02:00

謝謝老師不吝嗇的指教
可是我在IE6下用xxx.id沒問題
但是xxx.name我有用IE Developer Toolbar去看
我確定name的屬性沒設定進去
但是在FireFox2.0下xxx.id與xxx.name是沒問題的,又要麻煩老師了,謝謝^^

卜維丰   2008/6/8 上午 03:22:00

大鳥, name, id 這些都是預設屬性, 用 xxx.name, xxx.id 來指定即可

大鳥   2008/6/7 下午 10:37:00

謝謝卜老師
您的三本書我都有買唷!
想再請教您一個問題
我在IE6下 PS:IE7我沒試過、FF完全沒問題
我去設定屬性質,例如:
xxx.setAttribute("name", "inputdata");
我確定有appendChild了
(除了name外其他都可以設定,例Name,NAME)
為什麼都不能設定呢?
還是有其他方法設定嗎?
不然我設定Name或NAME的話
document.form.inputdata都抓不到...
麻煩老師了,謝謝^^

卜維丰   2008/6/6 上午 02:17:00

大鳥, 據說(注意,是據說,我也無法證實), FireFox 在傳送 AJAX 要求, 如果出現問題(例如現在線路品質不好) 時,就會有這個錯誤訊息

事實上,常見的錯誤訊息不只這個,重點是有沒有影響你要的結果?(多半不會)

再來,為了安全性,不能跨網域,YUI 有個透過 proxy 方式跨網域的方法
http://developer.yahoo.com/javascript/howto-proxy.html

去看看

大鳥   2008/6/5 下午 09:19:00

請問老師:
AJAX的HttpRequest可以跨網域嗎?
還是只能在local中跑呢?

我用用firebug抓到:
uncaught exception: P ³å|ë method XMLHttpRequest.open

就是php是放在別的伺服器裡
假設
httpRequest.open("GET", "http://www.google.com.tw/test.php", true);這樣
謝謝老師指教喔^^

卜維丰   2008/4/22 下午 01:17:00

TH,
由表面上來看
http://60.248.204.199/test/057-autoComplete.php?s=h
在 FireFox 跑出來的並不是 XML 格式
你可以比對我的測試頁
http://220.135.5.148/audi_ajax/AJAX/Part_3/PHP/057-autoComplete.php?s=h
http://audi.tw/blog/AJAX/057-autoComplete.asp?s=h

我猜, 是你後台 php 部份
是丟出了 <?xml version="1.0" encoding="big5"?> 宣告沒錯
但實際出來的東西是 HTML 或 palin text
看看是不是少了
header('Content-Type:text/xml;charset=big5');

TH   2008/4/22 上午 10:56:00

卜先生:
你好,以下的問題很困擾我
http://60.248.204.199/test/057-autoComplete.html

在OPERA 運作正常,但在IE 6 及firefox 都會出錯(不會出現下拉值可選)

http://60.248.204.199/test/057-autoComplete.php?s=h (顯示正常)

謝謝



卜維丰   2008/4/18 下午 05:34:00

TH, 連結不存喔...

TH   2008/4/14 下午 05:15:00

卜先生:
你好,以下的問題很困擾我
http://60.248.204.199/autoComplete.html

在OPERA 運作正常,但在IE及firefox 都會出錯

http://60.248.204.199/sautoComplete.php?s=h (顯示正常)

   2007/11/26 下午 04:12:00

很有趣的作者:)

卜維丰   2007/6/14 下午 02:09:00

to 阿倫,修正方法,我已實機測過

請把 057-autoComplete.php 中

header('charset=big5;
ContentType: text/html;
Pragma: no-cache;
Cache-Control: no-cache;');

改成

header('charset:big5');
header('Content-Type: application/xml');
header('Pragma: no-cache');
header('Cache-Control: no-cache');

阿倫   2007/6/6 下午 12:31:00

如果是由 057-autoComplete.html 去執行, 只有跑出下拉式選單,但是缺沒有值可以選擇,這是我疑惑的地方,因為 XML的輸出都沒有問題!!

卜維丰   2007/6/6 上午 10:51:00

to阿倫,

我也是php4.
所有結果都測試過
都OK的

也就是說, 你照樓下樓下的方式
跑出來的 xml 是一模一樣的
只是如果是由 057-autoComplete.html 去執行, 跑不出下拉的選單? 就是沒法像影片 057-action 一樣的效果?

阿倫   2007/6/6 上午 09:11:00

嗯嗯..是的...書裡的範例小弟有試過輸入任何字元
都會有輸出XML檔,但是改回原本的程式後的結果都會有問題,
不知道是否我是用PHP4的原因?
請問您到最後輸出的結果都是沒有問題的嗎?

卜維丰   2007/6/6 上午 12:46:00

阿倫, 書裡的範例執行是 OK 的
請你直接執行
057-autoComplete.php?s=h
結果在瀏覽器畫面上
應該顯示以下內容

<?xml version="1.0" encoding="big5" ?>
- <root>
<name>HARRISON</name>
<name>HUGO</name>
<name>HUNK</name>
<name>HOWARD</name>
<name>HENRY</name>
<name>HELLEN</name>
<name>HEBE</name>
<name>HEIDI</name>
</root>

如果是, 那就對了

阿倫   2007/6/4 上午 11:26:00

沒有申請PHP的空間也,可以寄我的測試的檔案給您嗎?

卜維丰   2007/6/4 上午 09:57:00

阿倫, 留個測試連結我, OK?

阿倫   2007/6/4 上午 09:45:00

頁面上就會轉到資料庫輸出XML的結果
為名字開頭是H的所有資料,
所以輸入至資料庫的比對再輸出至XML這裡也沒有問題
不知道您有何看法?

阿倫   2007/6/4 上午 09:42:00

以下是我從文字方塊輸入一個字元至資料庫再轉XML的測試
autoComplete.php?s=h

卜維丰   2007/6/4 上午 12:20:00

阿倫,所以整體程式碼沒有執行上問題
現在就必需看 057-autoComplete.php 執行出來的結果對不對
以 057-autoComplete.php?s=a 的執行例必需是

<root>
<name>AARON</name>
<name>ABEL</name>
<name>ABRAHAM</name>
<name>ADAM</name>
<name>ADRIAN</name>
<name>ALVA</name>
<name>ALEX</name>
<name>ALAN</name>
<name>ALBERT</name>
<name>ALFRED</name>
</root>

你直接執行 057-autoComplete.php?s=a 看看結果和上面相不相同

阿倫   2007/6/3 下午 12:30:00

下載了新的057的範例,把程式改成如下
var xml_autoC = new autoComplete('searchStr',
'autoComplete.php');
首先我確定了autoComplete.php有輸出XML格式,
並且輸出的 xml 中,沒有null和特殊字元,
但問題沒有解決也,所以我做了一個實驗
就是把autoComplete.php替換成autoComplete.xml
這時候就ok了...很不能理解,為什麼php輸出成XML格式,
程式會無法正確執行,但純xml格式卻可以?
煩請解答...謝謝您

卜維丰   2007/6/3 上午 05:14:00

阿倫:請先連結到這裡
http://audi.tw/AJAX/057/057-autoComplete.html

如果實作 OK

下載位置在這裡

PS. 這個例子
<script type="text/javascript">
var xml_autoC = new autoComplete('searchStr','057-autoComplete.asp');
</script>

第二個參數有效用了

阿倫   2007/6/2 上午 10:05:00

謝謝您的回覆,
小弟有依照那兩個方法去debug
但是執行的結果還是不正確,程式執行到"this.createLayer();"
都還算正常,因為下拉式選單有出現,但從資料庫抓回來的資料卻無法正常顯示在layer上
比較懷疑是this.showSuggest(getNodeContent(xml));這裡出了問題
但小弟的Javascript的功力不強,沒棒法找出哪裏有問題,如果您有時間可以針對這個範例
再給我ㄧ些指導嗎,或是給我一個正確可執行的057範例,謝謝您~~

卜維丰   2007/6/1 下午 08:24:00

回覆讀者阿倫來信,

問題一,
<script type="text/javascript">
var xml_autoC = new autoComplete('searchStr','057-autoComplete.asp');
</script>
的第二個參數, 原意是要傳到 autoComplete.prototype.getRequest=function() 中
以便使用不同語言技術的人, 不用再去修改 autoComplete.js
書中所附範例, 未使用到, 可以算是 BUG, 真抱歉了

再來, 通常無法正確執行結果最常見的是 xml 資料問題
你可以由幾個方向去找原因

1.autoComplete.prototype.getRequest=function() 中, 把 057-autoComplete.php 改成比如 name.xml
並準備好 name.xml , 內容愈單純愈好

2.直接執行 057-autoComplete.php?s=字串
檢查結果是否符合

輸出的 xml 中, 如果有下列狀況, 會導致解析錯誤
1. <name>xxx</name> 如果 xxx 是 null 時
2. 如果 xxx 含有部份特殊字元, 如 <, >, & 等

我建議你測試的 name.xml 儘量單純, 如

<root>
<name>Arail</name>
<name>Arral</name>
</root>

風痕影   2007/5/31 上午 02:09:00

本想查查看學校圖書館是否進了這本書了
沒想到學校網頁竟然掛掉了 0rz
只剩下個人 portal 還好的...

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: