わんくま同盟大阪勉強会 #1

Size: px

Start display at page:

Download "わんくま同盟大阪勉強会 #1"

しょうじさわまつ
4 years ago
Views:

1 Microsoft AJAX Library ~ 8 年越しの開花 ~

2 DHTML がもてはやされた時代がありました JavaScript が一時もてはやされた時代がありました (Dynamic HTML と言いまして ) 98 年 ~01 年位適度に利用できるくらいに NN4, IE4 で拡張されクライアントマシンにも少し余裕ができ利用できる地盤ができたころですただし JavaScript はいつしかメインストリームではなくなっていきます

3 DHTML の凋落 DHTML はなぜ凋落したのか? ブラウザ非互換もともと IE と NN で違う実装であった作る側の知識が必要セキュリティの問題ブラウザクラッシャーリンク先詐称セキュリティ系のコミュニティでは無効を推奨私も推奨していますが (^^;

4 まずは単純な DHTML の例を見てみましょう DEMO1

5 AJAX ってなに? AJAX ってなに? Asynchronous JavaScript + XMLの略 JavaScriptとXMLを使った非同期技術くらいが適当な訳かな?

6 AJAX で復活? ここ 1 年ほどで AJAX が注目され JS も再びメインストリームに戻ってきたようです Microsoft 関西営業所

7 でもわれわれ IT 技術者は見慣れているはずですよ!!!!

8 AJAX のポイント 1 URL が変わらない東京国際空港 ( 羽田 ) 東京駅

9 AJAX のポイント 1 URL が変わらないことによりメリット同一ページをアピールしやすいアプリケーションをアピールしやすいデメリットブックマークできないサーチエンジンに引っ掛かりにくい

10 AJAX のポイント 2 内部的に MSXML.XMLHTTP(IE6 以前 ) か XMLHttpRequest (IE7, その他ブラウザ ) を利用している

11 IE 5.0 初登場は 1998/09/18 IE5 で ~ プロダクトライフサイクルから ~

12 XMLHttpRequest って属性 onreadystatechange readystate responsebody responsetext responsexml status statustext メソッド abort getallresponsehead ers getresponseheader open send setrequestheader 非常に小さい Http クライアントの実装

13 XMLHttpRequest の DEMO DEMO2

14 いまのデモはただの XMLHttpRequestの同期版のデモでした次は非同期

15 XMLHttpRequest の非同期 DEMO DEMO3

16 objxhr.responsexml.xml の示しているオブジェクトは String ですこのあとさらに XML のパースを行い表示している HTML に反映する必要がありますめんどくさーーーーい

17 そのための

18 AJAX は主に 3 つのカテゴリから ASP.NET AJAX Control Toolkit ASP.NET AJAX Extension.NET 2.0 Runtime / ASP.NET 2.0 Microsoft AJAX Library IIS IE, Firefox, Opera, Safari Windows Windows Macintosh サーバクライアント

19 AJAX Extension は現時点で 2 バージョン今日紹介する Timer UpdatePanel UpdateProgress JS からの XML サービス呼び出し JSON 先行リリース (2006 年内予定 ) Web サービスブリッジオートコンプリートさまざまなコントロール XML スクリプト次期リリース ASP.NET AJAX Extension

20 ASP.NET 2.0 AJAX Extensions

21 まずは UpdatePanel UpdateProgress をご覧ください DEMO4

22 メリット Demo4 のポイント 1 UpdatePanel でくくるだけ UpdateProgress も置くだけ簡単に AJAX のメリットを享受できるデメリット今までページ単位に処理の整合性を見ていたのがブロック単位に検討する必要がある 2 つの UpdatePanel を置く場合には非常に慎重に ( 途中で意図せずキャンセルは発生する )

23 Demo4 のポイント 2 中身を変更しても URL が変わらない ASP.NET のポストバック機能との親和性が高いページ間移動は今まで通り Response.Redirect を多用する

24 Timer DEMO5

25 メリット Demo5 のポイント定期処理っぽいものが実現できる ( 決して定期処理ではない ) デメリットサーバ負荷をよく考えないと大変なものを簡単に作製可能リクエストが来ないことも検討しなくてはいけない

26 Web サービス DEMO6

27 ポイント 1 Microsoft.Web.Script.Services. ScriptService 属性を付ける

28 ポイント 2 asmx の拡張子を乗っ取っている System.Web.Services.Protocols.WebServiceHa ndlerfactory Microsoft.Web.Script.Services.ScriptHandlerFac tory

29 ポイント 3 WebService が JavaScript のファイルを供給している

30 ポイント 3 WebService が JavaScript のファイルを供給している

31 メリット Demo6 のポイント XML Web サービスを簡単にまともに利用できる局面ができたデメリット js メソッドは二つに分けなくてはいけない

32 Microsoft AJAX Library

33 正体は

34 正体は Microsoft.Web.Handlers. ScriptResourceHandler このHandlerが必要なJavaScript のファイルをクライアントに送り込んでくれる

35 実体は %ProgramFiles(x86)% Microsoft ASP.NET ASP.NET 2.0 AJAX Extensions v ScriptLibrary Debug

36 実体は

37 実体は単体でダウンロード可能

38 <head> 単体利用は <script type="text/javascript" src="microsoft.web.resources.scriptlibrary.microsoftaj ax.debug.js" /> <script type="text/javascript" src="microsoft.web.resources.scriptlibrary.microsoftaj axwebforms.debug.js" /> <script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance() </script> </head> これだけで OK

39 Debug と Release Debug Release

40 ベター JavaScript どんなものが含まれているのか 1 Array Date Number add format format addrange localeformat Method localeformat clear Error parse clone argument Object contains argumentnull gettype dequeue argumentoutofrange gettypename exists argumenttype String foreach argumentundefined endswith indexof create format insert invalidoperation localeformat parse Method notimplemented ltrim queue pagerequestmanagerparsererror rtrim remove pagerequestmanagerservererror startswith removeat pagerequestmanagertimeout trim Boolean parametercount trimend parse popstackframe trimstart scriptloadfailed

41 $get とは $get をつかえ Sys.UI.DomElement.getElementById の短い呼び方 +α いままで document.getelementbyid(id) を使っていたのを置換する $get(id) ある element 配下からのみ取得する場合には $get( id, $get( parent ).childnodes)

42 String.Format をつかえ String.format は.NET の System.String.Format のようなもの String.format('NAME={0},Age={1}', $get('textbox1').value, $get('textbox3').value)) NAME=NAKA,Age=30

43 Sys.StringBuilder をつかえ StringBuilder は.NET の System.String.Format のようなもの var sb = new Sys.StringBuilder(); sb.append($get("textbox1").value); sb.append($get("textbox2").value); sb.append($get("textbox3").value); alert(sb.tostring()); NAKAfalse30

44 まとめ AJAX は使うべきか? 使うべき!!

45 どのように ASP.NET のポストバックの局面 UpdateProgress で処理中を示せるだけでも User Experience の向上になるベター Javascript $get でスクリプトの簡略化を String.Format や使えるメソッドが目白押し

46 Enjoy Programming! Enjoy Community! 次は懇親会へ (^^

Webプログラミング演習

Webプログラミング演習 Web プログラミング演習 STEP9 Ajax を利用した RSS フィードのタイムライン表示 Ajax Asynchronous JavaScript + XML クライアントサイド ( ブラウザ内 ) で非同期サーバ通信と動的ページ生成を組み合わせる技術の総称ウェブアプリケーションの操作性向上 ( ページ遷移を伴わない ) サーバとの小刻みな通信 = 必要なデータを必要な時に要求 ( リクエスト

わんくま同盟 大阪勉強会 #1

わんくま同盟大阪勉強会 #1