PHP Ajax 掲示板

このケースのコードはここをクリックしてダウンロードできます。

AJAX は「Asynchronous JavaScript and XML」（Asynchronous JavaScript and XML）の略語ではなく、Jesse James Gaiiett によって作成された名詞で、インタラクティブな作成方法を指します。

Ajax の中核は JavaScript オブジェクト XmlHttpRequest です。このオブジェクトは Internet Explorer 5 で初めて導入され、非同期要求をサポートするテクノロジです。つまり、XmlHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックすることなく応答を処理できるようになります。


この記事の例では、初心者に ajax の実装原理をより深く理解してもらうために、jquery などのフレームワークを使用せず、非同期リクエスト全体を JavaScript の記述によって完了させます。

この例には、次の合計 3 つのファイルが含まれています:
データベースに接続するための config.php
message.php ユーザーがメッセージを送信すると、メッセージの結果が message_ajax に送信されます。非同期リクエスト内のphp。
message_ajax.php は message.php からの非同期リクエストを処理し、結果を返します

以下、実際の手順を説明します:
データベースとテーブルを作成する 問題が複雑になるのを避けるために、ここではテストデータベース A テーブルに作成しますt_メッセージ。 SQL ステートメントは次のとおりです。

create table t_message(id int auto_increment primary key,email varchar(100),content text);

ユーザー メッセージ インターフェイスを作成します
メッセージ インターフェイスは非常に単純で、単なるフォームです。次のように、message.php に次の HTML コードを追加します。

<div style="width:800px;margin:0 auto;">	<form action="#" >	 <fieldset>    <legend>Leave Message Here</legend>    <table>		<tr>			<td>Email:</td>			<td><input name="email"  id="email" type="email" /></td>		</tr>		<tr>			<td>Content:</td>			<td><textarea name="content" id="content" cols="80" rows="6" ></textarea></td>		</tr>		<tr>			<td></td>			<td><input name="button1" type="button" value="Post" onclick="doRequestUsingPOST()" /></td>		</tr>	</table>  </fieldset> </form></div>

非同期リクエスト
基本XMLHttpRequest オブジェクトを使用してリクエストを送信する手順は次のとおりです。 XMLHttpRequest への参照を作成すると、どの関数が XMLHttpRequest オブジェクトの状態の変更を処理するかを XMLHttpRequest オブジェクトに指示します。これを行うには、onreadystatechange 属性を設定して、要求された属性を指定します。 open() はリクエストをサーバーに送信します。 send() xmlHttp.responseText は応答を文字列として提供します

XMLHttpRequest への参照を作成します

 var xmlHttp;  function createXMLHttpRequest(){    if(window.ActiveXObject)      {         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");      }      else if(window.XMLHttpRequest)      {        xmlHttp = new XMLHttpRequest();      }else{        alert("浏览器不支持XMLHttpRequest对象");      }  }

クエリ文字列を作成します

function createQueryString(){    var email = document.getElementById("email").value;    var content = document.getElementById("content").value;    var queryString = "email="+ email + "&content="+ content ;    //alert(queryString);    return queryString;  }

POST で非同期リクエストを送信します

function doRequestUsingPOST(){    createXMLHttpRequest();    var url = "message_ajax.php?timeStamp=" + new Date().getTime();    var queryString = createQueryString();    xmlHttp.open("POST",url,true);    xmlHttp.onreadystatechange = handleStateChange;    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");    xmlHttp.send(queryString);  }

ステータスの変更を処理し、message_ によって返されたメッセージを解析しますアヤックス.php 結果

function handleStateChange(){     if(xmlHttp.readyState == 4){        if(xmlHttp.status == 200){           parseResult();           //alert("OK");        }     }  }  function parseResult(){    var responseDiv = document.getElementById("newmessage");    if(responseDiv.hasChildNodes()){      responseDiv.removeChild(responseDiv.childNodes[0]);    }    var responseText = xmlHttp.responseText;//document.createTextNode(xmlHttp.responseText);    responseDiv.innerHTML = responseText;    //responseDiv.appendChild(responseText);  }

サーバーは非同期リクエストを処理します
次に、サーバー message_ajax.php がリクエストをどのように処理するかを見てみましょう

<?php        include_once("config.php");    	$email = strip_tags($_POST['email']);    	$content = strip_tags($_POST['content']);    	$sql1 = "insert into t_message values(NULL, '"  . $email . "' ,'".$content."')";        mysql_query($sql1);      $sql = "SELECT * FROM `t_message` order by id desc LIMIT 10";      $result = mysql_query($sql);      $responseText = "<table>";      while($message = mysql_fetch_array($result)){      	$onemessage = "				<tr>					<th style='background-color:gray;'>Email:</th>					<td>".$message['email']."</td>				</tr>				<tr style='border-bottom:1px gray dashed;'>					<th style='background-color:gray;'>Content:</th>					<td>".$message['content']."</td>				</tr>";				$responseText = $responseText.$onemessage;			}			$responseText = $responseText."</table>";			echo $responseText;?>

上記のコードからわかるように、サーバーはまずクライアントから送信されたリクエストを受信する必要があります。この例では、送信されるパラメータは電子メールとコンテンツです。
次に、サーバーはこれらのデータをデータベースに保存し、データベース内の最新 10 件のメッセージ情報をクエリし、それを HTML 文字列に構築してエコーします。
その後、クライアントはそれを受信し、更新せずに最新の 10 件のメッセージを表示できます (もちろん、メッセージが 10 件を超える場合)。

Shenma についてご質問がある場合は、メッセージを残して相談してください。