ホーム > カテゴリ > PHP・Laravel・CakePHP >

Ajaxの非同期通信のサンプル(テンプレート)

jQueryを使用しないAjaxの基本のサンプルです。素のJavascriptのみを使用していますのでわかりやすいと思います。サンプルでは後学の為にGET/POSTデータを同時に送信しています。サーバー側の言語はPHPです。

まずは結果から

[初期状態]

[ボタンをクリック後の状態]

「サーバーからデータの取得」ボタンを押すとGET/POSTデータをサーバーへ送信します。次にサーバーからデータが送られてそのデータが画面に表示されます。

クライアント側[HTML]

クライアントで実行される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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript"> 
<!--
 
  // XMLHttpRequestオブジェクトの生成
  function createXmlHttpRequest(){

    if(window.XMLHttpRequest){      
    
      return new XMLHttpRequest();     
      
    }else if(window.ActiveXObject){
      
      try {
          return new ActiveXObject("MSXML2.XMLHTTP.6.0"); 
      } catch (e) {
        try {
           return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        } catch (e2) {
          try {
              return new ActiveXObject("MSXML2.XMLHTTP");
          } catch (e3) {
             return null
          }
        }
      }
      
    }else {
        return null
    }
  }
  
  // サーバーへHttpリクエストの送信
  function sendHttpRequest(){ 
        
      // XMLHttpRequestオブジェクトの生成
      var xmlhttp = createXmlHttpRequest();
      
      // イベントの設定
      xmlhttp.onreadystatechange = function() { 
        // レスポンスの処理が完了後、コールバック関数へ渡す
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
            // コールバック
            XmlHttpCallback(xmlhttp);
        }
      }       
      
      // GET/POST共に指定する(サンプル用)
      xmlhttp.open('POST', 'server.php?action=2', true);
       
      // サーバにHTTPリクエストを送信
      xmlhttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
      xmlhttp.send('send=postdata');
     
  }
  
  // コールバック関数(クライアント側への表示)
  function XmlHttpCallback(xmlhttp){
      var result = document.getElementById("result");
      result.innerHTML = xmlhttp.responseText;
  } 
// -->
</script>
</head>
<body>

  <div id="result">ここに結果が戻ってきます。</div>
  <br />
  <input type="button" value="サーバーからデータの取得" onclick="sendHttpRequest();" />
  
</body>
</html>

サーバー側[PHP]

サーバー側で実行されるPHPのソースコードです。

<?php

  echo "GET<br />"; 
  var_dump($_GET);
  echo "<br /><br />POST<br />"; 
  var_dump($_POST);  
  echo "<br /><br />" ;
  
  if ($_GET['action'] == 2){
    echo '<span style="color:red;">Ajaxによる非同期通信が成功しました。</span>';
  }else{
    echo 'none';
  }  
?>

解説

コード内にコメントをいれておきましたのでそちらを読み解いて下さいね。 :-)





関連記事


前の記事：1x1の透過GIFファイル(アクセスカウンター用)
次の記事：ファイルをアップロードする

公開日：2015年01月27日
記事NO：00159