摘要:內(nèi)部的幾個(gè)執(zhí)行步驟創(chuàng)建對象設(shè)置請求頭連接服務(wù)器設(shè)置回調(diào)發(fā)送數(shù)據(jù)在回調(diào)函數(shù)中獲取數(shù)據(jù)利用標(biāo)簽可以跨域請求資源解決跨域問題。
Ajax內(nèi)部的幾個(gè)執(zhí)行步驟
創(chuàng)建XMLHttpRequest對象(new XMLHttpRequest())
設(shè)置請求頭(setRequestHeader)
連接服務(wù)器(open())
設(shè)置回調(diào)(onreadyStateChange)
發(fā)送數(shù)據(jù)(send())
在回調(diào)函數(shù)中獲取數(shù)據(jù)
JSONP利用script標(biāo)簽可以跨域請求資源解決跨域問題。詳細(xì)解釋可以看徹底弄懂跨域問題
前端代碼/* * 原生js實(shí)現(xiàn)Ajax * */ function Ajax(params) { params = params || {}; params.data = params.data || {}; var _json = params.jsonp ? jsonp(params): json(params); // 判斷是json還是jsonp function json(params) { // 普通請求 params.type = (params.type || "GET").toUpperCase(); // 設(shè)置請求默認(rèn)類型 var urlData = formatParams(params.data); // 對數(shù)據(jù)進(jìn)行格式化 var xhr = null; // 對xhr進(jìn)行初始化 if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } var headers = params.headers || {}; if (params.type === "GET") { xhr.open(params.type, params.url + "?" + urlData, true); setHeaders(xhr, headers); xhr.send(null); } else { xhr.open(params.type, params.url, true); setHeaders(xhr, headers); xhr.send(JSON.stringify(params.data)); } xhr.onreadystatechange = function () { if (xhr.readyState === 4) { var status = xhr.status; if (status >= 200 && status < 300) { var response = ""; var type = xhr.getResponseHeader("Content-Type"); if (type.indexOf("xml") !== -1 && xhr.responseXML) { // xml格式 response = xhr.responseXML; } else if (type.indexOf("application/json") !== -1) { // JSON格式 response = JSON.parse(xhr.responseText); } else { response = xhr.responseText; // 字符串格式 } params.success && params.success(response); } else { params.error && params.error(status); } } } } function jsonp(params) { var callbackName = params.jsonp; // 回調(diào)函數(shù)名 var head = document.getElementsByTagName("head")[0]; params.data["callback"] = callbackName; var data = formatParams(params.data); var script = document.createElement("script"); head.appendChild(script); // 創(chuàng)建jsonp函數(shù),成功后自動(dòng)讓success函數(shù)調(diào)用,在自動(dòng)刪除 window[callbackName] = function (json) { // 設(shè)置回調(diào),獲取后臺數(shù)據(jù)后才執(zhí)行 head.removeChild(script); clearTimeout(script.timer); window[callbackName] = null; params.success && params.success(json); }; script.src = params.url + "?" + data; // 設(shè)置src的時(shí)候才開始向后臺請求數(shù)據(jù) if (params.time) { // 限定時(shí)間 script.timer = setTimeout(function () { window[callbackName] = null; head.removeChild(script); params.error && params.error({ message: "超時(shí)" }) }, params.time) } } function formatParams(data) { // 使用 encodeURIComponent 對 URI的某部分編碼 var arr = []; for (var key in data) { arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])); } // 添加隨機(jī)數(shù),防止緩存 arr.push("v=" + random()); return arr.join("&"); } function random() { return Math.floor(Math.random() * 10000 + 500); } function setHeaders(xhr, headers) { for (var key in headers) { xhr.setRequestHeader(key, headers[key]); } } }使用方法
不用jsonp請求
Ajax({ url: "后端接口", type: "POST", headers: { "Content-Type": "application/json", token: "xxx" }, success(res) { console.log(res); }, error(status) { console.log(`some error status = ${status}`); } })
jsonp請求
Ajax({ url: "http://localhost:8080", headers: { "Content-Type": "application/json" }, jsonp: "getUser", time: 2000, success(res) { console.log(res); }, error(status) { console.log(`some error status = ${status.msg}`); } })jsonp后臺配置代碼
var querystring = require("querystring"); var http = require("http"); var server = http.createServer(); server.on("request", function(req, res) { var params = querystring.parse(req.url.split("?")[1]); var fn = params.callback; // jsonp返回設(shè)置 res.writeHead(200, { "Content-Type": "text/javascript" }); var data = { user: "xbc", password: "123456" } res.write(fn + "(" + JSON.stringify(data) + ")"); res.end(); }); server.listen("8080"); console.log("Server is running at port 8080...");參考文章
原生 JavaScript 實(shí)現(xiàn) AJAX、JSONP
ajax 快速入門
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102007.html
摘要:希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí),老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡單 原文地址:Learning React.js is easier than you think 原文作...
摘要:同源策略,它是由提出的一個(gè)著名的安全策略,現(xiàn)在所有支持的瀏覽器都會(huì)使用這個(gè)策略。客戶端在對文件調(diào)用成功之后,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了,這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像,但其實(shí)并不一樣。 參考資料 一、先說說JSON 首先JSON是一種基于文本的數(shù)據(jù)交換方式,或者叫做數(shù)據(jù)描述格式。 JSON的優(yōu)點(diǎn): 基于純文本,跨平臺傳遞極其簡單; Javas...
摘要:只有兩種數(shù)據(jù)類型描述符,大括號和方括號,其余英文冒號是映射符,英文逗號是分隔符,英文雙引號是定義符。上述兩種集合中若有多個(gè)子項(xiàng),則通過英文逗號進(jìn)行分隔。鍵值對以英文冒號進(jìn)行分隔,并且建議鍵名都加上英文雙引號,以便于不同語言的解析。 由于Sencha Touch 2這種開發(fā)模式的特性,基本決定了它原生的數(shù)據(jù)交互行為幾乎只能通過AJAX來實(shí)現(xiàn)。當(dāng)然了,通過調(diào)用強(qiáng)大的PhoneGap插件然后...
摘要:只有兩種數(shù)據(jù)類型描述符,大括號和方括號,其余英文冒號是映射符,英文逗號是分隔符,英文雙引號是定義符。上述兩種集合中若有多個(gè)子項(xiàng),則通過英文逗號進(jìn)行分隔。鍵值對以英文冒號進(jìn)行分隔,并且建議鍵名都加上英文雙引號,以便于不同語言的解析。 由于Sencha Touch 2這種開發(fā)模式的特性,基本決定了它原生的數(shù)據(jù)交互行為幾乎只能通過AJAX來實(shí)現(xiàn)。當(dāng)然了,通過調(diào)用強(qiáng)大的PhoneGap插件然后...
摘要:當(dāng)請求完成后注冊一個(gè)回調(diào)函數(shù)。該請求是否觸發(fā)全局處理事件如等,請求發(fā)送前的回調(diào)函數(shù),用來修改請求發(fā)送前,此功能可用來設(shè)置自定義頭信息,在函數(shù)中返回將取消這個(gè)請求。例如,為請求指定一個(gè)回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的,默認(rèn)就是傳入的整個(gè)對象。 Ajax Ajax 全稱是 asynchronous javascript and xml,并不是新的編程語言,可以說是已有技術(shù)的組合,主要用來實(shí)現(xiàn)客...
閱讀 695·2021-11-15 11:37
閱讀 3316·2021-10-27 14:14
閱讀 6038·2021-09-13 10:30
閱讀 2961·2021-09-04 16:48
閱讀 1926·2021-08-18 10:22
閱讀 2125·2019-08-30 14:19
閱讀 728·2019-08-30 10:54
閱讀 1745·2019-08-29 18:40