前言
與js相比,jquery為我們省去了冗長的獲取元素的代碼,不用考慮一些麻煩的兼容問題,更加方便的動畫實現,以及更加方便的方法調用讓我們覺得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); } } } } }
總結
以上就是原生js仿jquery實現對Ajax封裝的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。