首先我覺得AJAX新手不應一以來就用什麼框架（比如prototype.js等，即使那樣寫程序會容易一些）。原因是瞭解xmlhttp的基本工作原 理，對以後的開發會有很大的幫助。而且我始終覺得對於Javascript這種腳本語言來說，執行效率是非常重要的，因此我十分反感爲了實現一個小功能， 動不動就包含什麼框架。因爲那些框架爲了自身的功能和兼容性，都包含了很多使用頻率比較低的東西，更有些框架爲了方便用戶調用，甚至不惜犧牲程序的執行效 率。
好了，不說廢話了，開始說正題吧。
1.創建xmlhttp對象時的問題。
創建xmlhttp對象在不同的瀏覽器中有不同的方法，在IE裏好像只能用ActiveXObject創建，然而在Firefox等其他瀏覽器裏就不行了
，但可以用XMLHttpRequest()函數創建，這樣的不統一給程序員寫程序帶來了很大的難度，所以我認爲在學習JS的過程中記錄下這些不同的地方很有必要，不然一個很有前途的程序很容易就會成爲 "IE only" 的！！下面是一個兼容的xmlhttp對象創建函數。以後就可以直接用這個函數創建xmlhttp對象，而不用擔心兼容性問題了
|
CODE:
function createAJAX()
{ var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlhttp = null; } } if (!xmlhttp) { if (typeof XMLHttpRequest != "undefined") { xmlhttp = new XMLHttpRequest(); } else return false; } return xmlhttp; } |
2.AJAX的數據傳輸方式。
正如你知道的，AJAX支持以POST何GET方式傳送數據。但你知道怎樣正確使用他們嗎？
GET：
GET是最常用的數據傳輸方式，就是將變量名和值直接跟在URL後面就可以了，同時這個也是最簡單的方法。
比如: 調用的URL爲 ajax.php?id=1，這樣在ajax.php中的$_GET數組裏就有 $_GET["id"] = 1; 如果有多個變量，則用"&"分開。
POST：
POST相對於GET來說要用得比較少一點，而且POST的用法比GET要麻煩一點。
首先，POST也跟GET一樣，要先把變量名和值用"="和"&"符號連成一個字符串。 然後用 xmlhttp的 send 方法傳送。而且要在send之前設置header。
|
CODE:
var ajax = createAJAX(); //就是前面那個創建xmlhttp對象的函數
ajax.open("POST","ajax.php",true); ajax.onreadystatechange = function1; //配置狀態處理函數名，不能在後面加上"()"！！ ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //這句必須要，而且一定要放在send以前 ajax.send("變量1=值1&變量2=值2"); |
用這種方法傳送出去的值就和用表單的post方式傳出的值一樣。
還有一個非常重要的，不管用POST還是GET，都應特別注意"&","+"和"%"等特殊字符的問題。如果變量的值裏面含有這些字符，那麼後果 不堪設想。一個很好地解決辦法就是使用encodeURIComponent這個全局函數來將所有的值都處理一遍（注意只是處理值），將特殊字符轉換成% XX的形式（和php裏的urlencode貌似是一個功能）。但這個函數在IE5裏不能用！
用POST方法傳送數據的時候，xmlhttp.send()傳出的所有東西在php裏都可以在一個名叫"php://input"的特殊文件裏讀取到。 比如上面的那個代碼，在ajax.php裏用 file_get_contents("php://input") 就可以得到 "變量1=值1&變量2=值2"。 這是一個非常好的功能！這樣我們就可以不用再使用"變量名=值"的方式了！也不用擔心特殊字符！ 將這個方法和GET結合起來就可以做一個AJAX的文章自動保存的程序。
|
CODE:
var ajax = createAJAX();
ajax.open("POST","ajax.php?filename=a.txt",true); ajax.onreadystatechange = function1; //ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //如果不需要將send出的字符串解析成POST變量數據，那麼這句就可以不用了 ajax.send("這裏可以傳送文件正文！！！！！"); |
這樣從ajax.php的$_GET數組中可以獲得文件名，用 file_get_contents("php://input") 就可以獲得文件正文，而且不用擔心任何的特殊字符，同時也不用處理數據，減輕客戶端壓力。
我做了一個樣例，看這裏 http://longbill.cn/down/sample/ajax.htm
我看過很多ajax框架，但沒有發現支持用這種方式傳輸數據的。另外我發現一個非常好用的ajax框架 tw-sack.js，但也有許多不盡人意的地方。於是我修改了一下，增加了一些功能。下面說說它的功能和用法：
特點:
體積小,方便調用, 增加 GET&POST 方法,就是上面說的那種
|
CODE:
實體化對象：
var ajax = new sack("URL"); // URL爲ajax調用地址 屬性:( =默認值) method = "GET"; //"GET"和"POST"或"GET&POST" encodeURL = true; //是否處理參數值 late = true; //是否爲異步方式 函數配置: onLoading = 空函數; //當loading的時候觸發 onLoaded = 空函數; //當下載完的時候觸發 onInteractive = 空函數; //當交互的時候觸發 onCompletion = 空函數; //當全部完成的時候觸發 onError = 空函數; //當發生錯誤的時候觸發 方法: setVar 設置變量和值,可以以兩種方式：setVar("varName","varValue"); 和 setVar( { "name1":"value1","name2":"value2"} ); send 發送,可以當method = "GET&POST" 的時候可以接受一個字符串作爲 POST 的內容 當完成的時候纔可用的屬性(在onCompletion裏可以使用): response //返回的字符串 responseXML //返回的xml |
具體樣例:
ajax.htm:
|
CODE:
<div id='mydiv'>Loading...</div>
<script src='sack.js'></script> <script> var ajax = new sack("ajax.php"); ajax.method = "GET&POST"; ajax.setVar( { "action":"read", "my":"posttdfsfdsfafasd" }); ajax.onCompletion = function () { document.getElementById('mydiv').innerHTML = ajax.response; } ajax.send("這裏是POST出去的內容，可以有特殊字符&=等"); </script> |
ajax.php:
|
CODE:
<?
$br = "<br/>---------------------------<br/>"; print_r($_GET); echo $br; print_r($_POST); echo $br; echo file_get_contents("php://input"); echo $br; ?> |