libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (4/5)

作成:2013-02-24 10:08
更新:2013-02-24 10:08

■フォームデータの送信

ちょっと変わったところで、「フォームの送信」を行わせてみましょう。最近では、サーバーとのやり取りはすべてAjaxを利用する形になりつつあります。フォームの送信も、Ajaxを使ってページ遷移なしに処理できるようにしたほうがスマートですね。

フォームの送信は、送信用のデータとして「FormData」というオブジェクトを作成します。これは、文字通りフォームの情報を管理するためのものです。このオブジェクトを作成し、そこにフォームに用意する値を追加していきます。

・オブジェクトの作成
変数 = new FormData();

・フォームデータの追加
《FormData》.append( 名前 , 値 );

こうして必要なだけデータを追加したら、XHR2でsendする際に引数としてFormDataオブジェクトを渡してやればいいのです。

実際の利用例を下にあげておきましょう。ここではid, name, passwordといった項目を作成して送信しています。ページを見ればわかることですが、ページ自体にはフォームはありません。FormDataさえあれば、フォーム送信をXHR2で行えるのです。

実際にフォームを送信する場合は、appendでフォーム内の各値を追加する必要はありません。<form>タグのDOMオブジェクトを取得し、それを引数に指定してnew FormDataすればOKです。例えば、
new FormData(document.querySelector("#form1"));
――こんな具合ですね。注意したいのは、フォーム内に用意する入力関係のタグは、必ずname属性を指定しておく、ということです。忘れるとうまく値が取り出せません。

（※ちなみに、このFormDataは、XHR2専用ではなく、従来のXHRでも使うことができます）

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>タイトル</title>
    <style>
    h1 { font-size: 18pt; background: #AAAAEE; padding: 5px;}
    </style>
<script type="text/javascript">
function doAction(e){
    var formData = new FormData();
    formData.append('id', 123);
    formData.append('name', "tuyano");
    formData.append('password', "hoge");
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/helo.php', true);
    xhr.responseType = 'text';
    xhr.onload = function(e) {
        if (this.status == 200) {
            document.querySelector("#msg").innerHTML = 
                this.response;
        }
    };

    xhr.send(formData);
}
</script>
</head>
<body>
    <header>
        <h1>XHR2 Sample</h1>
    </header>
    <article>
        <p id="msg"></p>
        <button onclick="doAction();">Click</button>
    </article>
</body>
</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る