前言
與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封裝的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
