1. はじめ
に 現在、Backpack、Blinksale、Gmail など、データベース テクノロジと AJAX を統合した Web アプリケーションが数多くあります。この統合は、ブラウザを更新せずにデータベースと通信するための強力なテクノロジを提供することにより、Web アプリケーションとユーザー エクスペリエンスに大きな影響を与えます。つまり、ユーザーが他の操作を続けている間にデータをリアルタイムで転送できます。
この記事では、上記のテクノロジー統合メカニズムに焦点を当てます。完全なリファレンス ソース コードも提供されます。この例は、各役職にタイトル、説明、日付が含まれる単純なジョブ記録アプリケーションで、ユーザーは役職を追加、編集、削除できます。これらはすべて、データベース レコード データを操作するときに実行する基本的な操作ですが、このアプリケーションはさらに一歩進んでいます。役職は編集可能な形式に変更できます。役職はデータベースに保存または削除され、ブラウザを更新したりユーザーの操作を中断したりすることなく、新しい状態で表示されます。
この記事では、AJAX、MySQL、PHP、または同様のサーバーサイド言語についての基本的な理解があることを前提としています。 XML HTTP リクエスト オブジェクトをまだ作成していない場合は、まず私の記事「AJAX の使用方法」を参照してください。次に、まずデータベースの問題について説明します。
2. データベースの作成
最初に行う必要があるのは、これらの位置のデータを保存するデータベース テーブルを作成することです。私は、informit_ajax という MySQL テーブルを作成しました。これには、ID、タイトル、説明、日付フィールドがあります。これらはすべて、この記事で繰り返し登場する変数です。テーブルを作成するコードは次のとおりです。
CREATE TABLE 'informit_ajax' (
'id' int(11) NOT NULL auto_increment、
'date' datetime NOT NULL デフォルト '0000-00-00 00:00:00'、
「説明」の長いテキストは NULL ではありません、
'title' varchar(100) NOT NULL デフォルト '',
主キー ('id')
) TYPE=MyISAM;
このコードは、アプリケーションの開発に使用される任意の MySQL クエリ ツールまたは言語を使用して実行できます。データベースが準備できたら、次のステップは、PHP バックエンドにリクエストを行うフロントエンド ファイルを作成することです。
3. リクエストを行う
ここでのインデックス HTML ファイルは単純なデータ プレースホルダーであり、データベースから分析されます。このファイルには、JavaScript および CSS ファイルへの参照が含まれています。また、最初のリクエストと 3 つの div タグを作成する onload ハンドラーも含まれています。
レイアウト - ページ コンテンツのロードを中央に配置するために使用
- リクエストされたデータのロード中にメッセージをロードします。 HTTPRequest オブジェクト
· post-分析された各ジョブ データを表示するために使用されます
<head>
<title>データベースと AJAX を統合する方法</title>
＜link href="css/layout.css" rel="stylesheet" type="text/css" />
＜スクリプト src="js/request.js">＜/script＞
＜スクリプト src="js/post.js">＜/script＞
＜/頭＞
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="レイアウト" align="center">
＜div id="posts">＜/div＞
<p><input type="button" value="投稿を追加" onmousedown="javascript:makeRequest('services/post.php?method=save');" /></p>
＜p＞＜div id="loading">＜/div＞＜/p＞
＜/div＞
＜/body＞
最初のリクエストはページのロード時に生成されます。このリクエストは、後で作成する PHP クラスに get クエリを送信しますが、最初にリクエストの応答の分析メソッドを作成する必要があります。 JavaScript リクエスト ファイルは、オブジェクトの作成、リクエストの送信、準備ステータスの確認など、すべての基本的な作業を処理します。 Request オブジェクトから応答を受信すると、この JavaScript ジョブ ファイルを使用して、これらのジョブの HTML 生成を処理します。 onResponse メソッドは、テキスト バージョンとフォーム バージョンの両方で各役職の HTML ページの生成を処理し、それを独自のカスタム div タグに配置するため、ユーザー操作中に簡単に生成できるため、非常に強力です。このようにして、各投稿のテキスト バージョンとフォーム バージョンを切り替えることができます。これは、[この投稿を編集] リンクをクリックすることで実行できます。以下は、各位置に対して作成された HTML ページのコードです。完全なメソッドの実装は、この記事の対応するダウンロード ソース ファイルで確認できます。
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "<div class='title' id='title_"+ i +"'>"+ _title +"＜/div>"
+ "＜div class='description' id='description_"+ i +"'＞"+ _description +"＜/div>"
+ "＜div class='date' id='date_"+ i +"'＞"+ _date +"＜/div>"
+ "<a href="javascript:toggle('"+ i +"');">この投稿を編集</a><br/>"
+「＜/div＞」
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +">"
+ "＜div class='title'＞＜input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div ＞」
+ "＜div class='description'＞＜textarea type='text' id='formDescription_"+ i +"' Wrap='virtual'cols='60' rows='15'＞"+ _description +"＜/テキストエリア＞＜/div＞"
+ "＜div class='date'＞"+ _date +"＜/div>"
+ "＜input type='button' name='cancel' value='cancel' onclick="javascript:toggle('"+ i +"');">"
+ "＜input type='button' name='delete' value='この投稿を削除' onclick="javascript:deletePost("+ _id +");">"
+ "<input type='button' name='submit' value='この投稿を保存' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+「＜/div＞」
+ "＜p＞"nbsp;＜/p＞";
各投稿のテキスト版には、タイトル、説明、日付と「この投稿を編集」リンクが表示されるだけですが、各投稿のフォーム版には次の 3 つのボタンがあります
。 " ボタン - 投稿のステータスをテキスト バージョンに戻すだけです。
· 「この投稿を削除」ボタン - 現在の投稿の ID を PHP オブジェクトに送信してデータベースから削除します。
· 「この投稿を保存」ボタン -新しいジョブまたは編集されたジョブはサーバーに保存されます。
サーバー側のリクエスト通信を処理するための中心的なメソッドは、onResponse、saveNewPost、deletePost、および getPost メソッドです。また、現在動作しているジョブ インデックスを保存する getter メソッドと setter メソッドもあります。 . メソッドは、これらのコア メソッドに現在のインデックス値を提供するため、そのインデックスに基づいて正しい位置が更新されます (機能については以前に説明したため、onResponse は除きます)。説明とコード例:
· 次の saveNewPost メソッドは、フォーム入力値を収集して PHP オブジェクトに送信することで新しい投稿を保存し、getPost メソッドを onreadystatechange コールバック メソッドとして設定します:
function saveNewPost(_id, _index){
var newDescription = document.getElementById("formDescription_"+ _index).value;
var newTitle = document.getElementById("formTitle_"+ _index).value;
setIndex(_index);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}
· 以下の getPost メソッドはコールバック メソッドです。PHP オブジェクトから応答を受信したときに単一の投稿を更新する役割を果たします。
function getPost(){
if(checkReadyState(リクエスト)) {
var 応答 = request.responseXML.documentElement;
var _title = response.getElementsByTagName('title')[getIndex()].firstChild.data;
var _description = response.getElementsByTagName('description')[getIndex()].firstChild.data;
var _date = response.getElementsByTagName('date')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("description_"+ getIndex()).innerHTML = _description;
document.getElementById("date_"+ getIndex()).innerHTML = _date;
トグル(getIndex());
}
、
現在のインデックスをリクエストとして PHP オブジェクトに送信し、最終的にデータベース内のレコードを削除し、更新された位置で応答します。
function deletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
驚いたことに、最も複雑な部分は終わっています。最も重要な部分であるデータベースの対話を分析してみましょう。
4. データベースと対話する
データベースと対話するには、位置を取得、挿入、置換、削除するためのメソッドを作成する必要があります。これらのインタラクションを処理するために、get、save、delete メソッドを備えた post クラスを作成することにしました。このクラスには、データベース接続ファイル (データベースへの接続に使用される) への参照もあります。ログイン、パスワード、およびデータベース名を独自のデータベース情報に置き換える必要があります。
DEFINE ('DB_USER', 'USERNAME');
DEFINE ('DB_PASSWORD', 'PASSWORD');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'DATABASE');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('MySQL に接続できませんでした: ' . mysql_error() );
接続ファイルへの参照とデータベースの名前は、このクラスのコンストラクター内にあります。コンストラクターは次のコードのようになります。
function Post(){
require_once('mysql_connect.php');
$this->table = "informit_ajax";
、
ログイン情報をデータベースに渡すことによって接続を作成します。このメソッドは、データベースにクエリを実行する前にすべてのコア メソッドで再利用されます
。
DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
、
データベース テーブルをループし、データベース行に基づいて XML 文字列を作成し、その文字列をリクエスタに返します
。
$this->dbConnect();
$query = "SELECT * FROM $this->テーブル ORDER BY id";
$result = mysql_db_query (DB_NAME, $query, LINK);
$xml = "＜?xml バージョン="1.0" エンコーディング="ISO-8859-1" ?>n";
$xml .= "＜投稿＞n";
while($row = mysql_fetch_array($result)) {
$xml .= "＜投稿＞n";
$xml .= "<id>" . $row['id'] "</id>n";
$xml .= "<日付>" . $row['日付'] "</日付>n";
$xml .= "<タイトル><![CDATA[" . $row['タイトル'] "]]></タイトル>n";
$xml .= "<説明><![CDATA[" . $row['説明'] "]]></説明>n";
$xml .= "＜/post＞n";
}
$xml .= "＜/posts＞";
mysql_close();
header("Content-Type: application/xml; charset=UTF-8");
エコー$xml;
次の save メソッドは、更新位置と挿入位置を処理することで 2 つの目的を達成します。
function
save($id, $title, $description){
$this->dbConnect();
$query = "SELECT * FROM $this->table WHERE id='$id'";
$result = @mysql_query ($query);
if (mysql_num_rows($result) > 0)
{
$query = "UPDATE $this->table SET title='$title'、description='$description'、date=NOW() WHERE id='$id'";
$result = @mysql_query($query);
}
それ以外
{
$query = "INSERT INTO $this->table (タイトル、説明、日付) VALUES ('$title', '$description', NOW())";
$result = @mysql_query($query);
}
mysql_close();
$this->get();
メソッド
は、パラメーターとして渡された ID に基づいて場所を削除します。次に、get メソッドを呼び出して、新しいデータをリクエスト ファイルに返します。
function delete($id){
$this->dbConnect();
$query = "$this->table WHERE id='$id' から削除";
$result = @mysql_query($query);
mysql_close();
$this->get();
}
5. 包括的なアプリケーション
上記の部分を統合するには、XML HTTP リクエストと PHP オブジェクト間の通信ブリッジとして機能する単純なファイルを作成する必要があります。この時点でのページは、PHP オブジェクトを作成するだけでなく、クエリを受け取り、動的に生成されたメソッド (この場合は get、save、または delete) に変数を渡します。以下のクエリの例には、$method と、信頼できる $id、$title、$description 変数が含まれています。
require_once("../classes/Post.class.php");
$post = 新しいPost();
$post->$method($id, $title, $description);
これらのテクニックについては今後さらに詳しく説明します。今日の Web 開発は再び若々しくダイナミックに見えますが、私たちはこの新しい技術時代の一員になれることを幸運に思っています。