摘要:一直在用方法來寫請求,用的多了,不免對這其中是怎么實現的產生了興趣,于是乎,小弟閑來無聊研究了一下原生實現請求,網上看了很多前輩們的關于請求的封裝方法,也借鑒了很多經驗,于是乎就出現了小弟的一個原生封裝的版本,希望大家看了之后能夠明白,下面
一直在用jQuery方法來寫ajax請求,用的多了,不免對這其中是怎么實現的產生了興趣,于是乎,小弟閑來無聊研究了一下原生實現ajax請求,網上看了很多前輩們的關于ajax請求的封裝方法,也借鑒了很多經驗,于是乎就出現了小弟的一個原生JS封裝ajax的版本,希望大家看了之后能夠明白,下面就是我實現的方法,其中的注釋很清晰,方便大家的理解。
/** * 對封裝好的ajax請求進行調用 * */ ajax({ url:"", //請求地址 type:"GET", //請求方式 data:{name:"zhangsan",age :"23",email:"2372734044@qq.com"}, //請求參數 dataType:"json", // 返回值類型的設定 async:false, //是否異步 success:function (response,xml) { console.log(response); // 此處執行請求成功后的代碼 }, fail:function (status) { console.log("狀態碼為"+status); // 此處為執行成功后的代碼 } }); function ajax(options) { /** * 傳入方式默認為對象 * */ options = options || {}; /** * 默認為GET請求 * */ options.type = (options.type || "GET").toUpperCase(); /** * 返回值類型默認為json * */ options.dataType = options.dataType || "json"; /** * 默認為異步請求 * */ options.async = options.async || true; /** * 對需要傳入的參數的處理 * */ var params = getParams(options.data); var xhr; /** * 創建一個 ajax請求 * W3C標準和IE標準 */ if (window.XMLHttpRequest){ /** * W3C標準 * */ xhr = new XMLHttpRequest(); }else{ /** * IE標準 * @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請求設置請求頭 * */ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); /** * 發送請求參數 */ xhr.send(params); } } /** * 對象參數的處理 * @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("&"); }
封裝以上的方法主要是因為原生js傳遞請求參數比較麻煩,于是乎改良了一下,希望對大家有幫助,喜歡我的文章的話,就給我來個喜歡吧,
我最喜歡doge了
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54375.html
摘要:一直在用方法來寫請求,用的多了,不免對這其中是怎么實現的產生了興趣,于是乎,小弟閑來無聊研究了一下原生實現請求,網上看了很多前輩們的關于請求的封裝方法,也借鑒了很多經驗,于是乎就出現了小弟的一個原生封裝的版本,希望大家看了之后能夠明白,下面 一直在用jQuery方法來寫ajax請求,用的多了,不免對這其中是怎么實現的產生了興趣,于是乎,小弟閑來無聊研究了一下原生實現ajax請求,網上看...
摘要:一直在用方法來寫請求,用的多了,不免對這其中是怎么實現的產生了興趣,于是乎,小弟閑來無聊研究了一下原生實現請求,網上看了很多前輩們的關于請求的封裝方法,也借鑒了很多經驗,于是乎就出現了小弟的一個原生封裝的版本,希望大家看了之后能夠明白,下面 一直在用jQuery方法來寫ajax請求,用的多了,不免對這其中是怎么實現的產生了興趣,于是乎,小弟閑來無聊研究了一下原生實現ajax請求,網上看...
摘要:一封裝原生的為類以及用法見之前的文章根據確定請求的頭部以及別的信息。二封裝實用性的類在項目中經常需要將進行封裝,使用類發起請求。請求不帶請求帶請求不帶請求帶請求不帶請求帶這個方法感覺可以再次進行封裝。完整代碼點擊查看以上。 一、封裝原生的xhr為ajax類 xhr以及用法見之前的文章 1、根據url確定請求的頭部以及別的信息。 var _headerConfig = {}; ...
摘要:我們都知道因為同源策略的問題,瀏覽器的請求是可能隨便跨域的一定要有跨域頭或者借助,但是,中可以設置為不跨域,如下所示這樣之后我們會得到一個為的返回。 免費幫忙內推阿里等各大IT公司的崗位,有興趣可以帶簡歷加微信angeltune 引言 前端技術真是一個發展飛快的領域,我三年前入職的時候只有原生XHR和Jquery ajax,我們還曾被JQuery 1.9版本版本以下不支持大文件請求這個...
閱讀 1648·2021-11-16 11:44
閱讀 2392·2021-10-11 11:07
閱讀 4035·2021-10-09 09:41
閱讀 662·2021-09-22 15:52
閱讀 3185·2021-09-09 09:33
閱讀 2700·2019-08-30 15:55
閱讀 2282·2019-08-30 15:55
閱讀 835·2019-08-30 15:55