JavaScript: 2005年7月アーカイブ

Ajax なチャット

| | コメント(2)

Ajax の習作、RO風のチャット。
ajaxchat.png

サンプルは こちら。ソースコードは こちら
自由に使いねい。エラーが出たら教えてくれい。
動作確認 (Win32) Internet Explorer 5.5/6.0 Netscape 7.1 Firefox 1.0.4 Opera 8.01

従来のチャットと何が違うのか?
画面偏移がない
湖に浮かぶ白鳥が泳ぐように、見えない場所でがんばるのが Ajax の役目。

Ajax はクライアントとサーバーの関係を変える物ではない?
クライアントの要求を細かく処理していく。待たせない。

なんとなくかっこいい?
空賊連合よりはかっこいい。豚も言っている。

将来性は?
タダで作れるところがポイント。お金があるなら Flash 等のリッチクライアントを使用すべし。

XMLHttpRequest

| | コメント(2)

Ajax に必要不可欠な XMLHttpRequest の得方を調べた。
前者はラッパー関数を用いてインスタンスを取得する方法。
後者は window.XMLHttpRequest コンストラクタを自分で定義してしまう方法。面白いやり方だなぁ…

/**
 * XMLHttpRequest オブジェクトを作成する
 *
 * @return	XMLHttpRequest
 **/
function createXMLHttpRequest()
{
	var request = null;
	
	if (window.XMLHttpRequest)
	{
		try
		{
			request = new XMLHttpRequest();
		}
		catch (e)
		{
		}
	}
	else if (window.ActiveXObject)
	{
	    var names = new Array(
				'Msxml2.XMLHTTP.5.0',
				'Msxml2.XMLHTTP.4.0',
				'Msxml2.XMLHTTP.3.0',
				'Msxml2.XMLHTTP',
				'Microsoft.XMLHTTP'
			);
		
		for (var i = 0, iMax = names.length; i < iMax; i++)
		{
			try
			{
				request = new ActiveXObject(names[i]);
				break;
			}
			catch (e)
			{
			}
		}
	}

return request;
}

var request = createXMLHttpRequest();

/**
 * window.XMLHttpRequest コンストラクタ オブジェクトを定義する
 *
 * @return	XMLHttpRequest
 **/
if (!window.XMLHttpRequest && window.ActiveXObject)
{
	function window.XMLHttpRequest = function ()
	{
		var names = new Array(
				'Msxml2.XMLHTTP.5.0',
				'Msxml2.XMLHTTP.4.0',
				'Msxml2.XMLHTTP.3.0',
				'Msxml2.XMLHTTP',
				'Microsoft.XMLHTTP'
			);
		
		for (var i = 0, iMax = names.length; i < iMax; i++)
		{
			try
			{
				request = new ActiveXObject(names[i]);
				break;
			}
			catch (e)
			{
			}
		}
		
		return request;
	}
}

request = new XMLHttpRequest();

document.styleSheets

| | コメント(0)

ページ内でスタイルシートを動的に変更する。こんな話題があったので調べてみた。

LINK 要素で取り込まれた CSS は、document オブジェクトの styleSheets オブジェクトでアクセスする事が出来る。ただし Opera については該当するオブジェクトがない(?)。

たとえば現在読み込まれている CSS ファイルを知るには、以下のように書く。

var styleSheets = document.styleSheets;

for (var i = 0, iMax = styleSheets.length; i < iMax; i++)
{
	var styleSheet = styleSheets[i];

	alert(styleSheet.href);
}

このサンプルは こちら

この href プロパティを変更してやれば動的に CSS を読み込みに行き、結果的に変更できる。ただし Opera ではこの手法は使えないので、選択したスタイルシートをクッキーやクエリに憶えさせておき、リロード時に LINK 要素を動的に生成する事で対応するのが一般的な模様。

さらに、個々の CSS ルールを知るには以下のようにする。

var styleSheets = document.styleSheets;
var report = "";

for (var i = 0, iMax = styleSheets.length; i < iMax; i++)
{
	var styleSheet = styleSheets[i];
	var rules = styleSheet.rules || styleSheet.cssRules;
	
	// ファイルを取得
	report += "[" + styleSheet.href + "]" + "\n";
	
	for (var j = 0, jMax = rules.length; j < jMax; j++)
	{
		var rule = rules[j];
		var styles = rule.style;
		
		// セレクタを取得
		report += "[" + rule.selectorText + "]" + "\n";

		// プロパティ : 値 を取得
		for (var property in styles)
		{
			var value = styles[property];
			
			// 値がなければ省略
			if (value == "")
			{
				continue;
			}

			report += property + ":" + value + "\n";
		}
	}
}

// ウィンドウが大きすぎた場合 F4 で閉じる
alert(report);

サンプルは こちら処理が重いので注意!

このアーカイブについて

このページには、2005年7月以降に書かれたブログ記事のうちJavaScriptカテゴリに属しているものが含まれています。

次のアーカイブはJavaScript: 2005年9月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.12