自己封裝的一個Ajax小框架

来源:https://www.cnblogs.com/skyzou/archive/2020/02/13/12305043.html

在經歷了Jsp實訓的慘痛教訓後,特意花了點時間學習Ajax,學完後自我感覺良好,於是寫瞭如下一個小框架: 1 /** 2 * frameAjax 3 * 4 * 參數: 5 * paramsObj: Json 6 * required params: 7 * type:請求參數類型(String) ...


在經歷了Jsp實訓的慘痛教訓後,特意花了點時間學習Ajax,學完後自我感覺良好,於是寫瞭如下一個小框架:

 1 /**
 2 * frameAjax 
 3 * 
 4 * 參數:
 5 * paramsObj: Json
 6 * required params:
 7 * type:請求參數類型(String)
 8 * url:請求地址(String)
 9 * data:請求參數(Json),data可為空值。
10 * success:請求回調(Function)
11 * async:表示請求是否非同步處理。預設為true,表示非同步,可省略不寫。
12 * 
13 */
14 
15 (function () {
16     function frameAjax(paramsObj) {
17         //處理請求參數
18         var arr = [];
19         for (var pro in paramsObj.data) {
20             arr.push(pro + '=' + paramsObj.data[pro]);
21         }
22         var data = arr.join("&");  //用“&”拼接請求參數
23         var async = true; //預設非同步
24         if (paramsObj.async) {  //判斷是否非同步處理
25             async = paramsObj.async;
26         }
27 
28         //創建Ajax引擎對象
29         var ajax = getAjax();
30         //覆寫onreadystatement函數
31         ajax.onreadystatechange = function () {
32             //判斷Ajax狀態碼
33             if (ajax.readyState == 4) {
34                 //判斷響應狀態碼
35                 if (ajax.status == 200) {
36                     if (paramsObj.success) {
37                         paramsObj.success(ajax);
38                     }
39                 } else if (ajax.status == 404) {
40                     console.error("請求資源不存在");
41                 } else if (ajax.status == 500) {
42                     console.error("伺服器繁忙");
43                 }
44             }
45         }
46 
47         //發送請求
48         if (paramsObj.type.toLowerCase() == "get") {
49             ajax.open("get", paramsObj.url + (data == null ? "" : "?" + data), async);
50             ajax.send(null);
51         } else if (paramsObj.type.toLowerCase() == "post") {
52             ajax.open("post", paramsObj.url, async);
53             ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
54             ajax.send(data);
55         } else {
56             console.log("請求類型錯誤");
57         }
58     }
59 
60     //獲取請求對象
61     function getAjax() {
62         var ajax;
63         if (window.XMLHttpRequest) { //火狐
64             ajax = new XMLHttpRequest();
65         } else if (window.ActiveXObject) { //IE
66             ajax = new ActiveXObject("Msxml2.XMLHTTP");
67         }
68         return ajax;
69     }
70     //將框架封裝於window對象中
71     window.frameAjax = frameAjax;
72 }())

 


您的分享是我們最大的動力!

更多相關文章
  • 在SwiftUI中顯示模態視圖 簡介 這裡教大家如何彈出一個簡單的模態視圖。分別有兩個頁面,ContentView和GCPresentedView,以下對應簡稱為A和B。我們要做的是在A視圖中點擊按鈕跳轉到B視圖,然後再從B視圖點擊按鈕返回到A視圖。 步驟 在A視圖中創建按鈕和模態視圖代碼 使用 對 ...
  • css sprite 俗稱:精靈圖,雪碧圖,指將整個頁面不同的圖片or圖標合併在一張圖上;優點:使用CSS Sprite 可以減少網路請求,提高網頁載入性能,不會出現網頁上端載入完畢下麵還在載入中這一問題 缺點:如果後期更改其中某一圖標,且其像素大小發生改變,需要重新對所有圖標進行定位 精靈圖製作: ...
  • 什麼是選擇器?選擇器的作用是通過它可以找到元素,把css樣式傳遞給元素!css選擇器主要分為:基本選擇器、屬性選擇器、組合選擇器與偽類選擇器四個大類!基本選擇器又分為:*通配符、標簽選擇器、class選擇器、id選擇器,在這裡需要註意的編程思想在css層疊樣式表中元素有且僅有一個id。註意以下幾點1... ...
  • css原理:1.優先原則=>後解析的內容會覆蓋之前解析的內容(所謂解析就是讀取的css樣式)2.繼承原則=>嵌套裡面的標簽擁有外部標簽的某些樣式,子元素可以繼承父元素的屬性 1》優先原則針對選擇器:a.同一個選擇器從上往下讀取執行css樣式 b.同一類選擇器從上往下執行 c.不同類型的選擇器優先順序,... ...
  • 在移動端做了個導航,長這樣 原來結構是用的span <span class="menu_icon"> <img src="img/icon_1.png"> <p>導航</p> </span> 綁定用的是jquery的.click $('.menu_icon').click(function () { ...
  • css是什麼?不需要瞭解太多文字類介紹,記住css是層疊樣式表,HTML是頁面結構,css負責頁面樣式,javascrt負責靜態頁面的交互。CSS能夠對網頁中元素位置的排版進行像素級精確控制,擁有對網頁對象和模型樣式編輯的能力。詳情參考css百度百科瞭解其發展歷史,語言特點與語言基礎等,也是有好處的... ...
  • 轉自:貓貓小屋--js獲取url後參數信息 摘要: 下文講述javascript中使用js代碼獲取url地址後面的參數值的方法分享,如下所示; 實現思路: 使用正則表達式對參數值進行匹配,獲取參數後的相關值 例: 獲取url:http://www.maomao365.com?name=test123 ...
  • 項目創建完成,啟動正常,接下來就是項目打包了。將測試Demo打包成exe桌面應用,點擊exe文件,運行項目。 書接上文,創建項目有三種方式 Git拷貝、直接創建;通過electron社群提供的命令行工具(CLI) electron-forge 創建項目,看起來對應的項目打包方式也應該有三種才對,但其 ...
一周排行
  • 微信公眾號dotnet跨平臺2020年初做的一個關於中國.NET開發者調查收到了開發者近 1400 條回覆。這份調查報告涵蓋了開發者工具鏈的所有部分,包括編程語言、應用架構、應用伺服器、運行時平臺、框架技術、框架配置、IDE、.NET/.NET Core 發行版部署模式、構建工具和Kubernete... ...
  • Winform控制項的雙緩衝。控制項的雙緩衝屬性是隱藏的,可以通過反射改變其屬性值。 lv.GetType().GetProperty("DoubleBuffered", BindingFlags.Instance | BindingFlags.NonPublic).SetValue(lv, true, ...
  • 1. 需求 上圖這種包含多選(CheckBox)和單選(RadioButton)的菜單十分常見,可是在WPF中只提供了多選的MenuItem。順便一提,要使MenuItem可以多選,只需要將MenuItem的 屬性設置為True: 不知出於何種考慮,WPF沒有為MenuItem提供單選的功能。為了在 ...
  • gRPC的結構 在我們搭建gRPC通信系統之前,首先需要知道gRPC的結構組成。 首先,需要一個server(伺服器),它用來接收和處理請求,然後返迴響應。 既然有server,那麼肯定有client(客戶端),client的作用就是向server發送請求,具體就是生成一個請求,然後把它發送到ser ...
  • 區別 OpenId: Authentication :認證 Oauth: Aurhorize :授權 輸入賬號密碼,QQ確認輸入了正確的賬號密碼可以登錄 認證 下麵需要勾選的覆選框(獲取昵稱、頭像、性別) 授權 OpenID 當你需要訪問A網站的時候,A網站要求你輸入你的OpenId,即可跳轉到你的 ...
  • 前言 預計是通過三篇來將清楚asp.net core 3.x中的授權:1、基本概念介紹;2、asp.net core 3.x中授權的預設流程;3、擴展。 在完全沒有概念的情況下無論是看官方文檔還是源碼都暈乎乎的,希望本文能幫到你。不過我也是看源碼結合官方文檔看的,可能有些地方理解不對,所以只作為參考 ...
  • 簡介 基於生產者消費者模式,我們可以開發出線程安全的非同步消息隊列。 知識儲備 什麼是生產者消費者模式? 為了方便理解,我們暫時將它理解為垃圾的產生到結束的過程。 簡單來說,多住戶產生垃圾(生產者)將垃圾投遞到全小區唯一一個垃圾桶(單隊列),環衛將垃圾桶中的垃圾進行處理(消費者)。就是一個生產者消費者 ...
  • 很多時候,需要對類中的方法進行一些測試,來判斷是否能按要求輸出預期的結果。 C#提供了快速創建單元測試的方法,但單元測試不僅速度慢不方便,大量的單元測試還會拖慢項目的啟動速度。 所以決定自己搞個方便的測試用例。 控制台一句話調用。 測試用例.註冊並Print(EnumEx.Name); 結果畫面: ...
  • 常成員函數不能改變數據成員的值,例如定義坐標類Coordinate,成員函數changeX():void Coordinate::changeX(){ x = 10;}雖然changeX()沒有參數,但是它隱含一個參數——this指針:void Coordinate::changeX(Coordin... ...
  • 因為新冠肺炎疫情,診所還沒復工。這是在家用手機敲的,代碼顯示有問題。等復工以後在電腦上改,各位先湊和看吧。 支持向量機(Support Vector Machine, SVM)是一種基於統計學習的模式識別的分類方法,主要用於模式識別。所謂支持向量指的是在分割區域邊緣的訓練樣本點,機是指演算法。就是要找 ...
x