<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>哇寶部落格 &#187; AJAX</title>
	<atom:link href="http://blog.wabow.com/archives/tag/ajax/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.wabow.com</link>
	<description>Wabow Information Inc. Blog</description>
	<lastBuildDate>Fri, 20 Jan 2012 09:19:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>[jQuery Plugin] jquery.history AJAX 無法回到上一頁的解決方案</title>
		<link>http://blog.wabow.com/archives/1527</link>
		<comments>http://blog.wabow.com/archives/1527#comments</comments>
		<pubDate>Thu, 18 Jun 2009 03:33:01 +0000</pubDate>
		<dc:creator>daniel</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[AJAX]]></category>

		<guid isPermaLink="false">http://blog.wabow.com/?p=1527</guid>
		<description><![CDATA[原始網站：history plugin AJAX 技術的廣泛運用，對網際網路的發展帶來重大變革；透過更新部分頁面即可維護資料，更有效率的反應使用者動作，避免在網路上發送沒有改變的資訊所帶來的頻寬的浪費。但是這樣部分更新的做法，同時也伴隨著缺點，其中受到最多批評的就是瀏覽器後退按鈕的失效；因為 AJAX 並不會更新整個頁面，自然也就無法在瀏覽器中的歷史紀錄留下資訊。 不過這個問題，早在 google 廣泛利用 AJAX 技術的初期，就已經被他們解決囉！雖然必須針對各種瀏覽器做各自不同的處理，但是現在 jQuery 已有網海中的前輩推出簡單使用的 Plugin囉：history plugin，官網本身也是展示網頁；下面稍微介紹一下使用以及運作的流程： 首先建立簡單的 AJAX 超連結： Ajax load&#60;br /&#62; &#60;a href="#1" rel="history"&#62;load 1&#60;/a&#62;&#60;br /&#62; &#60;a href="#2" rel="history"&#62;load 2&#60;/a&#62;&#60;br /&#62; &#60;a href="#3" rel="history"&#62;load 3&#60;/a&#62;&#60;br /&#62; &#60;hr /&#62; Loaded html:&#60;br /&#62; &#60;div id="load"&#62;&#60;/div&#62; &#60;hr /&#62; 接下來載入 jQuery 以及 jquery.history： &#60;script type="text/javascript" src="jquery-1.3.2.min.js"&#62;&#60;/script&#62; &#60;script type="text/javascript" src="jquery.history.js"&#62;&#60;/script&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>原始網站：<a href="http://www.mikage.to/jquery/jquery_history.html" target="_blank">history plugin</a></p>
<p>AJAX 技術的廣泛運用，對網際網路的發展帶來重大變革；透過更新部分頁面即可維護資料，更有效率的反應使用者動作，避免在網路上發送沒有改變的資訊所帶來的頻寬的浪費。但是這樣部分更新的做法，同時也伴隨著<a href="http://zh.wikipedia.org/w/index.php?title=AJAX&amp;variant=zh-tw#.E4.BC.98.E7.82.B9.E5.92.8C.E6.89.B9.E8.AF.84" target="_blank">缺點</a>，其中受到最多批評的就是瀏覽器後退按鈕的失效；因為 AJAX 並不會更新整個頁面，自然也就無法在瀏覽器中的歷史紀錄留下資訊。</p>
<p>不過這個問題，早在 google 廣泛利用 AJAX 技術的初期，就已經被他們解決囉！雖然必須針對各種瀏覽器做各自不同的處理，但是現在 jQuery 已有網海中的前輩推出簡單使用的 Plugin囉：<a href="http://www.mikage.to/jquery/jquery_history.html" target="_blank">history plugin</a>，官網本身也是展示網頁；下面稍微介紹一下使用以及運作的流程：</p>
<p><span id="more-1527"></span>首先建立簡單的 AJAX 超連結：</p>
<pre style="color:#d1d1d1;background:#000000;">Ajax load<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">br</span> <span style="color:#ff8906; ">/&gt;</span>
<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">a</span> href<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"#1"</span> rel<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"history"</span><span style="color:#ff8906; ">&gt;</span>load <span style="color:#00a800; ">1</span><span style="color:#ff8906; ">&lt;/</span><span style="color:#e66170; font-weight:bold; ">a</span><span style="color:#ff8906; ">&gt;</span><span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">br</span> <span style="color:#ff8906; ">/&gt;</span>
<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">a</span> href<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"#2"</span> rel<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"history"</span><span style="color:#ff8906; ">&gt;</span>load <span style="color:#00a800; ">2</span><span style="color:#ff8906; ">&lt;/</span><span style="color:#e66170; font-weight:bold; ">a</span><span style="color:#ff8906; ">&gt;</span><span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">br</span> <span style="color:#ff8906; ">/&gt;</span>
<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">a</span> href<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"#3"</span> rel<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"history"</span><span style="color:#ff8906; ">&gt;</span>load <span style="color:#00a800; ">3</span><span style="color:#ff8906; ">&lt;/</span><span style="color:#e66170; font-weight:bold; ">a</span><span style="color:#ff8906; ">&gt;</span><span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">br</span> <span style="color:#ff8906; ">/&gt;</span>

<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">hr</span> <span style="color:#ff8906; ">/&gt;</span>
Loaded html:<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">br</span> <span style="color:#ff8906; ">/&gt;</span>
<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">div</span> id<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"load"</span><span style="color:#ff8906; ">&gt;</span><span style="color:#ff8906; ">&lt;/</span><span style="color:#e66170; font-weight:bold; ">div</span><span style="color:#ff8906; ">&gt;</span>
<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">hr</span> <span style="color:#ff8906; ">/&gt;</span></pre>
<p>接下來載入 jQuery 以及 jquery.history：</p>
<pre style="color:#d1d1d1;background:#000000;"><span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">script type="text/javascript" src="jquery-1.3.2.min.js"</span><span style="color:#ff8906; ">&gt;</span><span style="color:#ff8906; ">&lt;/</span><span style="color:#e66170; font-weight:bold; ">script</span><span style="color:#ff8906; ">&gt;</span>
<span style="color:#ff8906; ">&lt;</span><span style="color:#e66170; font-weight:bold; ">script type="text/javascript" src="jquery.history.js"</span><span style="color:#ff8906; ">&gt;</span><span style="color:#ff8906; ">&lt;/</span><span style="color:#e66170; font-weight:bold; ">script</span><span style="color:#ff8906; ">&gt;</span></pre>
<p>然後插入 JavaScript：</p>
<pre style="color:#d1d1d1;background:#000000;"><span style="color:#d2cd86; ">&lt;</span>script type<span style="color:#d2cd86; ">=</span><span style="color:#00c4c4; ">"text/javascript"</span><span style="color:#d2cd86; ">&gt;</span>

<span style="color:#9999a9; ">// 「上一頁」觸發後執行的函數</span>
<span style="color:#e66170; font-weight:bold; ">function</span> pageload<span style="color:#d2cd86; ">(</span>hash<span style="color:#d2cd86; ">)</span> <span style="color:#b060b0; ">{</span>
    <span style="color:#9999a9; ">// 根據傳回的 hash（錨點），AJAX 置換顯示的內容</span>
    <span style="color:#e66170; font-weight:bold; ">if</span><span style="color:#d2cd86; ">(</span>hash<span style="color:#d2cd86; ">)</span> <span style="color:#b060b0; ">{</span>
        <span style="color:#9999a9; ">// 重新讀取指定頁面</span>
        $<span style="color:#d2cd86; ">(</span><span style="color:#00c4c4; ">"#load"</span><span style="color:#d2cd86; ">)</span><span style="color:#d2cd86; ">.</span>load<span style="color:#d2cd86; ">(</span>hash <span style="color:#d2cd86; ">+</span> <span style="color:#00c4c4; ">".html"</span><span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">;</span>
    <span style="color:#b060b0; ">}</span> <span style="color:#e66170; font-weight:bold; ">else</span> <span style="color:#b060b0; ">{</span>
        <span style="color:#9999a9; ">// 如果沒有回傳值，代表已經回到 AJAX 的初始狀態頁，清空顯示的內容</span>
        $<span style="color:#d2cd86; ">(</span><span style="color:#00c4c4; ">"#load"</span><span style="color:#d2cd86; ">)</span><span style="color:#d2cd86; ">.</span>empty<span style="color:#d2cd86; ">(</span><span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">;</span>
    <span style="color:#b060b0; ">}</span>
<span style="color:#b060b0; ">}</span>

$<span style="color:#d2cd86; ">(</span><span style="color:#e66170; font-weight:bold; ">function</span> <span style="color:#d2cd86; ">(</span><span style="color:#d2cd86; ">)</span> <span style="color:#b060b0; ">{</span>
    <span style="color:#9999a9; ">// 初始化 history plugin，並設定回傳使用的函數</span>
    $<span style="color:#d2cd86; ">.</span>historyInit<span style="color:#d2cd86; ">(</span>pageload<span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">;</span>

    <span style="color:#9999a9; ">// 設定觸發寫入歷史紀錄條件的按鈕事件</span>
    $<span style="color:#d2cd86; ">(</span><span style="color:#00c4c4; ">"a[rel='history']"</span><span style="color:#d2cd86; ">)</span><span style="color:#d2cd86; ">.</span>click<span style="color:#d2cd86; ">(</span><span style="color:#e66170; font-weight:bold; ">function</span><span style="color:#d2cd86; ">(</span><span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">{</span>
            <span style="color:#9999a9; ">// 取得超連結的錨點</span>
        <span style="color:#e66170; font-weight:bold; ">var</span> hash <span style="color:#d2cd86; ">=</span> <span style="color:#e66170; font-weight:bold; ">this</span><span style="color:#d2cd86; ">.</span>href<span style="color:#b060b0; ">;</span>
        hash <span style="color:#d2cd86; ">=</span> hash<span style="color:#d2cd86; ">.</span><span style="color:#e66170; font-weight:bold; ">replace</span><span style="color:#d2cd86; ">(</span><span style="color:#02d045; ">/</span><span style="color:#d2cd86; ">^</span><span style="color:#d2cd86; ">.</span><span style="color:#d2cd86; ">*</span><span style="color:#00c4c4; ">#</span><span style="color:#02d045; ">/</span><span style="color:#d2cd86; ">,</span> <span style="color:#00c4c4; ">''</span><span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">;</span>
        <span style="color:#9999a9; ">// 點選 AJAX 頁面時，紀錄位置於瀏覽器的歷史紀錄中</span>
        $<span style="color:#d2cd86; ">.</span>historyLoad<span style="color:#d2cd86; ">(</span>hash<span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">;</span>
        <span style="color:#e66170; font-weight:bold; ">return</span> <span style="color:#0f4d75; ">false</span><span style="color:#b060b0; ">;</span>
    <span style="color:#b060b0; ">}</span><span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">;</span>
<span style="color:#b060b0; ">}</span><span style="color:#d2cd86; ">)</span><span style="color:#b060b0; ">;</span>
<span style="color:#d2cd86; ">&lt;</span><span style="color:#d2cd86; ">/</span>script<span style="color:#d2cd86; ">&gt;</span></pre>
<p>大致上的流程為：</p>
<blockquote><p>1. <strong>historyInit()</strong> 初始化 history plugin，設定回傳使用的函數；根據使用的函數載入歷史頁面。對 IE 及 safari 採取不同的處理方式，並設定每隔 0.1 秒觸發 historyCheck() 函數。<br />
2. <strong>historyCheck()</strong> 監聽使用者是否觸發瀏覽器「上一頁」按鈕，對 IE、safari 及其他瀏覽器採取不同的處理方式。觸發「上一頁」按鈕後，依照初始化時設定的回傳函數作相對應的處理。<br />
3. <strong>historyLoad()</strong> 在觸發 AJAX 更換內容時，寫入新的歷史紀錄，對 IE、safari 及其他瀏覽器採取不同的處理方式。</p></blockquote>
<p>針對瀏覽器提供的不同處理方式，history plugin 非常貼心的幫我們處理好了；依照官網的說明目前可以相容 IE8、FireFox 4.0、Opera9、Safari 4.0、Chrome 1.0 等多種瀏覽器。所以基本上是不用管 IE 的隱藏 iframe 紀錄，或是 Safari 那一大長串複雜到幾乎看不懂的特殊處理～非常方便！</p>
<p>後記：<br />
原本想要帶入目前專案在用的 ajaxtab，但在 IE 瀏覽器中發現「上一頁」不能流暢的進行；後來才發現可能是 location.hash 與 iframe.location.hash 重複紀錄的關係。因為 IE 已經使用 iframe 進行歷史紀錄，但是 history plugin 仍會利用 location.hash 紀錄。這邊我比較不懂為什麼要紀錄二次，也許有什麼特別的用意吧？因為官網上的範例在 IE 中並沒有這樣的問題，但是 ajaxtab 就會有；如果以後整合 history plugin 的人在 IE 的使用上有問題，請參考不進行 location.hash 紀錄這樣的解決方法吧～</p>
<p>參考資料：</p>
<ul>
<li>RailsFun!! <a href="http://railsfun.tw/redirect.php?tid=82&amp;goto=lastpost" target="_blank">讓Ajax可以正常支援上下頁</a></li>
<li>pansteven 筆記 <a href="http://steven631226.blogspot.com/2009/05/jquery-history.html" target="_blank">jquery -history</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.wabow.com/archives/1527/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>從 HTTP 狀態碼延伸介紹 AJAX 技術</title>
		<link>http://blog.wabow.com/archives/1012</link>
		<comments>http://blog.wabow.com/archives/1012#comments</comments>
		<pubDate>Thu, 23 Apr 2009 03:06:45 +0000</pubDate>
		<dc:creator>daniel</dc:creator>
				<category><![CDATA[技術分享]]></category>
		<category><![CDATA[AJAX]]></category>

		<guid isPermaLink="false">http://blog.wabow.com/?p=1012</guid>
		<description><![CDATA[這應該是大家最熟悉的頁面吧？沒錯，就是瀏覽器「無法顯示網頁」的顯示頁面；而 404 則是網頁伺服器 HTTP 回應狀態的 3 位數字代碼：HTTP 狀態碼。現在的瀏覽器幾乎都直接將錯誤訊息內建，所以發生 404 錯誤的時候甚至已經不在顯示「404」這個數字在畫面上了；所以左圖是古早的瀏覽器 404 錯誤畫面。關於 HTTP 狀態碼，其他依照 RFC 2616 所定義規範的還有許多代碼，這部分偉大的維基百科已經幫我們巨細靡遺的整理好了，我就不再贅述佔版面啦！雖然是 Jace 的指定作業（因為他說 HTTP 狀態碼應該是常識...），不過如果只寫醬好像有點偷懶（汗）；就我最早開始知道的 HTTP 狀態碼 200 延伸，介紹一下基礎的 AJAX 技術吧！ AJAX 是 Asynchronous JavaScript and XML 的縮寫，也就是 非同步 JavaScript 和 XML 的一種運用。早期在使用 AJAX 的時候，並沒有像現在這麼多便利的函式庫（如：jQuery）可以使用，所以當初必須借助 XMLHttpRequestObject 的幫助，與 Server 端進行非同步的呼叫。流程如下： 1. 產生 XMLHttpRequest 物件實體 2. 以該物件對 Server 端的資源進行非同步呼叫 3. 定義一個回傳函式，當 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.wabow.com/wp-content/uploads/2009/04/404-image.gif"><img class="alignleft size-full wp-image-1013" src="http://blog.wabow.com/wp-content/uploads/2009/04/404-image.gif" alt="404-image" width="282" height="234" /></a>這應該是大家最熟悉的頁面吧？沒錯，就是瀏覽器「無法顯示網頁」的顯示頁面；而 404 則是網頁伺服器 HTTP 回應狀態的 3 位數字代碼：<a href="http://zh.wikipedia.org/w/index.php?title=HTTP%E7%8A%B6%E6%80%81%E7%A0%81&amp;variant=zh-tw" target="_blank">HTTP 狀態碼</a>。現在的瀏覽器幾乎都直接將錯誤訊息內建，所以發生 404 錯誤的時候甚至已經不在顯示「404」這個數字在畫面上了；所以左圖是古早的瀏覽器 404 錯誤畫面。關於 HTTP 狀態碼，其他依照 <a href="http://tools.ietf.org/html/rfc2616" target="_blank">RFC 2616</a> 所定義規範的還有許多代碼，這部分偉大的<a href="http://zh.wikipedia.org/w/index.php?title=Wiki&amp;variant=zh-tw" target="_blank">維基百科</a>已經幫我們巨細靡遺的整理好了，我就不再贅述佔版面啦！雖然是 Jace 的指定作業（因為他說 HTTP 狀態碼應該是常識...），不過如果只寫醬好像有點偷懶（汗）；就我最早開始知道的 HTTP 狀態碼 <a href="http://zh.wikipedia.org/w/index.php?title=HTTP%E7%8A%B6%E6%80%81%E7%A0%81&amp;variant=zh-tw#200_OK" target="_blank">200</a> 延伸，介紹一下基礎的 <a href="http://zh.wikipedia.org/w/index.php?title=AJAX&amp;variant=zh-tw" target="_blank">AJAX</a> 技術吧！<span id="more-1012"></span></p>
<p>AJAX 是 Asynchronous JavaScript and XML 的縮寫，也就是 非同步 JavaScript 和 XML 的一種運用。早期在使用 AJAX 的時候，並沒有像現在這麼多<a href="http://zh.wikipedia.org/w/index.php?title=AJAX&amp;variant=zh-tw#.E5.B7.A5.E5.85.B7" target="_blank">便利的函式庫</a>（如：<a href="http://jquery.com/" target="_blank">jQuery</a>）可以使用，所以當初必須借助 <a href="http://en.wikipedia.org/wiki/XMLHttpRequest" target="_blank">XMLHttpRequestObject</a> 的幫助，與 Server 端進行非同步的呼叫。流程如下：</p>
<blockquote><p>1. 產生 XMLHttpRequest 物件實體<br />
2. 以該物件對 Server 端的資源進行非同步呼叫<br />
3. 定義一個回傳函式，當 Server 端的 Response 到達實自動執行<br />
4. 在該回傳函式進行處理 Response<br />
5. 可重複步驟 2.</p></blockquote>
<p>透過 JavaScript 的非同步呼叫，我們就能在背景處理 Server 端才能處理的需求，並將回應的資訊經由 <a href="http://zh.wikipedia.org/w/index.php?title=%E6%96%87%E6%A1%A3%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B&amp;variant=zh-tw" target="_blank">DOM</a> 回寫至 HTML 中。以下是我以前使用 AJAX 所使用的方法：</p>
<p>首先建立 XMLHttpRequestObject</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// holds an instance of XMLHttpRequest</span>
<span style="color: #003366; font-weight: bold;">var</span> xmlHttp <span style="color: #339933;">=</span> createXmlHttpRequestObject<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// creates an XMLHttpRequest instance</span>
<span style="color: #003366; font-weight: bold;">function</span> createXmlHttpRequestObject<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// will store the reference to the XMLHttpRequest object</span>
  <span style="color: #003366; font-weight: bold;">var</span> xmlHttp<span style="color: #339933;">;</span>
  <span style="color: #006600; font-style: italic;">// this should work for all browsers except IE6 and older</span>
  <span style="color: #000066; font-weight: bold;">try</span>
  <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// try to create XMLHttpRequest object</span>
    xmlHttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// assume IE6 or older</span>
    <span style="color: #003366; font-weight: bold;">var</span> XmlHttpVersions <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;MSXML2.XMLHTTP.6.0&quot;</span><span style="color: #339933;">,</span>
                                    <span style="color: #3366CC;">&quot;MSXML2.XMLHTTP.5.0&quot;</span><span style="color: #339933;">,</span>
                                    <span style="color: #3366CC;">&quot;MSXML2.XMLHTTP.4.0&quot;</span><span style="color: #339933;">,</span>
                                    <span style="color: #3366CC;">&quot;MSXML2.XMLHTTP.3.0&quot;</span><span style="color: #339933;">,</span>
                                    <span style="color: #3366CC;">&quot;MSXML2.XMLHTTP&quot;</span><span style="color: #339933;">,</span>
                                    <span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// try every prog id until one works</span>
    <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>XmlHttpVersions.<span style="color: #660066;">length</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span>xmlHttp<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">try</span>
      <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// try to create XMLHttpRequest object</span>
        xmlHttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span>XmlHttpVersions<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
      <span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #006600; font-style: italic;">// return the created object or display an error message</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>xmlHttp<span style="color: #009900;">&#41;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Error creating the XMLHttpRequest object.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">else</span>
    <span style="color: #000066; font-weight: bold;">return</span> xmlHttp<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>接著利用 XMLHttpRequestObject 對 Server 端進行非同步的呼叫</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// called to read a file from the server</span>
<span style="color: #003366; font-weight: bold;">function</span> GetData<span style="color: #009900;">&#40;</span>divID<span style="color: #339933;">,</span>RType<span style="color: #339933;">,</span>KeyData<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// only continue if xmlHttp isn't void &lt;div&gt;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>xmlHttp<span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// try to connect to the server</span>
    <span style="color: #000066; font-weight: bold;">try</span>
    <span style="color: #009900;">&#123;</span>
      <span style="color: #006600; font-style: italic;">// initiate reading the async.txt file from the server</span>
      <span style="color: #006600; font-style: italic;">// 在這邊指定呼叫 GetData.php，並使用 GET 的方式處理 Server 端的資料</span>
      <span style="color: #003366; font-weight: bold;">var</span> strURL <span style="color: #339933;">=</span> <span style="color: #3366CC;">'GetData.php?RType='</span> <span style="color: #339933;">+</span> RType <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&amp;KeyData='</span> <span style="color: #339933;">+</span> KeyData<span style="color: #339933;">;</span>
      strURL <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;&amp;parm=&quot;</span> <span style="color: #339933;">+</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getTime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      xmlHttp.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span> strURL<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      xmlHttp.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// obtain a reference to the &lt;div&gt; element on the page</span>
        <span style="color: #006600; font-style: italic;">// 取得指定 id 的 div 物件</span>
        myDiv <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>divID<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>xmlHttp.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
          <span style="color: #006600; font-style: italic;">// 利用 HTTP 狀態碼，判斷 Server 端回傳資料的狀態</span>
          <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>xmlHttp.<span style="color: #000066;">status</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">&#41;</span>
          <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">try</span>
            <span style="color: #009900;">&#123;</span>
              <span style="color: #006600; font-style: italic;">// read the message from the server</span>
              response <span style="color: #339933;">=</span> xmlHttp.<span style="color: #660066;">responseText</span><span style="color: #339933;">;</span>
              <span style="color: #006600; font-style: italic;">// display the message</span>
              <span style="color: #006600; font-style: italic;">// 將回傳的資料，寫入 div 物件中</span>
              myDiv.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> response<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
              <span style="color: #006600; font-style: italic;">// display error message</span>
              <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Error reading the response: &quot;</span> <span style="color: #339933;">+</span> e.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
          <span style="color: #009900;">&#125;</span>
          <span style="color: #000066; font-weight: bold;">else</span>
          <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// display status message</span>
            <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;There was a problem retrieving the data:n&quot;</span> <span style="color: #339933;">+</span> xmlHttp.<span style="color: #660066;">statusText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span>
      xmlHttp.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #006600; font-style: italic;">// display the error in case of failure</span>
    <span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
      <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Can't connect to server:n&quot;</span> <span style="color: #339933;">+</span> e.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>這裡的 AJAX 就利用了 HTTP 狀態碼回應的數值，判斷  Server 端的回應是否成功。所以我最早知道 HTTP 狀態碼這個東西，是在 AJAX 的實作過程中；嗯...整個<a class="wpGallery" href="http://blog.wabow.com/wp-content/uploads/2009/04/db36133.png">順序好像不太對</a>啊！（噗）看著以前的程式碼，突然深深覺得 jQuery 真是好東西啊～以前要寫的落落長的 XMLHttpRequestObject，現在只要利用 <a href="http://docs.jquery.com/Ajax" target="_blank">jQuery Ajax</a>，簡單的丟一些參數進去，就能輕鬆達到目的；時代的確是在快速進步的...（掬一把老淚）</p>
<p>參考資料：<a href="http://school.brad.tw/mod/resource/view.php?id=90" target="_blank">趙令文自由學校BFS：XMLHttpRequest 物件</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.wabow.com/archives/1012/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

