ひろぽっぽれす

PHPのvar_dump() が、JavaScriptで var_dump()できちゃうライブラリです。

var_dump() ver_0.5 ダウンロード

使い方は以下の通りです。
funny.jsを読み込んで、PHPと同じ感覚で、var_dump() しちゃってください。
シンタックスエラー以外は何かしら返ってくると思います。

<script src="funny.js" type="text/javascript"></script>

<script type="text/javascript">

var a = 123;
funny.var_dump( a );

</script>

JavaScriptが無効なときと、ロード中のメッセージを超簡単に表示する方法。

<div class="noJS">
<script type="text/javascript">
document.write("ロードしています。");
</script>
<noscript>JavaScriptを有効にしてください。</noscript>
</div>

JavaScriptがオフなときは、「JavaScriptを有効にしてください。」という表記が。
ロード中は、jsによって、「ロードしています。」という表記がされる。

/*	rolloverImg
------------------------------------------------------------------------------*/
//
window.onload = function(){
	var conf = {
		className : 'btn',	// クラス名
		postfix : '_o'		// マウスオン時の画像のファイル名
	};
	var imgNodeList = getElementsByClassName(conf.className);
	var node;
	for (var i=0, len=imgNodeList.length; i
		node = imgNodeList[i];
		node.originalSrc = node.src;
		node.rolloverSrc = node.originalSrc.replace(/(.gif|.jpg|.png)/,
			conf.postfix+"$1");
		preloadImage(node.rolloverSrc);
		node.onmouseover = function() {
			this.src = this.rolloverSrc;
		};
		node.onmouseout = function() {
			this.src = this.originalSrc;
		};
	}
};
//	クラス名によるエレメントノード配列取得
function getElementsByClassName(name) {
	var elements = [];
	var allElements = document.getElementsByTagName('*');
	var re = new RegExp("(^|\s)" + name + "($|\s)");
	for (var i=0, len=allElements.length; i
		if (allElements[i].className.match(re)) {
			elements.push(allElements[i]);
		}
	}
	return elements;
}
//	プリロード
preloadedImages = [];
function preloadImage(url) {
	var p = preloadedImages;
	var l = p.length;
	p[l] = new Image();
	p[l].src = url;
}

某PHPスクリプト配布サイトに、まさに僕が作りたかったスクリプトが置いてあったので、ダウンロードして改造してみました。

＃サンプル
AjaxとPHPを使った「みにBBS」

今でこそ当たり前になったBBSも、Ajaxによって、また新鮮なものに生まれ変わるものです。（といっても、このサンプルだとAjaxのメリットが生かされてませんが。）

元記事はこちら

<script language=”JavaScript”>
<!–//XMLHttpRequestオブジェクト生成
function createHttpRequest(){//Win ie用
if(window.ActiveXObject){
try {
//MSXML2以降用
return new ActiveXObject(”Msxml2.XMLHTTP”) //[1]’
} catch (e) {
try {
//旧MSXML用
return new ActiveXObject(”Microsoft.XMLHTTP”) //[1]’
} catch (e2) {
return null
}
}
} else if(window.XMLHttpRequest){
//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
return new XMLHttpRequest() //[1]’
} else {
return null
}
}

//ファイルにアクセスし受信内容を確認します
function requestFile( data , method , fileName , async )
{
//XMLHttpRequestオブジェクト生成
var httpoj = createHttpRequest() //[1]

//open メソッド
httpoj.open( method , fileName , async ) //[2]

//受信時に起動するイベント
httpoj.onreadystatechange = function() //[4]
{
//readyState値は4で受信完了
if (httpoj.readyState==4) //[5]
{
//コールバック
on_loaded(httpoj)
}
}

//send メソッド
httpoj.send( data ) //[3]
}

//コールバック関数 ( 受信時に実行されます )
function on_loaded(oj)
{
//レスポンスを取得
res = oj.responseText //[6]

//ダイアログで表示
alert(res)

}

//–>
</script>
<form>
<input type=”“button”<br” /> value = “test.txtをリクエストした時のレスポンス”
onclick = “requestFile( ” , ‘GET’, ‘./test.txt’ , true )”/>
</form>

最初の関数、createHttpRequest()は、ブラウザ別にXMLHttpRequestオブジェクトを生成して返します。Win版IE 用にエラー回避しつつ新旧2種類のMSXML[1]’を試し、その他の実装ブラウザではnew XMLHttpRequest()[1]で生成します。もし、失敗すればnullを返します。

そして、その次の関数、requestFile()で、このオブジェクトを利用し、送受信を行っています。openメソッド[2]で POST/GET、URLなどの設定を行い、send[3]で送信しています。 ( ちなみに、requestFile()内で、ここでは変数httpoj をvarによってローカル変数化していますが、もしここでvarを付けずにグローバル変数へ格納すると複数レスポンスを受信した時に問題が起こる可能性があります。)

受信したデータは、受信時に起動するイベントonreadystatechange[4]内でreadyState値[5]が4の受信完了時に取得します。ここでは、コールバック用関数 on_loaded(httpoj)を作り、レスポンスを引数で渡し、受信データはresponseText[6]で受け取っています。 ( ちなみに、sendをonreadystatechangeの前に記述すると、ieでは動作しなくなります、、、。)

ボタンクリック時に動作する関数requestFileの引数として、HTTPメソッドとして’GET’、リクエストURLに ‘./test.txt’ 、非同期オプションに trueを指定して、データは ” を渡しています。 ( よく見かけるサンプルでは、このsend()に渡されるデータをnullとするものが多いのですが、konquerorでエラーが発生するのでここでは、とりあえず、send(”) としました。)