簡単なAJAXプログラム

以下の3つを作成します。
name.html
name.js
name.php


---------------
name.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" dir="ltr">
<head>
<meta http-equiv="Content-Type"  content= "text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type"  content= "text/javascript" />
<meta http-equiv="Content-Style-Type"  content="text/css" />
<script type="text/javascript" src="name.js"></script>

<title>  こんにちはサンプル </title>
</head>

<body>
 <h1> こんにちは○○○さん</h1>
 <form action="./name.html">
 <label for="name" > 名前 </label>
 <input type="text" id="name" name="name" width="10" />
 <input type="button"  id="click-button"  value="click"  />
 </form>
 <p id="result"></p><!-- 表示 -->
 <!-- <input type="submit"  id="submit-button"  value="クリック"  /> -->
</body>
</html>

---------------
name.js
---------------
//<![CDATA[
function createXMLHttpRequest(){
 /* XMLHttpRequest オブジェクトを作成する   */
 if(window.addEventListener){
 /* Firefox 用 */
 return new XMLHttpRequest();
 }else{
 /* IE 用 */
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
}
function XMLHttpRequestByPost(postdata){
 /* hello.php にリクエストを送る */
 var request = createXMLHttpRequest();
 /* ステータス( 読み込み中なのか完了したのか) が変更されたら、                    readyStateChangeHandler を実行 */
 request.open("POST", "name.php" , true);
 request.onreadystatechange = readyStateChangeHandler;
 request.setRequestHeader( "Content-Type" ,  "application/x-www-form-urlencoded");
 request.send("name=" + postdata);
 
 function readyStateChangeHandler(){
 switch(request.readyState){
  case 4:
  /* 完了の場合、サーバから送られたデータを表示 */
  if(request.status == 200){
  document.getElementById( 'result').innerHTML  = request.responseText;
  }
  break;
  }
 }
}
function RequestByPost(){
 XMLHttpRequestByPost(document.getElementById('name').value);
}
/* ページをロードしたときに以下のイベントハンドラを追加する */
window.onload = function(){
 /* id がsubmit-button のボタンがクリックされたら            RequestByPost 関数を実行 */
 var obj = document.getElementById('click-button');
 if(window.addEventListener){
  /* Firefox 用 */
  obj.addEventListener("click", RequestByPost, false);
 }else{
  /* IE 用 */
  obj.attachEvent("onclick", RequestByPost);
 }
}
//]]>

---------------
name.php
---------------
<?php
if($_POST['name']){
 $post_name = htmlspecialchars($_POST['name'], ENT_QUOTES);
 echo " こんにちは、".$post_name." さん ";
}else{
 echo " 名前を入力してください";
}
?>

にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ