ホーム > カテゴリ > 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


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律