資訊專欄INFORMATION COLUMN
關(guān)于 AJAX 相信都用過(guò)，自己動(dòng)手封裝的也肯定有不少，但應(yīng)該都只是簡(jiǎn)單的可以請(qǐng)求，不能設(shè)置同步異步以及返回的數(shù)據(jù)格式
兼容低版本 IE5、IE6
可以使用 get 和 post 請(qǐng)求數(shù)據(jù)
可以設(shè)置請(qǐng)求頭 需要的思路以及語(yǔ)法都有了，需要小伙伴自己拓展哦
可以設(shè)置返回?cái)?shù)據(jù)格式，不設(shè)置為默認(rèn)
get 請(qǐng)求的數(shù)據(jù)拼接我沒(méi)寫，有需要的可以自己加
之后會(huì)有 ES6 語(yǔ)法的封裝敬請(qǐng)期待
注：代碼使用 ES5 語(yǔ)法，我寫的這個(gè)版本的傳參只能按照順序來(lái)
直接上代碼
//1.用 ES5 寫 ajax
var ajax = function (url,method,data,async,success,error,resType) {
//設(shè)置變量默認(rèn)值
method = method || "GET";
async = async || true;
data = data || "";
resType = resType || "";
//數(shù)據(jù)校驗(yàn)
if(!url || url === ""){
throw new Error("url不能為空");//throw 用來(lái)拋出異常
}
if(method==="GET" && data != ""){
throw new Error("請(qǐng)將get請(qǐng)求參數(shù)寫在url里");//由于時(shí)間不太夠不再寫參數(shù)拼接，有興趣的小伙伴可以自己加參數(shù)拼接功能
}
//將小寫全部轉(zhuǎn)換為大寫
method = method.toUpperCase();
//判斷是否是低版本 IE
if (window.XMLHttpRequest) { //是否支持XMLHttpRequsest
var xhr = new XMLHttpRequest();
} else { //低版本 IE
var xhr = new ActiveXObject("Microsft.XMLHTTP");
}
//xmlhttp.open(method,url,async) 請(qǐng)求類型 請(qǐng)求地址 是否異步
xhr.open(method, url, async);
//設(shè)置請(qǐng)求頭
//判斷是否設(shè)置
//循環(huán) headers 設(shè)置請(qǐng)求頭
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//設(shè)置返回?cái)?shù)據(jù)格式
if(async){//如果設(shè)置了同步就不能設(shè)置返回?cái)?shù)據(jù)格式
xhr.responseType = resType; // 在不設(shè)置responseType的時(shí)候默認(rèn)為 text
}
//send(data) 將請(qǐng)求發(fā)送到服務(wù)器。 data僅用于post
xhr.send(data);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var res = xhr.response;
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
success && success(res);
} else {
error && error(res);
}
}
}
}
//url,method,data,async,success,error,resType
ajax("1.json","GET","",true,function(res){console.log(res);},function(error){console.log(error);},"json");
請(qǐng)求的 json 文件內(nèi)容
{
"name": "yhtx1997",
"text": "恭喜你測(cè)試成功?。?！"
}
調(diào)用效果圖
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108842.html
摘要：相比前一版本除了使用與法外還有以下改動(dòng)現(xiàn)在不需要按順序輸入?yún)?shù)會(huì)針對(duì)和做不同的數(shù)據(jù)處理可以自定義設(shè)置請(qǐng)求頭增加了參數(shù)數(shù)據(jù)類型的判斷調(diào)用代碼示例調(diào)用效果圖核心代碼沒(méi)有多少變化，因?yàn)橹挥羞@一種使用方法不支持低版本瀏覽器錯(cuò)誤判斷為必填項(xiàng)請(qǐng)求地址不 相比前一版本除了使用 ES6 與法外還有以下改動(dòng) 現(xiàn)在不需要按順序輸入?yún)?shù) 會(huì)針對(duì) GET 和 POST 做不同的數(shù)據(jù)處理 可以自定義設(shè)置請(qǐng)求頭...
摘要：相關(guān)最大的特性就在于直接操縱網(wǎng)頁(yè)上的節(jié)點(diǎn)，從而實(shí)現(xiàn)網(wǎng)頁(yè)的局部刷新而非全局刷新。該回調(diào)函數(shù)會(huì)在送回響應(yīng)的時(shí)候被調(diào)用。當(dāng)然了，如果瀏覽器不支持對(duì)象，會(huì)返回，在這時(shí)需要進(jìn)行額外的處理。 前言 馬上就要參加一個(gè)團(tuán)隊(duì)項(xiàng)目進(jìn)行React的前端開(kāi)發(fā)了。最近正在著手熟練React語(yǔ)法，然后發(fā)現(xiàn)本質(zhì)上還是建立在對(duì)javascript的深刻理解上。市面上在js基礎(chǔ)上封裝出了非常多優(yōu)秀的車輪，其中最被新手廣...
摘要：可以看到，這樣不僅沒(méi)有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都?jí)嚎s成了一行。效果通過(guò)拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來(lái)即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...
摘要：靈活性和針對(duì)性。所以我覺(jué)得大部分組件還是自己封裝來(lái)的更為方便和靈活一些。動(dòng)手開(kāi)干接下來(lái)我們一起手摸手教改造包裝一個(gè)插件，只要幾分鐘就可以封裝一個(gè)專屬于你的。 項(xiàng)目地址：vue-countTo配套完整后臺(tái)demo地址：vue-element-admin系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一（基礎(chǔ)篇）系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）系類文章三：手摸手，帶...
摘要：隨之，網(wǎng)景公司也提出了自己的解決方式，正好與大相反有可能這哥倆誰(shuí)都不服，專門對(duì)著干，它提出了事件捕獲的理論，也就是從外向內(nèi)直至觸發(fā)元素，依次觸發(fā)事件。 一說(shuō)到IE我想很多web小伙伴都避之不及，對(duì)于IE經(jīng)驗(yàn)不足的同學(xué)可以說(shuō)更是恨之入骨，撕心裂肺般的煩惱與氣憤?，被折磨的不要不要的。我感同身受，去年的我的生日愿望就是，我希望IE瀏覽器在這世界上沒(méi)有一個(gè)用戶。 這篇文章是一個(gè)追溯歷史并收集...
閱讀 993·2021-11-24 09:39
閱讀 2214·2021-11-16 11:54
閱讀 2096·2021-11-11 17:22
閱讀 2382·2021-09-30 09:55
閱讀 3611·2021-08-12 13:22
閱讀 1638·2019-08-30 15:44
閱讀 1180·2019-08-29 12:12
閱讀 3275·2019-08-27 10:58
