以下為本站文章分類清單

  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'

以下為文章回應區

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

How long do you grow during puberty?   2017/7/15 下午 03:00:00

Good day! I just wish to give you a big thumbs up for the great info you've got right here on this post.
I will be coming back to your website for more
soon.

foot pain going up leg   2017/7/3 下午 09:43:00

Hi there i am kavin, its my first occasion to commenting anyplace, when i read this article i thought i could also create comment
due to this sensible post.

   2017/6/24 下午 07:37:00

Precisely what I was searching for, thanks for posting.

foot pain after running   2017/6/21 下午 01:28:00

I leave a leave a response each time I like a post on a blog or I have
something to add to the discussion. It is a result of the sincerness communicated
in the post I browsed. And after this post 【卜維丰】聊聊 AJAX.
I was moved enough to leave a thought ;-) I actually do have 2 questions for
you if it's allright. Is it only me or do some of these
remarks look like coming from brain dead individuals?
:-P And, if you are posting at additional
places, I would like to keep up with you. Could you make
a list every one of all your social pages like your Facebook page,
twitter feed, or linkedin profile?

altheahartis.soup.io   2017/6/11 上午 05:25:00

Definitely imagine that that you stated. Your favourite justification appeared to be at the net the easiest thing to remember of.
I say to you, I certainly get annoyed while other people consider
issues that they just don't realize about.
You managed to hit the nail upon the top and also outlined out the entire thing without having side effect , other people can take a signal.
Will likely be again to get more. Thank you

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 還好的...

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