microsoft ajax library ～ 8 年越しの開花 ～
Post on 15-Jan-2016
60 Views
Preview:
DESCRIPTION
TRANSCRIPT
わんくま同盟 大阪勉強会 #4
Microsoft AJAX Library
～ 8 年越しの開花 ～
わんくま同盟 大阪勉強会 #4
DHTML がもてはやされた時代がありました
• JavaScript が一時もてはやされた時代がありました（ Dynamic HTML と言いまして・・・）– 98 年 ~01 年位
• 適度に利用できるくらいに NN4, IE4 で拡張され、クライアントマシンにも少し余裕ができ利用できる地盤ができたころです。
• ただし JavaScript はいつしかメインストリームではなくなっていきます。
わんくま同盟 大阪勉強会 #4
DHTML の凋落
• DHTML はなぜ凋落したのか？– ブラウザ非互換
• もともと IE と NN で違う実装であった– 作る側の知識が必要
– セキュリティの問題• ブラウザクラッシャー• リンク先詐称• セキュリティ系のコミュニティでは無効を推奨
– 私も推奨していますが (^^;
わんくま同盟 大阪勉強会 #4
まずは単純な DHTML の例を見てみましょう。
DEMO1
わんくま同盟 大阪勉強会 #4
AJAX ってなに？
• AJAX ってなに？• Asynchronous JavaScript +
XML の略• JavaScript と XML を使った非同期技術くらいが適当な訳か…な ?
わんくま同盟 大阪勉強会 #4
AJAX で復活？
• ここ１年ほどで AJAX が注目され JS も再びメインストリームに戻ってきたようです。
Microsoft 関西営業所
わんくま同盟 大阪勉強会 #4
でも・・・・
• われわれ IT 技術者は見慣れているはずですよ！！！！
わんくま同盟 大阪勉強会 #4
AJAX のポイント 1
東京国際空港 ( 羽田 ) 東京駅
URL が変わらない
わんくま同盟 大阪勉強会 #4
AJAX のポイント 1
URL が変わらないことにより• メリット
–同一ページをアピールしやすい–アプリケーションをアピールしや
すい• デメリット
–ブックマークできない–サーチエンジンに引っ掛かりにく
い
わんくま同盟 大阪勉強会 #4
AJAX のポイント 2
内部的にMSXML.XMLHTTP(IE6 以前 )
かXMLHttpRequest
(IE7, その他ブラウザ )
を利用している。
わんくま同盟 大阪勉強会 #4
IE 5.0
初登場は 1998/09/18 IE5で・・・～プロダクトライフサイクルから～
わんくま同盟 大阪勉強会 #4
XMLHttpRequest って
• 属性• onreadystatechange • readyState • responseBody• responseText• responseXML• status• statusText
• メソッド• abort• getAllResponseHead
ers• getResponseHeader• open• send• setRequestHeader
非常に小さい Http クライアントの実装
わんくま同盟 大阪勉強会 #4
XMLHttpRequest の DEMO
DEMO2
わんくま同盟 大阪勉強会 #4
いまのデモはただのXMLHttpRequest の同期版のデモでした。次は非同期
わんくま同盟 大阪勉強会 #4
XMLHttpRequest の非同期 DEMO
DEMO3
わんくま同盟 大阪勉強会 #4
objXHR.responseXML.xml の示しているオブジェクトは String です。
このあとさらに XML のパースを行い
表示している HTML に反映する必要があります。
めんどくさーーーーい
わんくま同盟 大阪勉強会 #4
• そのための
わんくま同盟 大阪勉強会 #4
AJAX は主に 3 つのカテゴリから
Windows
IIS
.NET 2.0 Runtime / ASP.NET 2.0
ASP.NET AJAX Extension
Windows Macintosh
IE, Firefox, Opera, Safari
Microsoft AJAX Library
ASP.NET AJAX Control Toolkit
サーバ クライアント
わんくま同盟 大阪勉強会 #4
AJAX Extension は現時点で 2 バージョン
ASP.NET AJAX Extension
今日紹介するTimerUpdatePanelUpdateProgressJS からの XML サービス呼び出しJSON
http://ajax.asp.net/files/AspNet_AJAX_CTP_to_Beta_Whitepaper.aspx
先行リリース (2006 年内予定 ) 次期リリース
Web サービスブリッジオートコンプリートさまざまなコントロールXML スクリプト
わんくま同盟 大阪勉強会 #4
ASP.NET 2.0AJAX Extensions
わんくま同盟 大阪勉強会 #4
まずは
• UpdatePanel 、 UpdateProgress をご覧ください。
DEMO4
わんくま同盟 大阪勉強会 #4
Demo4 のポイント 1
• メリット– UpdatePanel でくくるだけ– UpdateProgress も置くだけ– 簡単に AJAX のメリットを享受できる
• デメリット– 今までページ単位に処理の整合性を見ていた
のが、ブロック単位に検討する必要がある。– 2 つの UpdatePanel を置く場合には非常に慎
重に ( 途中で意図せずキャンセルは発生する )
わんくま同盟 大阪勉強会 #4
Demo4 のポイント 2
•中身を変更しても URL が変わらない。•ASP.NET のポストバック機能との親和性が高いページ間移動は今まで通り
Response.Redirectを多用する
わんくま同盟 大阪勉強会 #4
Timer
DEMO5
わんくま同盟 大阪勉強会 #4
Demo5 のポイント
• メリット– 定期処理っぽいものが実現できる (決して定
期処理ではない )• デメリット
– サーバ負荷をよく考えないと大変なものを簡単に作製可能
– リクエストが来ないことも検討しなくてはいけない
わんくま同盟 大阪勉強会 #4
Web サービス
DEMO6
わんくま同盟 大阪勉強会 #4
ポイント 1
Microsoft.Web.Script.Services.ScriptService 属性を付ける
わんくま同盟 大阪勉強会 #4
ポイント 2
asmx の拡張子を乗っ取っているSystem.Web.Services.Protocols.WebServiceHandlerFactory
→
Microsoft.Web.Script.Services.ScriptHandlerFactory
わんくま同盟 大阪勉強会 #4
ポイント 3
WebService が JavaScript のファイルを供給している
わんくま同盟 大阪勉強会 #4
ポイント 3
WebService が JavaScript のファイルを供給している
わんくま同盟 大阪勉強会 #4
Demo6 のポイント
• メリット– XML Web サービスを簡単にまともに利用で
きる局面ができた• デメリット
– js メソッドは二つに分けなくてはいけない
わんくま同盟 大阪勉強会 #4
MicrosoftAJAX Library
わんくま同盟 大阪勉強会 #4
正体は
わんくま同盟 大阪勉強会 #4
正体は
Microsoft.Web.Handlers.
ScriptResourceHandler
この Handler が必要なJavaScript のファイルをクライアントに送り込んでくれる。
わんくま同盟 大阪勉強会 #4
実体は
%ProgramFiles(x86)%\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\ScriptLibrary\Debug
わんくま同盟 大阪勉強会 #4
実体は
Microsoft AJAX Library
わんくま同盟 大阪勉強会 #4
実体は
Microsoft AJAX Library
単体でダウンロード可能
http://ajax.asp.net/default.aspx?tabid=47&subtabid=471
わんくま同盟 大阪勉強会 #4
単体利用は
<head>
<script type="text/javascript" src="Microsoft.Web.Resources.ScriptLibrary.MicrosoftAjax.debug.js" />
<script type="text/javascript" src="Microsoft.Web.Resources.ScriptLibrary.MicrosoftAjaxWebForms.debug.js" />
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance()
</script>
</head>
これだけで OK
わんくま同盟 大阪勉強会 #4
Debug と Release
Debug Release
わんくま同盟 大阪勉強会 #4
どんなものが含まれているのか・・・ 1
• ベター JavaScriptArray 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
わんくま同盟 大阪勉強会 #4
$get をつかえ
$get とは→Sys.UI.DomElement.getElementById
の短い呼び方 +α
いままで document.getElementById(id) を使っていたのを置換する。→ $get(id)
ある element配下からのみ取得する場合には$get(“id”, $get(“parent”).childNodes)
わんくま同盟 大阪勉強会 #4
String.Format をつかえ
String.format は .NET のSystem.String.Format のようなもの。
String.format('NAME={0},Age={1}', $get('TextBox1').value, $get('TextBox3').value))
→
NAME=NAKA,Age=30
わんくま同盟 大阪勉強会 #4
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
わんくま同盟 大阪勉強会 #4
まとめ
• AJAX は使うべきか？
使うべき !!
わんくま同盟 大阪勉強会 #4
どのように
• ASP.NET のポストバックの局面– UpdateProgress で処理中を示せるだけでも
User Experience の向上になる• ベター Javascript
– $get でスクリプトの簡略化を– String.Format や使えるメソッドが目白押し
わんくま同盟 大阪勉強会 #4
Enjoy Programming!
Enjoy Community!次は懇親会へ (^^
top related