microsoft ajax library ～ 8 年越しの開花～

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

Microsoft AJAX Library

～ 8 年越しの開花～


DHTML がもてはやされた時代がありました

• JavaScript が一時もてはやされた時代がありました（ Dynamic HTML と言いまして・・・）– 98 年 ~01 年位

• 適度に利用できるくらいに NN4, IE4 で拡張され、クライアントマシンにも少し余裕ができ利用できる地盤ができたころです。

• ただし JavaScript はいつしかメインストリームではなくなっていきます。


DHTML の凋落

• DHTML はなぜ凋落したのか？– ブラウザ非互換

• もともと IE と NN で違う実装であった– 作る側の知識が必要

– セキュリティの問題• ブラウザクラッシャー• リンク先詐称• セキュリティ系のコミュニティでは無効を推奨

– 私も推奨していますが (^^;


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

DEMO1


AJAX ってなに？

• AJAX ってなに？• Asynchronous JavaScript +

XML の略• JavaScript と XML を使った非同期技術くらいが適当な訳か…な ?


AJAX で復活？

• ここ１年ほどで AJAX が注目され JS も再びメインストリームに戻ってきたようです。

Microsoft 関西営業所


でも・・・・

• われわれ IT 技術者は見慣れているはずですよ！！！！


AJAX のポイント 1

東京国際空港 ( 羽田 ) 東京駅

URL が変わらない



URL が変わらないことにより• メリット

–同一ページをアピールしやすい–アプリケーションをアピールしや

すい• デメリット

–ブックマークできない–サーチエンジンに引っ掛かりにく

い



内部的にMSXML.XMLHTTP(IE6 以前 )

かXMLHttpRequest

(IE7, その他ブラウザ )

を利用している。


IE 5.0

初登場は 1998/09/18 IE5で・・・～プロダクトライフサイクルから～


XMLHttpRequest って

• 属性• onreadystatechange • readyState • responseBody• responseText• responseXML• status• statusText

• メソッド• abort• getAllResponseHead

ers• getResponseHeader• open• send• setRequestHeader

非常に小さい Http クライアントの実装


XMLHttpRequest の DEMO

DEMO2


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


XMLHttpRequest の非同期 DEMO

DEMO3


objXHR.responseXML.xml の示しているオブジェクトは String です。

このあとさらに XML のパースを行い

表示している HTML に反映する必要があります。

めんどくさーーーーい


• そのための


AJAX は主に 3 つのカテゴリから

Windows

IIS

.NET 2.0 Runtime / ASP.NET 2.0

ASP.NET AJAX Extension

Windows Macintosh

IE, Firefox, Opera, Safari


ASP.NET AJAX Control Toolkit

サーバクライアント


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 スクリプト


ASP.NET 2.0AJAX Extensions


まずは

• UpdatePanel 、 UpdateProgress をご覧ください。

DEMO4


Demo4 のポイント 1

• メリット– UpdatePanel でくくるだけ– UpdateProgress も置くだけ– 簡単に AJAX のメリットを享受できる

• デメリット– 今までページ単位に処理の整合性を見ていた

のが、ブロック単位に検討する必要がある。– 2 つの UpdatePanel を置く場合には非常に慎

重に ( 途中で意図せずキャンセルは発生する )


Demo4 のポイント 2

•中身を変更しても URL が変わらない。•ASP.NET のポストバック機能との親和性が高いページ間移動は今まで通り

Response.Redirectを多用する


Timer

DEMO5


Demo5 のポイント

• メリット– 定期処理っぽいものが実現できる (決して定

期処理ではない )• デメリット

– サーバ負荷をよく考えないと大変なものを簡単に作製可能

– リクエストが来ないことも検討しなくてはいけない


Web サービス

DEMO6


ポイント 1

Microsoft.Web.Script.Services.ScriptService 属性を付ける


ポイント 2

asmx の拡張子を乗っ取っているSystem.Web.Services.Protocols.WebServiceHandlerFactory

→

Microsoft.Web.Script.Services.ScriptHandlerFactory


ポイント 3

WebService が JavaScript のファイルを供給している


Demo6 のポイント

• メリット– XML Web サービスを簡単にまともに利用で

きる局面ができた• デメリット

– js メソッドは二つに分けなくてはいけない


MicrosoftAJAX Library


正体は


正体は

Microsoft.Web.Handlers.

ScriptResourceHandler

この Handler が必要なJavaScript のファイルをクライアントに送り込んでくれる。


実体は

%ProgramFiles(x86)%\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\ScriptLibrary\Debug


実体は



実体は


単体でダウンロード可能

http://ajax.asp.net/default.aspx?tabid=47&subtabid=471


単体利用は

<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


Debug と Release

Debug Release


どんなものが含まれているのか・・・ 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 　


$get をつかえ

$get とは→Sys.UI.DomElement.getElementById

の短い呼び方 +α

いままで document.getElementById(id) を使っていたのを置換する。→ $get(id)

ある element配下からのみ取得する場合には$get(“id”, $get(“parent”).childNodes)


String.Format をつかえ

String.format は .NET のSystem.String.Format のようなもの。

String.format('NAME={0},Age={1}', $get('TextBox1').value, $get('TextBox3').value))

→

NAME=NAKA,Age=30


Sys.StringBuilder をつかえ

StringBuilder は .NET のSystem.String.Format のようなもの。

var sb = new Sys.StringBuilder();

sb.append($get("TextBox1").value);



alert(sb.toString());

→

NAKAfalse30


まとめ

• AJAX は使うべきか？

使うべき !!


どのように

• ASP.NET のポストバックの局面– UpdateProgress で処理中を示せるだけでも

User Experience の向上になる• ベター Javascript

– $get でスクリプトの簡略化を– String.Format や使えるメソッドが目白押し


Enjoy Programming!

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

microsoft ajax library ～ 8 年越しの開花 ～

Documents

microsoft ajax library ～ 8 年越しの開花～