現在來寫ajax教材。。其實已經超級簡單了。。
以前的時候只是針對IE的時候。。還是可以寫個函數就KO了的。。但是現在各大瀏覽器林立。。弄的我們
有時候也沒有辦法。。支援IE。。支援FF。。我可是很懶的。。
既然已經有了ajax架構。。何必再自己寫一個呢。。o(∩_∩)o...
這裡我們來用jQuery的吧。。jQuery的ajax超級簡單。。一個get函數搞定!
可是很多基礎不好的傢伙。。還是有點不能理解。。沒辦法。。還是講下原理吧。。
ajax 白話 ---> 非同步傳輸。。就是不重新整理頁面獲得資料。。
那麼再白點就是,用個函數從一個檔案獲得你所需要的資料。。
這個時候就會出現了一個事件了。。啥事件尼。。那就是裝載事件啊。。你比如點擊一個按鈕。。執行一
個函數了。這個函數擷取一個檔案的資料。。而這個時候,這個資料的資料量很大,這個時候,你是不是
會等那麼一會兒啊。。比如說5秒。。那麼你擷取完資料才把資料顯示到頁面上。。這個時候就出現了咱
們的重頭演員了!! [裝載完畢事件] 也就是說,你的操作都要寫在這裡,比如把資料顯示出來啊。。什
麼的。。
說了這麼多。。其實就是為了引出 [裝載完畢事件]
其他的也就沒什麼了。。下面看看實際上的代碼是如何寫的吧。。實在是太簡單了。。幸福吧!
第一步 加入jQuery類庫 放在<head></head>裡面
<script language="JavaScript" type="text/javascript" src="jquery-1.2.1.pack.js"></script>
第二步 寫這個ajax函數吧!在這之前我來布置下body的成員吧。。
<a href="#" onclick="javascript:o();">kkk</a>
<div id="pp">55</div>
一個a和一個div,a的onclick事件運行了o函數。。現在咱們來寫這個o函數吧!!
function o(){
$.get(
"peng.txt",
function(data){
$("#pp").html(data);
}
);
}
peng.txt 是咱們擷取資料的檔案,這個可以是任何web檔案。。
function(data) 就是咱們上面反覆說的 [裝載完畢事件] 而data就是獲得的資料。。
$("#pp").html(data); 這個就是咱們執行的函數體。。它相當與 document.getElementById("pp").innerHTML = data;
就是文法不同。。意思是一樣的。。簡單吧。。吼吼。。
最後小提示下:資料要是utf8 的哦。。 也就是這裡的peng.txt 的編碼
代碼下載