プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

Ajax処理(POSTメソッド)

概要

AjaxをPOSTメソッドで送信する

※setRequestHeaderでFormヘッダーを設定後、
　sendパラメータを設定する

クライアント

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>テストサイト</title>
    <script type="text/javascript" src="./ajax_test.js"></script>
</head>
<body>
    <form name="fm">
        <label>
            名前：
            <input type="text" name="name" value="" size="15" />
        </label><br />
        <label>
            年齢：
            <input type="text" name="ago" value="" size="5" />
        </label>
        <input type="button" value="送信" onclick="asyncSend();" />
    </form>
    <br />
    <div id="result"></div>
</body>
</html>
 
 

javascript

// リクエストオブジェクトを取得
function getXHR(){
    var req;
 
    try{
        req = new XMLHttpRequest();
    }catch(e){
        try{
            req = new ActiveXObject('Msxml2.XMLHTTP');
        }catch(e){
            req = new ActiveXObject('Microsoft.XMLHTTP');
        }
    }
 
    // 返却
    return req;
}
 
// Ajax送信処理
function asyncSend(){
    // リクエストオブジェクトを取得
    var req = getXHR();
    // コールバック関数を定義
    req.onreadystatechange = function(){
 
        // オブジェクトエレメントを取得
        var result = document.getElementById('result');
 
        // 通信完了ステータスチェック
        if(req.readyState == 4){
            // リクエストステータスチェック
            if(req.status == 200){
                result.innerHTML = req.responseText;
            }else{
                // 通信失敗
                result.innerHTML = "サーバエラーが発生しました。";
            }
        }else{
            // 通信完了前
            result.innerHTML = "通信中…";
        }
    }
 
    var param_name = document.fm.name.value;
    if(param_name == ''){
        alert('名前を設定してください');
        return false;
    }
    var param_ago = document.fm.ago.value;
    if(param_ago == ''){
        alert('年齢を設定してください');
        return false;
    }
 
    // URIエンコードを行う
    param_name = encodeURIComponent(param_name);
    param_ago = encodeURIComponent(param_ago);
 
    // サーバとの非同期通信を開始
    req.open('POST', 
             'http://localhost.testweb01/ajax_test.php' ,
             true);
    // ヘッダー送信
    req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    req.send('name=' + param_name + '&ago=' + param_ago);
}
 
 

サーバ

php

<?php
    // パラメータ取得
    $_name = $_POST['name'];
    $_ago = $_POST['ago'];
 
    // パラメータ出力
    echo "こんにちは" . $_name . "(" . $_ago . ")" . "さん！";
?>
 
 

「Ajax処理(POSTメソッド)」をウィキ内検索
最終更新：2012年02月19日 10:21