javascript實現(xiàn)簡單的ajax封裝示例
本文實例講述了javascript實現(xiàn)簡單的ajax功能封裝。分享給大家供大家參考,具體如下:
function ajax(obj){ var xhr = (function (){//獲取xhr對象,為了兼容ie6所以進行了重新封裝 if(typeof XMLHttpRequest !='undefined') { return new XMLHttpRequest(); }else if(typeof ActiveXObject !='undefined') { var version = [ 'MSXML2.XMLHttp6.0', 'MSXML2.XMLHttp3.0', 'MSXML2.XMLHttp' ] for(var i in version) { try{ return new ActiveXObject(version[i]); break; }catch(e){ //捕獲錯誤進行然后跳出繼續(xù)循環(huán) } } }else{ throw new Error("您的系統(tǒng)或瀏覽器不支持XHR對象!"); } })();//獲取xhr對象 //默認true開啟異步(異步和同步的主要區(qū)別是異步在請求的時候后面的腳本可以繼續(xù)運行,同步的話必須運行完ajax然后才能運行其后面的腳本) if(obj.async === true) { xhr.onreadystatechange = function() { if(xhr.readyState ==4) { callback(xhr.responseText); } } } var arr=[] ; for(var i in obj.data) {arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj.data[i]));} obj.data = arr.join('&'); //這一步要注意一下,不管是get/post 方式提交都必須要對傳進來的obj.data進行格式化 最后轉(zhuǎn)化成的格式name=zhang&age=26&wedding=no if(obj.method === 'get') {//通過get方式請求的 obj.url = obj.url.indexOf('?') ==-1 ? obj.url+'?rand='+Math.random()+'&'+obj.data : obj.url+'rand='+Math.random()+'&'+obj.data; xhr.open(obj.method,obj.url,obj.async); xhr.send(null); } if(obj.method === 'post') {//通過post方式請求的 obj.url =obj.url+'?rand='+Math.random(); xhr.open(obj.method,obj.url,obj.async); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//這是對請求頭部的類型重設(shè),post的請求必須要重設(shè); xhr.send(obj.data); } //false開啟同步 if(obj.async === false) {callback(xhr.responseText);} function callback (returnTxt) { if(xhr.status == 200){ obj.success(returnTxt); }else { alert('獲取數(shù)據(jù)錯誤!錯誤代號:' + xhr.status + ',錯誤信息:' + xhr.statusText); } } }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- 原生javascript實現(xiàn)的ajax異步封裝功能示例
- 原生js仿jquery實現(xiàn)對Ajax的封裝
- 用原生JS對AJAX做簡單封裝的實例代碼
- 淺析jQuery Ajax通用js封裝
- 原生JS封裝ajax 傳json,str,excel文件上傳提交表單(推薦)
- 原生JS封裝Ajax插件(同域、jsonp跨域)
- js實現(xiàn)對ajax請求面向?qū)ο蟮姆庋b
- 原生Javascript封裝的一個AJAX函數(shù)分享
- js鎖屏解屏通過對$.ajax進行封裝實現(xiàn)
- JavaScript 聯(lián)動的無限級封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動
- JavaScript 封裝Ajax傳遞的數(shù)據(jù)代碼
- 一個AJAX自動完成功能的js封裝源碼[支持中文]
相關(guān)文章
原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作
這篇文章主要介紹了原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作,結(jié)合實例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map進行遍歷操作相關(guān)技巧與操作注意事項,需要的朋友可以參考下2019-02-02ES6使用 Array.includes 處理多重條件用法實例分析
這篇文章主要介紹了ES6使用 Array.includes 處理多重條件用法,結(jié)合實例形式分析了Array.includes基本功能、原理及處理多重條件相關(guān)操作技巧,需要的朋友可以參考下2020-03-03淺析JavaScript作用域鏈、執(zhí)行上下文與閉包
JavaScript 采用詞法作用域(lexical scoping),函數(shù)執(zhí)行依賴的變量作用域是由函數(shù)定義的時候決定,而不是函數(shù)執(zhí)行的時候決定,通過本文給大家介紹JavaScript作用域鏈、執(zhí)行上下文與閉包相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧2016-02-02微信小程序開發(fā)之大轉(zhuǎn)盤 仿天貓超市抽獎實例
本篇文章主要介紹了微信小程序開發(fā)之大轉(zhuǎn)盤 仿天貓超市抽獎實例,這里整理了詳細的代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-12-12圖片輪換效果實現(xiàn)代碼(點擊按鈕停止執(zhí)行)
在這個實例中需要注意的是,要把images文件夾下圖片的命名設(shè)置為有順序的,1、2、3..才可以,感興趣的朋友可以參考下2013-04-04JavaScript顯示表單內(nèi)元素數(shù)量的方法
這篇文章主要介紹了JavaScript顯示表單內(nèi)元素數(shù)量的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04