js jquery ajax的幾種用法總結(及優(yōu)缺點介紹)
這篇文章，是我不知道什么是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的入口函數(shù)，供用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);
}
//回調函數(shù)，將從調用的php文件中取得的數(shù)據(jù)，反還給用戶
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的人來說，是一個不錯的選擇，它是裝上面所說的那種方法簡單的封裝了一下，做了統(tǒng)一的調用。感覺不錯，代碼挺多的就不貼出來了，大家可以到google搜ajaxrequest。
//ajaxrequest.js里面有一個這個方法這個方法是供view端調用的接口，接口可以有多個，根據(jù)情況自己加
function ajax_action_fun(url,fun) {
var ajax=new AJAXRequest;
ajax.get(
url,
function(obj){alert(obj.responseText);fun()}
);
}
//html里面調用這個接口
get_shop_son_list //是回調后執(zhí)行的方法名
ajax_action_fun("../ajax/shop_ajax.php?type=1",get_shop_list);
function get_shop_list(resValue){
//這里就是你要的操作
}
個人分析：它彌補了第一種方法的不足，統(tǒng)一調用接口，可以設置回調函數(shù)，缺點如果有的話，不在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分開，這對于后期維護是很幫助的，會節(jié)省很多時間，例如，全站換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){ //回調函數(shù)
alert( "Data Saved: " + msg ); //這里是操作
}
});
2）
//調用test.php文件，傳個參數(shù)，data是返回的數(shù)據(jù)
$.post("test.php", { name: "zhang"},
function(data){
alert("Data Loaded: " + data);
});
相關文章
這篇文章主要介紹了Javascript變量的作用域和作用域鏈詳解,本文用一個實例和運行結果來講解這兩個知識,需要的朋友可以參考下2015-04-04
最近這幾天在升級自己的MVVM 框架,遇到很多小問題,所以想著就在這里統(tǒng)一解決了。文中主要介紹了關于Javascript中with的替代方法與String中的正則方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
實現(xiàn)類似于百度或谷歌的搜索下拉列表的，就是打開百度往里輸入你要查詢的條件，只要你一輸入他就自動彈出一個下拉列表框，并顯示相關所有搜索內容2009-07-07
本文給大家分享的是使用javascript實現(xiàn)牛頓排球的特效，非常不錯，這里推薦給大家，有相同需求的小伙伴能夠參考下。2015-03-03
最近看到一些面試的回顧,不少有被面試官問到談談JS垃圾回收機制,下面這篇文章主要給大家介紹了關于js引擎垃圾回收機制的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
javascript實現(xiàn)fetch請求返回的統(tǒng)一攔截
這篇文章主要介紹了javascript實現(xiàn)fetch請求返回的統(tǒng)一攔截,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了js實現(xiàn)Select列表各項上移和下移的方法,涉及javascript動態(tài)操作頁面元素屬性值的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章將和大家一起探討一下動態(tài)高度虛擬列表原理并指出常見虛擬列表采用累計高度方式存在缺點,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
這篇文章主要教大家如何簡單實現(xiàn)jQuery輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)錄音功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11