js與jquery ajax使用方法及對比分析

這篇博文，是我不知道什麼是ajax到熟練運用ajax的一個曆程。

一，最原始的方式來運用ajax

 

<SCRIPT language=javascript> 
var xmlHttp; 
 
function createXMLHttpRequest() { 
 
if (window.ActiveXObject) { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
}else if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); 
} 
} 
 
//定義了一個ajax的入口函數，供用view層使用者調用 
 
function show_type(type_id) { 
// alert(id); 
createXMLHttpRequest(); 
var url = "../ajax/shop_type_status.php?id="+type_id+"&time="+Math.random(); 
xmlHttp.open("GET", url, true); 
 
xmlHttp.onreadystatechange = function(){ show_back();} 
xmlHttp.send(null); 
} 
 
//回呼函數，將從調用的php檔案中取得的資料，反還給使用者 
 
function show_back() { 
 
if (xmlHttp.readyState == 4) { 
if (xmlHttp.status == 200) { 
//document.getElementById('cat_id').value = id; 
document.getElementById('type_status').innerHTML = xmlHttp.responseText; 
} 
} 
} 
</SCRIPT> 
個人分析：這種方法挺好的，簡單靈活，但是有一點不好，就是冗餘代碼比較多，不利於後期維護。

二，js端封裝的ajaxrequest

這個東西，對於習慣了用javascript的人來說，是一個不錯的選擇，它是裝上面所說的那種方法簡單的封裝了一下，做了統一的調用。感覺不錯，代碼挺多的就不貼出來了，大家可以到google搜ajaxrequest。
//ajaxrequest.js裡面有一個這個方法這個方法是供view端調用的介面，介面可以有多個，根據情況自己加

function ajax_action_fun(url,fun) { 
var ajax=new AJAXRequest; 
ajax.get( 
url, 
function(obj){alert(obj.responseText);fun()} 
); 
} 
 
//html裡面調用這個介面 
get_shop_son_list   //是回調後執行的方法名 
 
ajax_action_fun("../ajax/shop_ajax.php?type=1",get_shop_list); 
 
function get_shop_list(resValue){ 
//這裡就是你要的操作 
} 

個人分析：它彌補了第一種方法的不足，統一調用介面，可以設定回呼函數，缺點如果有的話，不在ajaxrequest本身而在於javascript，舉個例子吧
javascript：如果我想調用ajax_action_fun這個方法我要在html裡加個東西
<a class="showshop" href='javascript:' onclick=ajax_action_fun("../ajax/shop_ajax.php?type=1",get_shop_list);>顯示店</a>
jquery:用它可以盡量把js和html分開，這對於後期維護是很協助的，會節省很多時間，例如，全站換html；
$(".showshop").bind("click", {url: "../ajax/shop_ajax.php?type=1",function:get_shop_list}, ajax_action_fun);

這樣就可以不用在html裡面寫onclick事件了

三，jquery的ajax

1)

$.ajax({ 
   type: "POST", 
   url: "test.php",           //調用的php檔案 
   data: "name=zhang", 
   success: function(msg){            //回呼函數 
     alert( "Data Saved: " + msg );       //這裡是操作 
   } 
 }); 

2）

//調用test.php檔案，傳個參數，data是返回的資料

查看複製列印?
$.post("test.php", { name: "zhang"}, 
   function(data){ 
     alert("Data Loaded: " + data); 
   }); 

現在我基本上用jquery了，哈哈