摘要:封裝文件封裝例如命令數據用來記錄每次請求的唯一標識唯一標識生成方法模塊主體獲取失敗比對請求保證返回結果的正確性重復請求有可能會帶來返回結果不可靠的問題的默認設置服務器已經錯誤將大于的數字位以上包裹雙引號避免溢出這里是根據后臺
封裝 jquery ajax 文件
/** * 封裝 jquery ajax * 例如: * ajaxRequest.ajax.triggerService( * "apiCommand", [命令數據] ) * .then(successCallback, failureCallback); * ); */ var JSON2 = require("LibsDir/json2"); var URL = "../AjaxHandler.aspx?r="; // 用來記錄每次請求的唯一標識 var requestIdentifier = {}; // 唯一標識生成方法 function generateGUID() { var d = new Date().getTime(); if (typeof performance !== "undefined" && typeof performance.now === "function") { d += performance.now(); } return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c === "x" ? r : (r & 0x3 | 0x8)).toString(16); }); } // 模塊主體 var ajaxRequest = ajaxRequest || {}; (function ($) { if (!$) { throw "jquery獲取失敗!"; } ajaxRequest.json = JSON2; ajaxRequest.ajax = function (userOptions, serviceName, requestId) { userOptions = userOptions || {}; var options = $.extend({}, ajaxRequest.ajax.defaultOpts, userOptions); options.success = undefined; options.error = undefined; return $.Deferred(function ($dfd) { $.ajax(options) .done(function (result, textStatus, jqXHR) { if (requestId === requestIdentifier[serviceName]) { // 比對請求id, 保證返回結果的正確性 (重復請求有可能會帶來返回結果不可靠的問題) ajaxRequest.ajax.handleResponse(result, $dfd, jqXHR, userOptions, serviceName, requestId); } }) .fail(function (jqXHR, textStatus, errorThrown) { if (requestId === requestIdentifier[serviceName]) { // jqXHR.status $dfd.reject.apply(this, arguments); userOptions.error.apply(this, arguments); } }); }); }; $.extend(ajaxRequest.ajax, { // $.ajax() 的默認設置 defaultOpts: { // url: "../AjaxSecureHandler.aspx, dataType: "json", type: "POST", contentType: "application/x-www-form-urlencoded; charset=UTF-8" }, handleResponse: function (result, $dfd, jqXHR, userOptions, serviceName, requestId) { if (!result) { $dfd && $dfd.reject(jqXHR, "error response format!"); userOptions.error(jqXHR, "error response format!"); return; } // 服務器已經錯誤 if (result.ErrorCode != "200") { $dfd && $dfd.reject(jqXHR, result.ErrorMessage); userOptions.error(jqXHR, result); return; } if (result.Data) { // 將大于2^53的數字(16位以上)包裹雙引號, 避免溢出 var jsonStr = result.Data.replace(/(:s*)(d{16,})(s*,|s*})/g, "$1"$2"$3"); var resultData = ajaxRequest.json.parse(jsonStr); $dfd.resolve(resultData); userOptions.success && userOptions.success(resultData); } else { $dfd.resolve(); userOptions.success && userOptions.success(); } }, buildServiceRequest: function (serviceName, input, userSuccess, userError, ajaxParams) { // 這里是根據后臺要求構建的 var requestData = { MethodAlias: serviceName, // 方法名 Parameter: input // 傳遞的參數 }; var request = $.extend({}, ajaxParams, { // 這里要對傳遞的 JSON 字符串參數數據使用 escape 方法進行編碼 // "data=" 是根據項目約定增加的,與 contentType 相對應 data: "data=" + escape(ajaxRequest.json.stringify(requestData)), success: userSuccess, error: function (jqXHR, textStatus, errorThrown) { // 這里是在請求出錯的時候做一個統一處理, 輸出方法名和錯誤對象 console.log(serviceName, jqXHR); if (userError && (typeof userError === "function")) { userError(jqXHR, textStatus, errorThrown); } } }); return request; }, // 構建參數對象, 生成唯一標識, 觸發請求 triggerService: function (serviceName, input, success, error, ajaxParams) { var request = ajaxRequest.ajax.buildServiceRequest(serviceName, input, success, error, ajaxParams); // 生成此次 ajax 請求唯一標識 var requestId = requestIdentifier[serviceName] = generateGUID(); request.url = URL + requestId; return ajaxRequest.ajax(request, serviceName, requestId); } }); })(jQuery); module.exports = ajaxRequest;api 文件示例
/** * api 接口定義 * 這個示例中假設后臺服務要求接受數組形式的參數 */ var ajaxRequest = require("../common/ajax-request"); // ajax 封裝 var JSON2 = require("LibsDir/json2"); // 請求數據方法 var apiService = (function () { var request = {}; // 產品列表 (參數需要進一步處理的情況) request.getProductListData = function (conditionObj) { return ajaxRequest.ajax.triggerService("SearchProductList", [JSON2.stringify(conditionObj)]); }; // 搜索熱詞 (參數為空的情況) request.getHotWords = function () { return ajaxRequest.ajax.triggerService("GetSearchHotKeys", []); }; // 獲取用戶配置 request.getUserConfig = function () { return ajaxRequest.ajax.triggerService("GetUserConfig", []); }; // 設置用戶配置 request.setUserConfig = function (params) { return ajaxRequest.ajax.triggerService("SetUserConfig", [params]); }; return request; })(); module.exports = apiService;業務代碼中調用 api 接口
// 綜合搜索熱詞查詢 apiService.getHotWords() .then(function (result) { if (result.length > 0) { // 成功回調 // handleResult(result); } }) .fail(function (err) { console.log("GetSearchHotKeys: ", err); // 失敗回調 handleResult(); });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103026.html
摘要:簡要說明前面我寫了一篇方法封裝及文件設計文檔,主要用來說明我們在項目中通常會對的方法進行進一步的封裝處理,便于我們在業務代碼中使用。這篇文檔我們主要對封裝的方法進行一個簡要說明。 簡要說明 前面我寫了一篇《jquery ajax 方法封裝及 api 文件設計》文檔,主要用來說明我們在項目中通常會對 jquery 的 ajax 方法進行進一步的封裝處理,便于我們在業務代碼中使用。從那篇文...
摘要:學編程真的不是一件容易的事不管你多喜歡或是多會編程,在學習和解決問題上總會碰到障礙。熟練掌握核心內容,特別是和多線程初步具備面向對象設計和編程的能力掌握基本的優化策略。 學Java編程真的不是一件容易的事,不管你多喜歡或是多會Java編程,在學習和解決問題上總會碰到障礙。工作的時間越久就越能明白這個道理。不過這倒是一個讓人進步的機會,因為你要一直不斷的學習才能很好的解決你面前的難題...
摘要:今天給大家寫一篇關于在中的應用及封裝,有些同學可能會有疑問,因為熟悉的都知道,中有和是專門用于交互的,那么豈不是多此一舉嗎其實不然,有的優勢,并且小編本身對有著特殊的感情,今天就給大家詳細詳解在中的應用。 今天給大家寫一篇關于ajax在vue中的應用及封裝,有些同學可能會有疑問,因為熟悉vue的都知道,vue中有vue-resource和axios是專門用于http交互的,那么ajax...
摘要:今天給大家寫一篇關于在中的應用及封裝,有些同學可能會有疑問,因為熟悉的都知道,中有和是專門用于交互的,那么豈不是多此一舉嗎其實不然,有的優勢,并且小編本身對有著特殊的感情,今天就給大家詳細詳解在中的應用。 今天給大家寫一篇關于ajax在vue中的應用及封裝,有些同學可能會有疑問,因為熟悉vue的都知道,vue中有vue-resource和axios是專門用于http交互的,那么ajax...
閱讀 3077·2021-09-22 15:20
閱讀 2600·2019-08-30 15:54
閱讀 1966·2019-08-30 14:06
閱讀 3114·2019-08-30 13:05
閱讀 2456·2019-08-29 18:36
閱讀 567·2019-08-29 15:10
閱讀 522·2019-08-29 11:17
閱讀 817·2019-08-28 18:11