AjaxでJavascriptからphpに値を渡す　補足

前(http://woshidan.hatenablog.com/entry/2013/09/25/013709)にJavascriptからphpへ値を送る項を書いたのですが、その補足。

あ、箇条書きが番号になってるつもりでなってなかったので、そこだけ訂正してます。

参考にしたのはこちら(http://memopad.bitter.jp/w3c/ajax/ajax_xmlhttprequest_onreadystatechange.html)

以下、xmlhttpはXMLHttpRequestオブジェクトとします。

では、補足へ。

補足1:phpへ値をPOSTメソッドで送る場合、変数の値をencodeURI()でURI形式に変換する。

メールアドレスなど渡したい文字列には特殊な文字が含まれているので、その文字がきっかけで起こりうる文字化けなどのバグを予防します。

例

xmlhttp.send('Mail=mail　&　Pass=pass);

↓

今回の記事

xmlhttp.send('Mail='+encodeURI(mail)+'&Pass='+encodeURI(pass));

補足２：サーバーからの応答時の処理について

いつもいつでも正確に通信が出来ていればよいのですが、そんなわけはないので、

サーバーからの応答時の処理を設定する。

xmlhttp.onreadystatechange = function(){

...}

onreadystatechangeというのはサーバーからの応答状態が変化するたびに呼ばれる関数です。

この値に応じて、メッセージ表示処理などを設定しておくことで、大きなファイルをダウンロードすると通信中などのダイアログが出たりするサイトがありますが、そういう感じのものができると思われます。

状態の詳細はこちら(http://memopad.bitter.jp/w3c/ajax/ajax_xmlhttprequest_onreadystatechange.html)を見ていただいたほうが分かりやすいのですが、

xmlhttp.readystateが

4の場合にサーバへ出したリクエストの処理が終了

0の場合はサーバへの接続ができていない

また

xmlhttp.statusが404のときは送信先のページが存在していないことを指し、

一方、

200のときはリクエストの処理に加えてサーバから返ってくるレスポンスの処理が完了していること

を指します。

xmlhttp.onreadychangestateが4でxmlhttp.statusが200のとき、

レスポンスの処理が完了しているので、この条件のところにサーバから返ってきたデータを使った処理を書いたりします。

サーバがリクエストにしたがって返したデータはxmlhttp.responseTextに入っています。

参考までに書いてみたのがこちらです。

パスワードとメールアドレスをフォームに入力して、それをJavascriptでチェックして形式がそれほどおかしくなければ

phpへ送ってDBのメールアドレスとパスワードの組と照合する、というプログラムの一部で、

Javascriptでチェックがすんだ後、その値をphpへ送る部分です。

照合の部分は入ってなくて、phpは受け取ったことが分かるテキストを返します。

Javascriptからパスワードとメールアドレスをlogin.phpに投げてデータベースに対応するメールアドレスとパスワードの組が合ったら、OKと返します。

せっしょんうんたらは明日以降やります←

(まあ、よろしくない話ですがIE 6以前への対応はひとまず捨てちゃっています……。)

//Javascript
var mail = document.getElementById("form1").value;
var pass = document.getElementById("form2").value;

// 中略

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
	document.getElementById("resultDiv").innerHTML = xmlhttp.responseText;
	}
}

//実際のコードではlogin.phpのアドレスは絶対パスで書きます。

xmlhttp.open("POST","../login.php","true");
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send('Mail='+encodeURI(mail)+'&Pass='+encodeURI(pass));

//xmlhttp.send('Mail=" + encodeURI(mail) "&Pass=" +encodeURI(pass)');
//みたいにクオーテーションの関係がごっちゃになって、メールアドレスは" encodeURI(mail) "で、パスワードは" encodeURI(pass)ですね
//という全く入力がいのない出力を受け取っていた時間がありました。

//login.php

if(isset($_POST['Mail']) && isset($_POST['Pass'])){
	echo "メールアドレスは". $_POST['Mail'] . "で、パスワードは" . $_POST['Pass'] . "ですね";
}else{
	echo "入力された値がおかしいようです";
}

//もちろんただのデータが渡されてるかどうかのテスト表示です。
//パスワードは本当は表示させちゃダメです。
//echoをうっかりreturnと書いて白紙のresponseTextを眺めていた時間がありました。

//html

ここまで書いて気づいたんですけど、何か複雑な処理をするわけでもなく、フォームにある値を送るだけならば、 formのアクションの指定をjavascriptを動かすページからlogin.phpに変えればいいのでは？と気づいたのは内緒です。