原生js實現(xiàn)對Ajax的封裝(仿jquery)
前言
眾所周知,jquery在我們?nèi)粘i_發(fā)中的使用頻率非常高,與js相比,我們省去了冗長的獲取元素的代碼,不用考慮一些麻煩的兼容問題,更加方便的動畫實現(xiàn),以及更加方便的方法調(diào)用讓我們覺得jquery真是越用越舒服。但是jquery說到底還是對js的封裝,我們不光要用的舒服還要深入理解其中的原理,這樣才能更好的使用它。
首先我們封裝的函數(shù)為了能實現(xiàn)可傳入無限多個參數(shù),在使用我們即將封裝的函數(shù)時,需要使用對象進行傳參,形式如下:
//data作為參數(shù)傳入我們下面封裝的函數(shù) var data = { //數(shù)據(jù) user:"yonghu1", pass:'12345', age:18, //回調(diào)函數(shù) success:function (data){ alert(data); } }
函數(shù)封裝:
1、封裝一個輔助函數(shù),把傳進來的對象拼接成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"; //設(shè)置是否異步,默認為true(異步) obj.async = obj.async || true; //設(shè)置數(shù)據(jù)的默認值 obj.data = obj.data || null; if (window.XMLHttpRequest){ //非ie var ajax = new XMLHttpRequest(); }else{ //ie var ajax = new ActiveXObject("Microsoft.XMLHTTP"); } //區(qū)分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); } } } } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 具名函數(shù)的四種調(diào)用方式 推薦
看四種方式執(zhí)行結(jié)果沒有區(qū)別。但如果函數(shù)有返回值的話,用new方式調(diào)用時可能會讓你有些失望。2009-07-07跟我學(xué)習(xí)javascript的執(zhí)行上下文
跟我學(xué)習(xí)javascript的執(zhí)行上下文,讀完本文后,你應(yīng)該清楚了解釋器做了什么,為什么函數(shù)和變量能在聲明前使用以及它們的值是如何決定的,需要了解這些內(nèi)容的朋友可以參考下2015-11-11javascript刪除數(shù)組重復(fù)元素的方法匯總
這篇文章主要介紹了javascript刪除數(shù)組重復(fù)元素的方法,實例匯總了幾種常用的javascript刪除數(shù)組重復(fù)元素的技巧,需要的朋友可以參考下2015-06-06