前言
眾所周知，jquery在我們日常開發中的使用頻率非常高，與js相比，我們省去了冗長的獲取元素的代碼，不用考慮一些麻煩的兼容問題，更加方便的動畫實現，以及更加方便的方法調用讓我們覺得jquery真是越用越舒服。但是jquery說到底還是對js的封裝，我們不光要用的舒服還要深入理解其中的原理，這樣才能更好的使用它。
首先我們封裝的函數為了能實現可傳入無限多個參數，在使用我們即將封裝的函數時，需要使用對象進行傳參，形式如下：
//data作為參數傳入我們下面封裝的函數var data = { //數據 user:"yonghu1", pass:'12345', age:18, //回調函數 success:function (data){ alert(data); } }函數封裝：
1、封裝一個輔助函數，把傳進來的對象拼接成url的字符串
function toData(obj){ if (obj == null){ return obj; } var arr = []; for (var i in obj){ var str = i+"="+obj[i]; arr.push(str); } return arr.join("&");}2、封裝Ajax
function ajax(obj){ //指定提交方式的默認值 obj.type = obj.type || "get"; //設置是否異步，默認為true(異步) obj.async = obj.async || true; //設置數據的默認值 obj.data = obj.data || null; if (window.XMLHttpRequest){ //非ie var ajax = new XMLHttpRequest(); }else{ //ie var ajax = new ActiveXObject("Microsoft.XMLHTTP"); } //區分get和post if (obj.type == "post"){ ajax.open(obj.type,obj.url,obj.async); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = toData(obj.data); ajax.send(data); }else{ //get test.php?xx=xx&aa=xx var url = obj.url+"?"+toData(obj.data); ajax.open(obj.type,url,obj.async); ajax.send(); } ajax.onreadystatechange = function (){ if (ajax.readyState == 4){ if (ajax.status>=200&&ajax.status<300 || ajax.status==304){ if (obj.success){ obj.success(ajax.responseText); } }else{ if (obj.error){ obj.error(ajax.status); } } } } }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
