遅かれ早かれWebプログラミングに携わるすべての人は、サーバーへの非同期リクエストを実装し、返された結果を処理するタスクに直面します。
Asp.netを見ると、Microsoftのスタッフは私たちの生活を楽にするために素晴らしい仕事をしました。 しかし、私の頭の中には、ある種のマニアックなアイデアがあり、何かの使用を禁止しています。その原理は私には理解できません。 したがって、曲線のパスは、UpdatePanelオブジェクトおよびその他のオブジェクトの操作の研究につながりました。 多くのフォーラムを経験したところ、さまざまな説明に裏付けられた「UpdatePanel-SUCKS」という表現が多数見つかりました。 しかし、それらのどれも私が最終的にその使用の悪影響を確信させたわけではありません。 この点で、フォーラムでさまざまなアノニマスが言ったことがすべて正しいと信じて、私は掘り始めました。
そして、それはそのようになりました。
1. AJAXなしでページを構築します。 AJAXが必要なものを決定します。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:Label ID ="Label1" runat ="server" ></ asp:Label >
< br />
< br />
< asp:Button ID ="Button1" runat ="server" Text ="Button" onclick ="Button1_Click" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
protected void Button1_Click( object sender, EventArgs e)
{
Label1.Text = DateTime .Now.ToString();
}
* This source code was highlighted with Source Code Highlighter .
protected void Button1_Click( object sender, EventArgs e)
{
Label1.Text = DateTime .Now.ToString();
}
* This source code was highlighted with Source Code Highlighter .
protected void Button1_Click( object sender, EventArgs e)
{
Label1.Text = DateTime .Now.ToString();
}
* This source code was highlighted with Source Code Highlighter .
ページがブラウザにロードされると、ボタンのみが表示されます。 ボタンが押されると、ラベルは時間で埋められます。
ボタンが押される前のページコードは次のとおりです。
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >< title >
</ title ></ head >
< body >
< form method ="post" action ="Test.aspx" id ="form1" >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUKLTE2MjY5MTY1NWRko6bmPqIZK4XzwlJ+QT95KATKkAm7XgkyNT8uG1kyAYY=" />
</ div >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__EVENTVALIDATION" id ="__EVENTVALIDATION" value ="/wEWAgKd+pPDBwKM54rGBoC4gybAW7W7f/8WUBQh0YQDD1jlQXYgaQH1TnNEFqnS" />
</ div >
< div >
< span id ="Label1" > Label </ span >
< br />
< br />
< input type ="submit" name ="Button1" value ="Button" id ="Button1" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
ボタンをクリックすると、ページコードが次のように変更されます。
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >< title >
</ title ></ head >
< body >
< form method ="post" action ="Test.aspx" id ="form1" >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUKLTE2MjY5MTY1NQ9kFgICAw9kFgICAQ8PFgIeBFRleHQFEzA2LjA0LjIwMTEgMjI6MzM6MzBkZGSqilrbUiK+hZQi417owBVMMBY0PhVIsFIco8gKMAgDzg==" />
</ div >
< div class ="aspNetHidden" >
< input type ="hidden" name ="__EVENTVALIDATION" id ="__EVENTVALIDATION" value ="/wEWAgLasIQ/AoznisYG8Y0mtUQQkyTrw6eGx7daZxUnrJZkgkJYAwlkImZYyNg=" />
</ div >
< div >
< i >< b >< span id ="Label1" > 06.04.2011 22:33:30 </ span ></ b ></ i >
< br />
< br />
< input type ="submit" name ="Button1" value ="Button" id ="Button1" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
ご覧のとおり、ページ全体は同じままです。 ViewStateとコンテンツが少し変更されました
< span id ="Label1" ></ span >
* This source code was highlighted with Source Code Highlighter .
。 同時に、このような小さな変更では、ページ全体をリロードするのに時間がかかりました。
結論は一般的ではありません。
AJAXでページを構築する
ページに、Visual Studioが提供する要素、およびタスクの実装に必要なScriptManagerとUpdatePanelを追加します。
ページコードは次のように変更されます。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
</ asp:ScriptManager >
< asp:UpdatePanel ID ="UpdatePanel1" runat ="server" >
< ContentTemplate >
< asp:Label ID ="Label1" runat ="server" Text ="Label" ></ asp:Label >
< br />
< br />
< asp:Button ID ="Button1" runat ="server" Text ="Button" onclick ="Button1_Click" />
</ ContentTemplate >
</ asp:UpdatePanel >
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
当然、ボタンをクリックすると、リクエストが発生します。
スニファーを使用して、そのようなリクエストでサーバーに送信されるものを詳しく調べます。 そして、彼から取られたもの。
リクエスト
ScriptManager1 = UpdatePanel1％7CButton1＆__ EVENTTARGET =＆__ EVENTARGUMENT =＆
__VIEWSTATE =％2FwEPDwULLTEyNTU5OTE4NDBkZBeGYz2ykWCdLe％2FOqUGKO6XyNu
fetXoAHtWu％2B6HogbQM＆__ EVENTVALIDATION =％2FwEWAgLfxMyuBgKM54rGBm5yI89
MSG1Ab3％2FionirqDlYwJw90SrasAVtECg7kMKg＆__ ASYNCPOST = true＆Button1 =ボタン
応答
1 |＃|| 4 | 172 | updatePanel | UpdatePanel1 |
< span id ="Label1" > 06.04.2011 22:45:32 </ span >
< br />
< br />
< input type ="submit" name ="Button1" value ="Button" id ="Button1" />
|144|hiddenField|__VIEWSTATE|/wEPDwULLTEyNTU5OTE4NDAPZBYCAgMPZBYCAgMPZBY
CZg9kFgICAQ8PFgIeBFRleHQFEzA2LjA0LjIwMTEgMjI6NDU6MzJkZGSsSgFqm7m2vsFaoPo+4cjv
hIKZqpewoFXAcOyEREOqHw==|64|hiddenField|__EVENTVALIDATION|/wEWAgKhlZm1BwKM5
4rGBneyIIjYM0XM0O/oSExJWXVpXaQHZzYDddopSIBcDVj+|0|asyncPostBackControlIDs|||0|
postBackControlIDs|||26|updatePanelIDs||tUpdatePanel1,UpdatePanel1|0|
childUpdatePanelIDs|||25|panelsToRefreshIDs||UpdatePanel1,UpdatePanel1|2|
asyncPostBackTimeout||90|9|formAction||Test.aspx|18|pageTitle|| |
答えを詳しく見ると、UpdatePanelと新しいViewStateの内容に似たものが表示されます。 そして、このサイズはすべて、ページ全体よりもはるかに小さくなっています。 原則として、これを達成しました。 さらに、何も点滅しません。 そして、少し考えて、UpdatePanelの内部からリクエストの原因となるボタンを取り出すと、さらに少ないことがわかりますが、それはどのようなViewStateです。 結局、非同期的に更新されるものだけでなく、ページ上のすべてのコントロールに基づいて形成されます。 UpdatePanelを使用すると、要求がどのように進むか（同期的または非同期的）に関係なく、ページ全体がサイクルを通過することがわかります。
もちろん、この事実はUpdatePanelのcoの最後のハイライトかもしれません。 しかし、Microsoftの人たちは、これらすべてを理由なく残すなら、Microsoftの人ではないでしょう。
これはすべて、プログラムコードに次の条件を追加することで簡単に修正できます。
if (!ScriptManager1.IsInAsyncPostBack)
{
Label1.Text = " ";
}
* This source code was highlighted with Source Code Highlighter .
この条件は、ページハンドラーに追加する必要があります。
この条件内にあるものはすべて、非同期ロードのたびに実行されるわけではなく、他のすべては実行されます。
UpdatePanelの使用をやめる
今はすべて順調です。 誰もが幸せですが、私の意見では、ある種の堆積物が残っており、彼らはまだそれがどのように機能するかを理解していません。
誰かがどこかでWebサービスについて話していたようです...
ここでそれらについて続けましょう。
新しいWebServiceをWebサイトに追加し、属性[System.Web.Script.Services.ScriptService]のコメントを解除します
Visual Studio 2010では、その中に関数が自動的に生成されます。
[WebMethod]
public string HelloWorld() {
return "Hello World" ;
}
* This source code was highlighted with Source Code Highlighter .
その中の何も変更しません。
次に、次のことを行う必要があります。
1）Webサービスが座っているページを説明する
2）WebサービスにアクセスするJavaScript関数を作成します
3）この関数のトリガーを作成する
そして、ページを次のフォームに変更します。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > , UpdatePanel </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< script >
function GetResult() {
WebService.HelloWorld( function (result) {
$get( 'Label1' ).innerHTML = result;
});
}
</ script >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" >
< Services >
< asp:ServiceReference Path ="~/WebService.asmx" />
</ Services >
</ asp:ScriptManager >
< asp:Label ID ="Label1" runat ="server" Text ="Label" ClientIDMode ="Static" ></ asp:Label >
< br />
< br />
< input type ="button" onclick ="GetResult()" value ="Button" />
</ div >
</ form >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
サーバーからの回答を見ると、次のようになります。
{「D」：「Hello World」}
結論：すべてがクールになりました。
xmlHttpRequestオブジェクト
このトピックをさらに深く掘り下げると、上記のすべてが単純なxmlHttpRequestオブジェクトを通じて機能します。 しかし、これはまったく異なる話です。
したがって、結果の結論を定式化するのにいつも問題があったので、Habrauser
Shedalの公式許可を得て彼の言葉を書きます。
UpdatePanelを使用すると、開発が本当に簡単になります。もちろん、サーバーとデータを交換するときは、ページが完全にリロードされるときよりもトラフィックが少なくなります。 ただし、転送されるデータの量は多くの場合、必要な最小量よりも多くなります。 ほとんどの場合、これは絶対に重要ではありませんが、サーバーとのアクティブなデータ交換では、非同期ポストバックの代わりとしてWebサービスを正確に使用した方がよい場合があります。
一般に、Webサービスのアプリケーションの範囲ははるかに広く、それらを選択する多くの理由があります。 たとえば、複数のユーザーインターフェイス（モバイル、デスクトップ、Webなど）を作成するためにサーバーとデータを交換するためのプログラムインターフェイスの汎用性。 そして、この場合でも、Webサービスがビジネスロジックとインターフェイスの間のレイヤーとしてのみ使用され、インターフェイスが以下を含む標準のASP.NETツールを使用して動作する場合、非常に正常です。 データ交換のみにWebサービスを使用するUpdatePanel。
同時に、UpdatePanelには多くの利点があります。これは、Webサービスとは異なり、ページのHTMLコードを非同期的に変更するために特別に開発されたためです。 したがって、便利なトリガー、パネルのネスト、自動レンダリング（JSに手動で実装する必要があります）などがあります。
その他：
画像を非同期
に読み込む
ことはでき
ません ！ 非同期読み込みのみを
エミュレートします。
すべて成功！）