1. Введение
Сегодня существует довольно много веб-приложений, таких как Backpack, Blinksale и Gmail, которые интегрируют технологию баз данных с AJAX. Эта интеграция оказывает огромное влияние на веб-приложения и взаимодействие с пользователем, предоставляя мощную технологию взаимодействия с базой данных без обновления браузера, а это означает, что данные могут передаваться в режиме реального времени, пока пользователь продолжает другие взаимодействия.
В данной статье речь пойдет о вышеописанном механизме интеграции технологий. Также предоставляется полный справочный исходный код. Этот пример представляет собой простое приложение для регистрации должностей, в котором каждое название должности содержит название, описание и дату, что позволяет пользователям добавлять, редактировать и удалять названия должностей. Все это основные операции, которые вы выполняете при работе с данными записей базы данных, но это приложение идет еще дальше. Название должности можно изменить в редактируемую форму – оно будет сохранено или удалено из базы данных и отображено в новом состоянии без обновления браузера и прерывания работы пользователя.
В этой статье я предполагаю, что у вас есть базовое понимание AJAX, MySQL и PHP или аналогичного серверного языка. Если вы еще не создали объект XML HTTP-запроса, вы можете сначала обратиться к моей статье «Как использовать AJAX». Далее, давайте сначала обсудим проблему базы данных.
2. Создайте базу данных.
Первое, что вам нужно сделать, это создать таблицы базы данных для хранения данных по этим позициям. Я создал таблицу MySQL под названием «informit_ajax» — в ней есть поля идентификатора, заголовка, описания и даты — все эти переменные будут неоднократно встречаться в этой статье. Вот код для создания таблицы:
CREATE TABLE ’informit_ajax’ (
’id’ int(11) NOT NULL auto_increment,
'дата' datetime NOT NULL по умолчанию '0000-00-00 00:00:00',
длинный текст 'описание' НЕ NULL,
'title' varchar(100) NOT NULL по умолчанию '',
ПЕРВИЧНЫЙ КЛЮЧ ('id')
) TYPE=MyISAM;
Вы можете выполнить этот код, используя любой инструмент запросов MySQL или язык, используемый для разработки приложения. После подготовки базы данных следующим шагом будет создание файлов внешнего интерфейса, которые будут отправлять запросы к серверной части PHP.
3. Сделайте запрос.
Индексный HTML-файл здесь представляет собой простой заполнитель данных — он будет анализироваться из базы данных. Этот файл содержит ссылки на файлы JavaScript и CSS; он также содержит обработчик загрузки, который выполняет первый запрос, и три тега div:
Макет — используется для центрирования загрузки содержимого страницы
— загружает сообщения во время загрузки запрошенных данных, которые будут получены Объект HTTPRequest
· сообщения, используемые для отображения данных каждого проанализированного задания
<head>
＜title＞Как интегрировать базу данных с AJAX＜/title＞
＜ссылка href="css/layout.css" rel="таблица стилей" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
＜script src="js/post.js"＞＜/script＞
＜/голова＞
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="layout" 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, который мы создадим позже, но сначала нам нужно создать методы анализа для ответа на запрос; Файл запроса 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 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='delete this post' onclick="javascript:deletePost("+ _id +");"＞"
+ "<input type='button' name='submit' value='save this post' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+ "＜/дел＞"
+ "＜p＞"nbsp;＜/p＞";
Текстовая версия каждого сообщения просто отображает заголовок, описание и дату, а также ссылку "изменить это сообщение". Версия формы каждого сообщения имеет три кнопки:
·"Отменить Кнопка " - просто переключает статус сообщения обратно на текстовую версию.
· Кнопка "удалить это сообщение" - отправляет идентификатор текущего сообщения в объект PHP для удаления его из базы данных.
· Кнопка "сохранить это сообщение" - позволяет пользователю сохранить новое или отредактированное задание на сервере.
Основными методами обработки запросов на стороне сервера являются методы onResponse, saveNewPost, deletePost и getPost, а также методы получения и установки, которые сохраняют текущий индекс задания; . метод предоставляет текущее значение индекса этим основным методам, чтобы правильную позицию можно было обновить с помощью правильной информации на основе этого индекса. Вот краткое описание каждого основного метода (за исключением onResponse, поскольку мы уже рассмотрели его функциональность). Описание и пример кода:
· Следующий метод saveNewPost сохраняет новое сообщение, собирая и отправляя входные значения формы объекту PHP, а также устанавливает метод getPost в качестве метода обратного вызова onreadystatechange:
function saveNewPost(_id, _index){
var newDescription = document.getElementById("formDescription_"+ _index).value;
вар 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(){
если (checkReadyState (запрос)) {
вар ответ = 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());
}
}
· Приведенный ниже метод deletePost отправляет текущий индекс в качестве запроса к объекту PHP, который в конечном итоге удалит запись в базе данных и ответит обновленной позицией:
function deletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
На удивление самое сложное уже позади. Разберем самую ответственную часть — взаимодействие с базой данных.
4. Взаимодействие с базой данных
Для взаимодействия с базой данных необходимо создать методы получения, вставки, замены и удаления позиций. Я решил создать класс сообщений с методами get, save и delete для обработки этих взаимодействий. Этот класс также имеет ссылку на файл подключения к базе данных (используемый для подключения к базе данных). Вы должны заменить логин, пароль и имя базы данных на информацию о вашей собственной базе данных.
DEFINE('DB_USER', 'ИМЯ ПОЛЬЗОВАТЕЛЯ');
ОПРЕДЕЛИТЬ('DB_PASSWORD', 'ПАРОЛЬ');
DEFINE («DB_HOST», «локальный хост»);
DEFINE('ИМЯ_БД', 'БАЗА ДАННЫХ');
$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";
}
Следующий метод dbConnect отвечает за создание соединения — путем передачи данных для входа в базу данных этот метод повторно используется во всех основных методах перед запросом к базе данных:
function dbConnect(){
DEFINE('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}
Следующий метод get проходит по таблице базы данных, создает строку XML на основе строки базы данных и возвращает строку запрашивающей стороне:
function get(){
$this->dbConnect();
$query = "ВЫБРАТЬ * ИЗ $this->таблицы ORDER BY id";
$result = mysql_db_query (DB_NAME, $query, LINK);
$xml = "＜?xml version="1.0"coding="ISO-8859-1" ?＞n";
$xml .= "<сообщений>n";
while($row = mysql_fetch_array($result)) {
$xml .= "＜post＞n";
$xml .= "＜id＞" . $row['id'] "＜/id＞n";
$xml .= "＜дата＞" . $row['date'] "＜/дата＞n";
$xml .= "＜title＞＜![CDATA[" . $row['title'] "]]＞＜/title＞n";
$xml .= "＜description＞＜![CDATA[" . $row['description'] . "]]＞＜/description＞n";
$xml .= "＜/post＞n";
}
$xml .= "＜/posts＞";
mysql_close();
header("Тип контента: application/xml; charset=UTF-8");
эхо $xml;
}
Следующий метод сохранения достигает двух целей, обрабатывая позиции обновления и вставки:
function save($id, $title, $description){
$this->dbConnect();
$query = "SELECT * FROM $this->table WHERE id='$id'";
$result = @mysql_query ($query);
если (mysql_num_rows($result) > 0)
{
$query = "UPDATE $this->table SET title='$title',description='$description', date=NOW() WHERE id='$id'";
$result = @mysql_query($query);
}
еще
{
$query = "ВСТАВИТЬ В $this->таблицу (заголовок, описание, дата) ЗНАЧЕНИЯ ('$title', '$description', NOW())";
$result = @mysql_query($query);
}
mysql_close();
$this->get();
}
Приведенный ниже метод удаления отвечает за удаление местоположения на основе идентификатора, переданного в качестве параметра. Затем вызовите метод get, чтобы вернуть новые данные в файл запроса:
function delete($id){
$this->dbConnect();
$query = "УДАЛИТЬ ИЗ $this->таблицы WHERE id='$id'";
$result = @mysql_query($query);
mysql_close();
$this->get();
}
5. Комплексное приложение
Чтобы объединить вышеперечисленные части вместе, необходимо создать простой файл, который будет служить связующим звеном между запросами XML HTTP и объектами PHP. Страница на этом этапе не только создает объекты PHP, но также получает запросы и передает переменные динамически генерируемым методам — в данном случае get, save или delete. Пример запроса ниже включает метод $ и надежные переменные $id, $title и $description.
require_once("../classes/Post.class.php");
$пост = новый пост();
$post->$method($id, $title, $description
Мы обсудим эти методы дальше в будущем
);Сегодняшняя веб-разработка снова выглядит молодой и динамичной, и нам повезло, что мы являемся частью этой новой технологической эры.