ASP.NET_AJAX生命週期事件流_AJAX技術跟傳統網頁不同優缺點比較

-
AJAX技術跟傳統網頁不同
傳統網頁技術採取同步(要等待、排隊)互動過程，Client端跟Server端一來一往的過程。
使用者向伺服器端發送請求
伺服器依照Client端請求執行相應邏輯再回傳結果
也因為這樣不連續過程
當伺服器忙線時候用戶就會有一段等待時間



優點

優點1.迅速網頁刷新
Ajax技術主要就是用Browser內建的Js運行HTTP通訊功能，藉此來進行和Server有效率的溝通，達到比較完善更具人性化的網頁互動效果。

優點2.透過非同步請求技術
Ajax可不用更新全部整個網頁葉面，且能多次傳送要更新的目標部分範圍跟資料。
換言之，Browser只需要於必要時跟Server溝通獲取資料即可，因而間接達到所謂快速而有效率的網頁刷新效果。

優點3.Client端分擔一些原應於Server上執行的程式
此外，也改善Server Loading問題，由於Ajax是將部分js程式送至於Client端電腦上
透過Browser進行生成網頁元件方式，來降低Server的Loading。

優點4.減少網路流量
Ajax傳送資料量由於是部分的而非傳統的整個網頁，因此
使網路較不易塞車加速其網頁更新速度。

缺點

缺點1.跨瀏覽器相容性問題(早期的問題)
必須要符合EMCA標準、W3C標準的瀏覽器，若是早期IE則可能常遇到不支援問題。

缺點2.javascript程式碼公開
由於程式碼實作於Client端，因此大家都能看的到，也使開發者較難保護智慧財產權。


缺點3.Ajax只能於相同網域下的Server做通訊，如果是要讀取不同網域資料則要透過類似CGI等方式才可能跨Server溝通。

缺點4.使用者容易無感在必要時需要給予提示訊息、進度顯示
傳統網頁可能在按鈕點擊查詢會有轉圈圈等待的圖示顯示，使用者會知道在查詢要等待。
但換到Ajax後容易沒有感覺，因而可能有重複按按鈕的行為發生。

缺點5.安全疑慮
由於不必刷新整個網頁，大部分業務操作都在遠端Browser因而容易有資料被竄改的風險。
例如下訂單金額被改成0，免費就購買成功等可怕的問題也會發生。





ASP.NET AJAX生命週期事件流

一個完整的ASP.NET  AJAX生命週期示意圖






Sys.WebForms.PageRequestManager 這個Class主要就是負責.NET AJAX(部分刷新)業務的核心

PageRequestManager是ASP.NET ScriptManager控件渲染到用戶端(前端)
對應的客戶端JS物件，啟用部分更新時，將由這個JavaScript物件管理
瀏覽器上發生的異步回送和更新。





若要得到PageRequestManager物件實體
則可以透過



Sys.WebForms.PageRequestManager會有如下幾種Event(如上面示意圖撇除load之外的)

1.initializeRequest事件：
Raised during the initialization of the asynchronous postback.

Raised before an asynchronous request starts. You can use this event to cancel a postback, such as to give precedence to another asynchronous postback.

The initializeRequest event takes an eventargs parameter, which is a Sys.WebForms.InitializeRequestEventArgs object. This object makes available the element that caused the postback and the underlying request object. InitializeRequestEventArgs also exposes a cancel property. If you set cancel to true, the new postback is canceled.

觸發時機：當一個異步請求的回送被初始化之前引發。

當發生一次Async Postback時，一開始會觸發的Event。
PageRequestManager將會觸發一個客戶端事件initializeRequest 
(服務器請求的早期階段，會發生於任何異步請求處理之前)
此時，可以利用觸發該事件的DOM元素的信息來取消某個特定的異步調用，或為某個異步回送指定更高的優先級。

通常利用initailizeRequest事件來取消一個異步回送（正在進行的回送和將要初始化的回送）


使用語法：
添加事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initFunc);

.add_initializeRequest(myInit);
function myInit(sender,args){...}

移除事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().remove_initializeRequest(initFunc);

.remove_initializeRequest(myInit);
function myInit(sender,args){...}


1
2
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequestHandler)
Sys.WebForms.PageRequestManager.getInstance().remove_initializeRequest(initializeRequestHandler)

  (PS:initFunc是該頁面初始化之前要執行的客戶端方法。)

1
2
3
4
5
6
7
8
function initFunc(sender,args)
{
    //args的資料類型是：InitializeRequestEventArgs類型。
    //args.get_postBackElement()：取得初始化異步回送的元素物件。
    //args.get_postBackElement().id取得初始化異步回送的元素物件的id號
    //args.get_postBackElement().value取得初始化異步回送的元素物件的value值 
    //args.set_cancel(bool)：取消初始化異步回送，即丟棄該異步回送。
}



2.beginRequest事件 :
Raised before the processing of an asynchronous postback starts and the postback request is sent to the server.

Raised before an asynchronous postback starts and the postback is sent to the server. If there is a postback already processing, it is stopped (by using the abortPostBack method). You can use this event to set request headers or to begin an animation on the page to indicate that the request is in process.

The beginRequest event takes an eventargs parameter, which is a Sys.WebForms.BeginRequestEventArgs object. This object makes available the element that caused the postback and the underlying request object.

觸發時機：在異步(非同步)請求初始化完成，且向服務器提出請求之前引發。
(PS:執行到此階段時候就不允許透過程式檔來刷新事件。)

通常在beginRequest事件中設置標頭，或是初始化一個動化告知用戶正在進行請求處理。


添加事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginFunc);

移除事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(beginFunc);


(PS:beginFunc是向服務器提出請求之前要執行的客戶端方法。)

1
2
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler)
Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(beginRequestHandler)



1
2
3
4
5
function beginFunc(sender,args)
{
     //args的數據類型是：BeginRequestEventArgs類型。
     //args.get_postBackElement()：取得初始化異步回送的元素對象。
}

3.pageLoading事件

Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated.

Raised after the response from the server to an asynchronous postback is received, but before any content on the page is updated. You can use this event to provide a custom transition effect for updated content.

The pageLoading event takes an eventargs parameter, which is an Sys.WebForms.PageLoadingEventArgs object. This object makes available information about what panels will be deleted and updated as a result of the most recent asynchronous postback.


觸發時機：異步回送已經被服務器接收並響應，但還沒有對頁面進行任何更新之前引發。

添加事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(loadingFunc);

移除事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().remove_pageLoading(loadingFunc);

(PS:loadingFunc是頁面更新之前要執行的客戶端方法)

1
2
3
4
5
6
7
function loadingFunc(sender,args)
{
   //args的數據類型是：PageLoadingEventArgs型態。
   //args代表內容將要被更新或刪除的UpdatePanel控件的<div>。
   //var arr = args.get_panelsDeleting(); 取得將被刪除的各個UpdatePanel控件的<div> 
   //var arr = args.get_panelsUpdating();取得將被更新的各個UpdatePanel控件的<div>
}



4.pageLoaded事件

Raised after all content on the page is refreshed as a result of either a synchronous or an asynchronous postback.


Raised after all content on the page is refreshed, as a result of either a synchronous or an asynchronous postback. For synchronous postbacks, panels can only be created, but for asynchronous postbacks, panels can be both created and updated. You can use this event to manage a custom transition effect for updated content.

The pageLoaded event takes an eventargs parameter, which is an Sys.WebForms.PageLoadedEventArgs object. This object makes available information about which panels were updated and created in the most recent postback.



添加事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(loadedFunc);

移除事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(loadedFunc); 

(PS:loadedFunc是頁面更新後要執行的客戶端方法)

1
2
3
4
5
6
7
function loadedFunc(sender,args) 
{
     //args的數據類型是：PageLoadedEventArgs類型
     //args代表更新的或創建的UpdatePanel控件的<div>
     //var arr = args.get_panelsUpdated();取得被更新的各個UpdatePanel控件的<div>
     //var arr = args.get_panelsCreated();取得新創建的各個UpdatePanel控件的<div>
}



5.endRequest事件
Raised after an asynchronous postback is finished and control has been returned to the browser.

Raised after the response for an asynchronous postback is processed and the page is updated, or during the processing of the response if there is an error. If an error occurs, the page is not updated. Use this event to provide customized error notification to users or to log errors.

The endRequest event takes an eventargs parameter, which is a Sys.WebForms.EndRequestEventArgs object. This object makes available information about errors that have occurred and whether the error was handled. It also makes available the response object.



觸發時機：回送請求處理完畢後，就會引發endRequest事件。

添加事件處理代碼：
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endFunc);
移除事件處理代碼：Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(endFunc); 


(PS:endFunc是頁面請求完成後執行的客戶端方法)

1
2
3
4
5
6
7
8
function endRequest(sender,args)
{
    //args的數據類型是：EndRequestEventArgs類型
    //var err = args.get_error()：判斷是否發生錯誤，並取得錯誤物件。
    //var em = args.get_error().message：取得錯誤的出錯信息。
    //args.set_errorHandled(true)：設置錯誤已被處理。
    //var gm = args.get_errorHandled()：判斷錯誤是否被處理。
}

異步請求發生異常後，如果不在Client端捕獲處理的話，
PageRequestManager物件會將以對話框的形式彈出異常的信息。
如果想自己編寫錯誤處理代碼，而不交由PageRequestManager物件處理的話。
可以通過args.get_error().message屬性取得錯誤信息，然後編寫異常處理代碼，最後記得
執行args.set_errorHandled(true)。這樣就阻止異常繼續回返給PageRequestManager物件。



Reference:



AJAX Client Life-Cycle Events
Client Events of the Application and PageRequestManager Classes
https://docs.microsoft.com/en-us/previous-versions/aspnet/bb386417(v=vs.100)?redirectedfrom=MSDN



Stage1.
Sys.WebForms.PageRequestManager initializeRequest Event
https://docs.microsoft.com/en-us/previous-versions/bb397460(v=vs.100)?redirectedfrom=MSDN

Stage2.
Sys.WebForms.PageRequestManager beginRequest Event
https://docs.microsoft.com/en-us/previous-versions/bb397432(v=vs.100)?redirectedfrom=MSDN

Stage3.
Sys.WebForms.PageRequestManager pageLoading Event
https://docs.microsoft.com/en-us/previous-versions/bb383832(v=vs.100)?redirectedfrom=MSDN


Stage4.
Sys.WebForms.PageRequestManager pageLoaded Event


Microsoft AJAX Library

















留言

張貼留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

-
圖片
當談到貨物的重量時，往往會分成所謂的淨重(Net Weight)與毛重(Gross Weight)。 會有以下公式關係存在 淨重=毛重-皮重(包裝物的重量) 毛重=淨重+皮重 淨重( Net Weight 縮寫為N.W.) 指物品本身的重量，不包括容器或包裝材料的重量。 凈重是國際貿易中最常見的計重辦法。 例如，如果運輸原材料，原材料的重量就是所運輸貨物的淨重。包裝原材料的容器或包裝不計入淨重。同樣地，當我們考慮一罐豆子時，罐子內所含物品的重量就算作淨重。因此，淨重將包括豆子、罐頭里的任何液體，以及保存豆子所含的物品。 大多數 以重量為計價的貨物買賣 ，採用此計價方法。 若合同中並未明確規範以何種方式計量和計價時，按慣例以凈重計價。 毛重( Gross Weight 縮寫G.W.) 貨物連同它的包裝的重量，是你托運的所有物品的總重量。 皮重(Tare Weight) 指商品外包裝材料的重量(即運輸包裝的重量)，不包括內包裝材料和襯墊物的重量。 比方一個空的貨櫃、容器、或任何包裝材料的重量。 Net Net Weight純淨重 (指從Net Weight中扣除內包裝後的重量) 進出口商品為了因應運輸及消費需求, 一般都有內包裝與外包裝。 一般在買賣合同與信用狀中,通常只要求於裝箱單上註明Gross Weight和Net Weight即可, 但有些L/C 要求 Net Net Weight,大多是海關徵收從量稅時的依據 運輸重量對於航運業或者航空運輸等各自都通用這些術語 為何特別在意重量? 主要就在於會影響像是傳輸安全乘載限制。 就運輸層面(不同方式的運輸) 航空運輸：對機長而言，毛重包括皮重、產品淨重以及飛機、燃料、乘客和機組人員的重量。 公路/鐵路運輸:對於火車車長而言，毛重包括產品淨重、皮重和運輸車輛的重量。 水路航運運輸：對船長而言，毛重就是淨重和皮重之和。 就公司ERP成本角度 成本一般都會採用 "淨重" 主要是因為若用毛重，可能會有輔材不可控因素存在 比方一個 5cm 固定塑膠件，今天用一個 10cm 紙箱測重，明天用一個 100cm 紙箱測重，那可能就容易導致ERP資料比較會失真。 就物流層面來探討 通常還會有一名詞即所謂「實際重量」(Actual Weight) 根據稱重(過磅)所得到的重量，實際重量分為實際毛重(Gross Weig...
閱讀完整內容

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

-
圖片
一個應用程式(軟體) 不管是  互動拍照 也好、 投影也好、車牌偵測... 舞台演唱會後方電視牆的互動應用程序、 粒子特效、3D或2D遊戲  等等 開發者通常都需要在一開始做規劃 ㄟ  假設我今天要寫 跟影像有關 可能需要偵測、可能需要提取前景、可能需要偵測圓形 之類的 我有  emgucv 、AForge.Net、 opencv 等等可以用 但是 假設我今天要做的應用程序是需要有視窗介面的~~ emgucv 跟 C# windows form 媒合性 就很高 而且直接在 visual studio 做開發 opencv 我可能還需要依賴 Qt 之類等等  framework 假設我今天是要寫一個 演唱會電視牆互動粒子特效 可能就會挑   openframeworks  、 processing 、kinect 來寫互動 Achitecture  --->全稱 :  Software Architecture   軟體架構 Achitecture   由好多 framework 組成 軟體架構（Software Architecture）是一種軟體在開發前的設計藍圖， 用來告訴軟體的結構，功能，介面，用法，與其他系統的構連以及資料交換等等規範， 但它並沒有叫你要用什麼方式實作， 因此軟體架構通常會產生文件，圖樣，原型以及規格等， 就是沒有可用的程式碼，因為那不是軟體架構應該有的東西， 就像蓋房子時是給你藍圖，而不是一幢蓋好的房子。 軟體框架（Framework):是一個已經成形的方法，而且有程式碼實體 （例如鋼構工法也是要有鋼材才能做），並且會告訴你要如何使用它 （即 Framework Documentation，MSDN Library 即為一最佳例子）
閱讀完整內容

經得起原始碼資安弱點掃描的程式設計習慣培養(五)_Missing HSTS Header

-
圖片
  接續前幾篇系列 經得起原始碼資安弱點掃描的程式設計習慣培養(一)_OWASP Top 10(十大網站安全風險)_學習寫更安全程式碼的網站推薦 經得起原始碼資安弱點掃描的程式設計習慣培養(二)_8.Insecure Deserialization ：不安全的反序列化漏洞ASP.NET處理方式 經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients 經得起原始碼資安弱點掃描的程式設計習慣培養(四)_1.Injection注入攻擊_SQL Injection)_order by 語句正確參數化套入 最近又遇到被若安掃描到高風險要修正的程式碼啦.... 一看這還真是搞不懂該怎麼修呢 HSTS(HTTP Strict Transport Security)  主要是一份國際標準規格 (RFC 6797) 的網際網路瀏覽安全機制， 用於宣告瀏覽器與伺服器之間通訊方式必須強制採用 TLS/SSL 加密通道。 只要從伺服器端送出一個 Strict-Transport-Security 標頭 (Header) 給瀏覽器，即可告知瀏覽器於未來的某段時間內一律使用 SSL 來和該網站連接 (設定可涵蓋所有子域名網站)， 一旦發生憑證失效情況，使用者將無法再瀏覽該網站，如此一來便可大幅減少中間人攻擊的問題發生。 再更白話一點 HSTS Header 就是負責將 http 強制轉為 https CheckMarx掃碼報告給的說明 ============================================================ 風險: 如果web config沒有設置HSTS表頭、"max-age"(有效期)不足一年， 或沒有設定"includeSubDomains"(包含所有子網域)，可能會使用戶容易遭受中間人攻擊。 發生原因: 許多使用者只要在瀏覽器的網址列輸入網域名稱(Domain Name)即可瀏覽網站， 並沒有輸入協定(Protocol)的名稱。 瀏覽器會自動假設使用者使用的是HTTP協定而不是有加密機制的HTTPS協定。 在第一次發出前往特定網站的請求時，攻擊者可以執行中間人攻擊並將用戶轉址到...
閱讀完整內容