Integrieren Sie Datenbanktechnologie in die Ajax-Entwicklung

+ "＜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 +"＜/ Textbereich＞＜/div＞"
+ "＜div class='date'＞"+ _date +"＜/div＞"
+ "＜input type='button' name='cancel' value='cancel' onclick="javascript:toggle('"+ i +"');"＞"
+ "＜input type='button' name='delete' value='diesen Beitrag löschen' onclick="javascript:deletePost("+ _id +");"＞"
+ ""
+ „＜/div＞“
+ "＜p＞"nbsp;＜/p＞";

Die Textversion jedes Beitrags zeigt lediglich den Titel, die Beschreibung und das Datum sowie einen Link „Diesen Beitrag bearbeiten“ an. Die Formularversion jedes Beitrags verfügt über drei Schaltflächen:

· „Abbrechen

“.

"-Schaltfläche – schaltet einfach den Status des Beitrags zurück auf die Textversion.

· Schaltfläche „Diesen Beitrag löschen“ – sendet die ID des aktuellen Beitrags an das PHP-Objekt, um ihn aus der Datenbank zu löschen.

· Schaltfläche „Diesen Beitrag speichern“ – Ermöglicht dem Benutzer, den neuen oder bearbeiteten Job auf dem Server zu speichern.

Die Kernmethoden für die Verarbeitung der serverseitigen Anforderungskommunikation sind die Methoden onResponse, saveNewPost, deletePost und getPost. Außerdem gibt es Getter- und Setter-Methoden, die den aktuell ausgeführten Jobindex speichern .-Methode stellt den aktuellen Indexwert für diese Kernmethoden bereit, sodass die richtige Position mit den richtigen Informationen basierend auf diesem Index aktualisiert werden kann. Hier ist eine kurze Zusammenfassung für jede Kernmethode (mit Ausnahme von onResponse, da wir uns zuvor mit deren Funktionalität befasst haben). . Beschreibung und Codebeispiel:

· Die folgende saveNewPost-Methode speichert den neuen Beitrag, indem sie die Formulareingabewerte sammelt und an ein PHP-Objekt sendet und die getPost-Methode als onreadystatechange-Rückrufmethode festlegt:

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);
}

· Die folgende getPost-Methode ist eine Callback-Methode – sie ist für die Aktualisierung eines einzelnen Beitrags verantwortlich, wenn eine Antwort vom PHP-Objekt empfangen wird:

function getPost(){
if(checkReadyState(request)) {
var Response = 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;
toggle(getIndex());
}
}

· Die folgende deletePost-Methode sendet den aktuellen Index als Anfrage an das PHP-Objekt, das letztendlich den Datensatz in der Datenbank löscht und mit einer aktualisierten Position antwortet:

function deletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}

Überraschenderweise ist der komplizierteste Teil hinter uns. Lassen Sie uns den kritischsten Teil analysieren – die Datenbankinteraktion.

4. Mit der Datenbank interagieren

Um mit der Datenbank zu interagieren, müssen Sie Methoden zum Abrufen, Einfügen, Ersetzen und Löschen von Positionen erstellen. Ich habe mich entschieden, eine Post-Klasse mit den Methoden „get“, „save“ und „delete“ zu erstellen, um diese Interaktionen zu verarbeiten. Diese Klasse verfügt auch über einen Verweis auf die Datenbankverbindungsdatei (die zum Herstellen einer Verbindung zur Datenbank verwendet wird). Sie müssen den Benutzernamen, das Passwort und den Datenbanknamen durch Ihre eigenen Datenbankinformationen ersetzen.

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 ('Konnte keine Verbindung zu MySQL herstellen: ' . mysql_error() );

Der Verweis auf die Verbindungsdatei und der Name der Datenbank befinden sich im Konstruktor dieser Klasse. Ihr Konstruktor sollte dem folgenden Code ähneln:

function Post(){
require_once('mysql_connect.php');
$this->table = "informit_ajax";
}

Die folgende dbConnect-Methode ist für die Herstellung der Verbindung verantwortlich. Durch die Übergabe der Anmeldeinformationen an die Datenbank wird diese Methode in allen Kernmethoden wiederverwendet, bevor die Datenbank abgefragt wird:

function dbConnect(){;
DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}

Die folgende Get-Methode durchläuft die Datenbanktabelle, erstellt eine XML-Zeichenfolge basierend auf der Datenbankzeile und gibt die Zeichenfolge an den Anforderer zurück:

function get(){
$this->dbConnect();
$query = "SELECT * FROM $this->table ORDER BY id";
$result = mysql_db_query (DB_NAME, $query, LINK);
$xml = "＜?xml version="1.0" binding="ISO-8859-1" ?＞n";
$xml .= "＜beiträge＞n";
while($row = mysql_fetch_array($result)) {
$xml .= "＜post＞n";
$xml .= "＜id＞" . $row['id'] "＜/id＞n";
$xml .= "＜date＞" . $row['date'] "＜/date＞n";
$xml .= "＜title＞＜![CDATA[" . $row['title'] "]]＞＜/title＞n";
$xml .= "＜description＞＜![CDATA[" . $row['description'] "]]＞＜/description＞n";
$xml .= "＜/post＞n";
}
$xml .= "＜/posts＞";
mysql_close();
header("Content-Type: application/xml; charset=UTF-8");
echo $xml;
}

Die folgende Speichermethode erfüllt zwei Zwecke, indem sie Aktualisierungs- und Einfügepositionen verarbeitet:

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);
}
anders
{
$query = "INSERT INTO $this->table (title, description, date) VALUES ('$title', '$description', NOW())";
$result = @mysql_query($query);
}
mysql_close();
$this->get();
}

Die folgende Löschmethode ist für das Löschen eines Standorts basierend auf der als Parameter übergebenen ID verantwortlich. Rufen Sie dann die get-Methode auf, um die neuen Daten an die Anforderungsdatei zurückzugeben:

function delete($id){
$this->dbConnect();
$query = "DELETE FROM $this->table WHERE id='$id'";
$result = @mysql_query($query);
mysql_close();
$this->get();
}

5. Umfassende Anwendung

Um die oben genannten Teile miteinander zu integrieren, muss eine einfache Datei erstellt werden, die als Kommunikationsbrücke zwischen XML-HTTP-Anfragen und PHP-Objekten dient. Die Seite erstellt an dieser Stelle nicht nur PHP-Objekte, sondern empfängt auch Abfragen und übergibt Variablen an dynamisch generierte Methoden – in diesem Fall get, save oder delete. Eine Beispielabfrage unten enthält eine $method und die zuverlässigen Variablen $id, $title und $description.

require_once("../classes/Post.class.php");
$post = neuer Beitrag();
$post->$method($id, $title, $description);

Wir werden diese Techniken in Zukunft weiter besprechen. Die heutige Webentwicklung sieht wieder jung und dynamisch aus und wir haben das Glück, Teil dieser neuen technologischen Ära zu sein.