摘要:一直在用方法來寫請求,用的多了,不免對這其中是怎么實(shí)現(xiàn)的產(chǎn)生了興趣,于是乎,小弟閑來無聊研究了一下原生實(shí)現(xiàn)請求,網(wǎng)上看了很多前輩們的關(guān)于請求的封裝方法,也借鑒了很多經(jīng)驗(yàn),于是乎就出現(xiàn)了小弟的一個(gè)原生封裝的版本,希望大家看了之后能夠明白,下面
一直在用jQuery方法來寫ajax請求,用的多了,不免對這其中是怎么實(shí)現(xiàn)的產(chǎn)生了興趣,于是乎,小弟閑來無聊研究了一下原生實(shí)現(xiàn)ajax請求,網(wǎng)上看了很多前輩們的關(guān)于ajax請求的封裝方法,也借鑒了很多經(jīng)驗(yàn),于是乎就出現(xiàn)了小弟的一個(gè)原生JS封裝ajax的版本,希望大家看了之后能夠明白,下面就是我實(shí)現(xiàn)的方法,其中的注釋很清晰,方便大家的理解。
/** * 對封裝好的ajax請求進(jìn)行調(diào)用 * */ ajax({ url:"", //請求地址 type:"GET", //請求方式 data:{name:"zhangsan",age :"23",email:"2372734044@qq.com"}, //請求參數(shù) dataType:"json", // 返回值類型的設(shè)定 async:false, //是否異步 success:function (response,xml) { console.log(response); // 此處執(zhí)行請求成功后的代碼 }, fail:function (status) { console.log("狀態(tài)碼為"+status); // 此處為執(zhí)行成功后的代碼 } }); function ajax(options) { /** * 傳入方式默認(rèn)為對象 * */ options = options || {}; /** * 默認(rèn)為GET請求 * */ options.type = (options.type || "GET").toUpperCase(); /** * 返回值類型默認(rèn)為json * */ options.dataType = options.dataType || "json"; /** * 默認(rèn)為異步請求 * */ options.async = options.async || true; /** * 對需要傳入的參數(shù)的處理 * */ var params = getParams(options.data); var xhr; /** * 創(chuàng)建一個(gè) ajax請求 * W3C標(biāo)準(zhǔn)和IE標(biāo)準(zhǔn) */ if (window.XMLHttpRequest){ /** * W3C標(biāo)準(zhǔn) * */ xhr = new XMLHttpRequest(); }else{ /** * IE標(biāo)準(zhǔn) * @type {ActiveXObject} */ xhr = new ActiveXObject("Microsoft.XMLHTTP") } xhr.onreadystatechange = function () { if (xhr.readyState == 4){ var status = xhr.status; if (status >= 200 && status < 300 ){ options.success && options.success(xhr.responseText,xhr.responseXML); }else{ options.fail && options.fail(status); } } }; if (options.type == "GET"){ xhr.open("GET",options.url + "?" + params ,options.async); xhr.send(null) }else if (options.type == "POST"){ /** *打開請求 * */ xhr.open("POST",options.url,options.async); /** * POST請求設(shè)置請求頭 * */ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); /** * 發(fā)送請求參數(shù) */ xhr.send(params); } } /** * 對象參數(shù)的處理 * @param data * @returns {string} */ function getParams(data) { var arr = []; for (var param in data){ arr.push(encodeURIComponent(param) + "=" +encodeURIComponent(data[param])); } console.log(arr); arr.push(("randomNumber=" + Math.random()).replace(".")); console.log(arr); return arr.join("&"); }
封裝以上的方法主要是因?yàn)樵鷍s傳遞請求參數(shù)比較麻煩,于是乎改良了一下,希望對大家有幫助,喜歡我的文章的話,就給我來個(gè)喜歡吧,
我最喜歡doge了
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81052.html
摘要:一直在用方法來寫請求,用的多了,不免對這其中是怎么實(shí)現(xiàn)的產(chǎn)生了興趣,于是乎,小弟閑來無聊研究了一下原生實(shí)現(xiàn)請求,網(wǎng)上看了很多前輩們的關(guān)于請求的封裝方法,也借鑒了很多經(jīng)驗(yàn),于是乎就出現(xiàn)了小弟的一個(gè)原生封裝的版本,希望大家看了之后能夠明白,下面 一直在用jQuery方法來寫ajax請求,用的多了,不免對這其中是怎么實(shí)現(xiàn)的產(chǎn)生了興趣,于是乎,小弟閑來無聊研究了一下原生實(shí)現(xiàn)ajax請求,網(wǎng)上看...
摘要:一直在用方法來寫請求,用的多了,不免對這其中是怎么實(shí)現(xiàn)的產(chǎn)生了興趣,于是乎,小弟閑來無聊研究了一下原生實(shí)現(xiàn)請求,網(wǎng)上看了很多前輩們的關(guān)于請求的封裝方法,也借鑒了很多經(jīng)驗(yàn),于是乎就出現(xiàn)了小弟的一個(gè)原生封裝的版本,希望大家看了之后能夠明白,下面 一直在用jQuery方法來寫ajax請求,用的多了,不免對這其中是怎么實(shí)現(xiàn)的產(chǎn)生了興趣,于是乎,小弟閑來無聊研究了一下原生實(shí)現(xiàn)ajax請求,網(wǎng)上看...
摘要:一封裝原生的為類以及用法見之前的文章根據(jù)確定請求的頭部以及別的信息。二封裝實(shí)用性的類在項(xiàng)目中經(jīng)常需要將進(jìn)行封裝,使用類發(fā)起請求。請求不帶請求帶請求不帶請求帶請求不帶請求帶這個(gè)方法感覺可以再次進(jìn)行封裝。完整代碼點(diǎn)擊查看以上。 一、封裝原生的xhr為ajax類 xhr以及用法見之前的文章 1、根據(jù)url確定請求的頭部以及別的信息。 var _headerConfig = {}; ...
摘要:我們都知道因?yàn)橥床呗缘膯栴},瀏覽器的請求是可能隨便跨域的一定要有跨域頭或者借助,但是,中可以設(shè)置為不跨域,如下所示這樣之后我們會(huì)得到一個(gè)為的返回。 免費(fèi)幫忙內(nèi)推阿里等各大IT公司的崗位,有興趣可以帶簡歷加微信angeltune 引言 前端技術(shù)真是一個(gè)發(fā)展飛快的領(lǐng)域,我三年前入職的時(shí)候只有原生XHR和Jquery ajax,我們還曾被JQuery 1.9版本版本以下不支持大文件請求這個(gè)...
閱讀 2310·2021-11-23 09:51
閱讀 3748·2021-11-11 10:57
閱讀 1391·2021-10-09 09:43
閱讀 2481·2021-09-29 09:35
閱讀 2013·2019-08-30 15:54
閱讀 1788·2019-08-30 15:44
閱讀 3179·2019-08-30 13:20
閱讀 1687·2019-08-30 11:19