理解ajax技術，封裝原生 ajax請求

阿新 • • 發佈：2019-01-01

// 舉例1：jquery 的 ajax 請求如下 $.ajax({ url: 'http://118.31.238.237:8080/metro/get', //請求地址 type: 'GET', //請求方式 data: {cityId:2}, //請求引數 dataType: 'json', success: (response) => { console.log(response) } }); // 舉例2：封裝的原生ajax 請求如下

function ajaxMy(options) { let { url, type, data, dataType, success, fail, } = options; // 處理引數 type = type.toUpperCase(); dataType = dataType ? dataType : 'json'; let xhr = null

; // 1. 建立 xhr 物件 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { //IE6及其以下版本瀏覽器 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } // 2. 初始化並傳送請求 if (type === 'GET') { // 處理 get 方式的請求引數 let requestParams = '?'

; for (let [key, value] of Object.entries(data)) { requestParams += `${key}=${value}&`; } requestParams = requestParams.slice(0, -1); xhr.open('GET', url + requestParams); xhr.send(null); } else if (type === 'POST') { // 將請求資料放到請求主體中，並沒有傳送 xhr.open("POST", options.url, true); //設定表單提交時的內容型別 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 傳送請求 xhr.send(data); } // 3. 監聽 xhr.onreadystatechange = () => { if (xhr.readyState ===4) { if (xhr.status >= 200 && xhr.status < 300) { success && success(JSON.parse(xhr.responseText)); } else { fail && fail(xhr.status) } } } } ajaxMy({ url: 'http://118.31.238.237:8080/metro/get', type: 'GET', data: {cityId:2}, dataType: 'json', success: (response) => { console.log(response) } });

理解ajax技術，封裝原生 ajax請求

理解ajax技術，封裝原生 ajax請求

【ajax技術學習】原生ajax表單使用者名稱驗證

HTML-封裝原生Ajax

利用jquery實現Ajax技術，post方式傳值中文亂碼問題的解決辦法。

通過Ajax技術，將陣列型別資料轉換為JSON格式的物件

AJAX回顧， JSON, JQUERY AJAX

封裝原生jsonp請求

ajax技術詳解，封裝一個原生的ajax請求

js源碼模仿 jquery的ajax的獲取數據（get，post ）的請求封裝

原生ajax的請求封裝get和post

python原生程式碼（無框架，無AJAX技術）前後端資料互動

Ajax幾種請求方式(jQuery, XMLHttpRequest)，原生Ajax, Django

js原生ajax請求利用promise封裝函式

接上一篇原生ajax請求支付的文章，一直系統連線錯誤ALI40247錯誤

原生js封裝的ajax請求

解決jquery ajax在跨域訪問post請求的時候，ie9以下無效（包括ie9）的問題

jQuery基礎（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/異步請求數據）

瀑布流原生ajax，demo

Web應用程序開發，基於Ajax技術的JavaScript樹形控件

使用原生AJAX 發送異步請求實現常用的用戶登錄效果

理解ajax技術，封裝原生 ajax請求

相關推薦