May 05

Ajax サーバとのやりとりメモ

JavaScript, php コメントはページの下に

ajaxメモ。ユーザー名判定やいかに！？

今更ですが。Ajaxをメモっておかないと忘れてしまいそうで。

最近、登録時にユーザー名決めるときに「自分の好きなID]を入れて「重複チェック」ボタンを押したら即座に判定結果が出るのありますね。
あれをちろっと作ってみる。

今回も、とある女性に手伝ってもらい記事のイラストモデルに。
といってもgoogle検索で出てきた写真をトレースしているという。

さて、この女性は一体誰でしょう？・・・という記事ではないのでさっさと話を進めます。

HTML側がやること

サンプルとして、フォームに、テキストボックス、ボタン、結果を表示する空白を用意。
それぞれidを設定。

結果表示欄（重複チェックボタンにより結果が表示される場所）

コードは

<label>ユーザ名<input type="text" name="username" id="username" /></label>
<label><input type="button" name="btn_check" id="btn_check" value="重複度チェック" />
<p id="retarea">結果表示欄</p>

これに、ボタンが押されたときに「処理をしますよー」っていうJavaScriptを書く。ボタンのところに追加。
<input type="button" name="btn_check" id="btn_check" value="重複度チェック" onClick="JavaScript:CheckUserName();" />

JavaScriptの関数を書く

外部にしようが同じHTML内にしようがどちらでも。外部のほうがいいのは他のところにも使えるから。

とりあえず関数だけを

function CheckUserName() {

if( window.XMLHttpRequest ){
ajax = new XMLHttpRequest();
} else if( window.ActiveXObject ){
try {
ajax = new ActiveXObject( "Msxml2.XMLHTTP" );
} catch( e ){
ajax = new ActiveXObject( "Microsoft.XMLHTTP" );
}
}

ajax.open( "POST", "checkusername.php", "true" );
ajax.onreadystatechange = function(){
if( ajax.readyState == 4 && ajax.status == 200 ){
var obj = document.getElementById("retarea");
obj.innerHTML = ajax.responseText;
}
}
ajax.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
ajax.send( document.getElementById("username") );
}

でOKかな。やってることは
１．ajaxオブジェクト生成
２．ajaxを開きます。checkusername.phpとやりとりしますよー
３．sendでテキストボックスに入力したusernameを渡して送りますよー
４．ajaxのstatusが変わったときにはobj（document.getElementById()で取得した「結果表示欄」に入れます（入れ替えます）

です。

PHP側では？

普通にフォームでPOSTで入ってきたのと同じやり方です。
最終結果をajaxに返すために、何をするかって～と。
echoやprintでHTMLを記述するのみ。
例えばusernameがOKならば
echo $username."は使用できます";
重複している場合は
echo $username."は既に使われています";

と書けば、入力してボタンを押してチェックすれば、結果表示欄に反映されるという仕組みです。
いちいちチェックするだけなのに新しいページを作る必要もなしい楽ですね。

勿論、JavaScriptが正常に動く環境でないとだめなので、ページ遷移の中にチェック項目は必要ですが。

参考ページ

 http://www.atmarkit.co.jp/fwcr/rensai/ajax_php02/01.html

http://www.doyouphp.jp/sample/sample_xml_ajax.shtml

JavaScript イベントハンドラ
http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=event

今からはじめるprototype.js
http://journal.mycom.co.jp/series/prototypejs/001/index.html

Ajaxを使ってファイルマネージャーを作ろう
http://www.atmarkit.co.jp/fwcr/rensai/ajax_php02/02.html

前後の記事

« さくらインターネットcron(クローン）でphpを動かす｜｜Flash10では表現力が大幅に向上する！？ »

関連した記事

トラックバック＆Pingback

この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:

コメント　（ 0 ）

コメント記入欄

Copyright(c) 小山太郎.com　All rights reserved.