webdesign:head_rush_ajax
差異處
這裏顯示兩個版本的差異處。
| 下次修改 | 前次修改 | ||
|
webdesign:head_rush_ajax [2007/02/26 00:15] wenpei 建立 |
webdesign:head_rush_ajax [2007/02/26 01:08] (目前版本) wenpei |
||
|---|---|---|---|
| 行 10: | 行 10: | ||
| ==== 建立請求物件 ==== | ==== 建立請求物件 ==== | ||
| + | 靜態 JavaScript：程式不在任何 function 中，當瀏覽器載入頁面時即執行 | ||
| <code> | <code> | ||
| <script language="javascript" type="text/javascript"> | <script language="javascript" type="text/javascript"> | ||
| - | + | // 靜態 JavaScript | |
| - | var request = null; | + | var request = null; |
| - | function createRequest() { | + | // 原本放在 createRequest() 中 |
| try { | try { | ||
| - | request = new XMLHttpRequest(); // for firefox | + | request = new XMLHttpRequest(); // 非微軟的瀏覽器(Safari、FireFox、Mozilla、Opera...etc) |
| } catch (trymicrosoft) { | } catch (trymicrosoft) { | ||
| try{ | try{ | ||
| - | request = new ActiveXObject("Msxml2.XMLHTTP"); // for IE | + | request = new ActiveXObject("Msxml2.XMLHTTP"); // 大多數 IE |
| } catch (othermicrosoft) { | } catch (othermicrosoft) { | ||
| try { | try { | ||
| - | request = new ActiveXObject("Microsoft.XMLHTTP"); | + | request = new ActiveXObject("Microsoft.XMLHTTP"); // 還是 IE |
| } catch (failed) { | } catch (failed) { | ||
| request = null; | request = null; | ||
| 行 32: | 行 32: | ||
| if (request == null) | if (request == null) | ||
| alert ("Error creating request object!"); | alert ("Error creating request object!"); | ||
| - | } | + | |
| </code> | </code> | ||
| + | |||
| + | |||
| ==== 送出請求 ==== | ==== 送出請求 ==== | ||
| <code> | <code> | ||
| function getBoardsSold() { | function getBoardsSold() { | ||
| - | createRequest(); | + | // createRequest(); // 已被靜態執行 |
| var url = "getUpdatedBoardSales-ajax.php"; | var url = "getUpdatedBoardSales-ajax.php"; | ||
| - | url = url + "?dummy=" + new Date().getTime(); | + | url = url + "?dummy=" + new Date().getTime(); // 解決瀏覽器快取問題 |
| createRequest(); | createRequest(); | ||
| request.open("GET", url, true); // 初始化連線，將資料以 GET 的方式送到伺服器上給 url 檔案處理，true 表非同步 | request.open("GET", url, true); // 初始化連線，將資料以 GET 的方式送到伺服器上給 url 檔案處理，true 表非同步 | ||
| 行 48: | 行 50: | ||
| </code> | </code> | ||
| - | * 四種備妥狀態： | + | 四種備妥狀態： |
| - | - 連線初始化 | + | 0. 尚未初始化 |
| - | - 正在處理 | + | 1. 連線已經初始化 |
| - | - 伺服器即將完成請求 | + | 2. 正在處理 |
| - | - 完成 | + | 3. 伺服器即將完成請求，將資料傳給瀏覽器 |
| - | * onreadystatechange 會影響所有備妥狀態 | + | 4. 完成，可透過請求物件的 responseText 屬性取得回應資料 |
| + | |||
| + | * 每次備妥狀態一改變，瀏覽器都會去執行 onreadystatechange 指定的回呼函式 | ||
| ==== HTML 部份 ==== | ==== HTML 部份 ==== | ||
| 行 86: | 行 90: | ||
| } | } | ||
| </code> | </code> | ||
| + | |||
| + | ==== IE、Opera 瀏覽器的快取問題 ==== | ||
| + | 若 url 一樣時，瀏覽器會快取，再次送出請求(按下 button)時，瀏覽器會直接拿之前快取的資料，不會真正再向伺服器請求一次資料，造成資料無法更新。 | ||
| + | |||
| + | 在 url 放入一些無意義的假參數(如時間)，即可每次產生不同的 url。 | ||
| + | |||
| + | url = url + "?dummy=" + new Date().getTime(); | ||
webdesign/head_rush_ajax.1172420100.txt.gz · 上一次變更: 2007/02/26 00:38 (外部編輯)
若無特別註明，本 wiki 上的內容都是採用以下授權方式： CC Attribution-Noncommercial-Share Alike 3.0 Unported
