Теперь мы знаем, насколько XMLHttp может упростить выполнение за просов GET, и пора рассмотреть отправку запросов POST. Прежде все го необходимо внести те же самые изменения в файл SaveCustomer. php что и в GetCustomerlnfo. php, т. е. необходимо выкинуть весь посторои ний код HTML и JavaScript, добавить информацию о типе содержимо го и вывести текст:
<?php
header("Content-Type: text/plain");
SsName = $_POST["txtName"]; SsAddress = $_POST["txtAddress"]; SsCity = $_POST["txtCity"]; SsState = $_POST["txtState"]; SsZipCode = $_POST["txtZipCode"]; SsPhone = $_POST["txtPhone"]; $sEmail = $_POST["txtEmail"];
SsStatus = "";
$sDBServer = "your.database.server";
SsDBName = "имя_базы_данных";
SsDBUsername = "имя_пользователя_базы_данных";
SsDBPassword = "пароль_пользователя_базы_данных";
$sSQL = "Insert into Customers(Name,Address,City, State, Zip,Phone, ".
"'E-mail') ".
" values ('$sName', 'SsAddress', '$sCity', 'SsState', ". "'SsZipCode','SsPhone', 'SsEmail') ";
SoLink = mysql_connect($sDBServer,SsOBUsername,SsDBPassword); @mysql_select_db($sDBName) or SsStatus = "Невозможно открыть базу данных'
if($oResult = mysql_query($sSQL)) {
SsStatus = "Добавлен клиент с идентификатором ".mysql_insert_id(); } else {
SsStatus = "При добавлении нового клиента возникла ошибка.". "Информация не была записана.";
}
mysql_close($oLink);
echo SsStatus;
?>
Это полный текст сценария SaveCustomer. php. Обратите внимание, что функция header() вызывается для того, чтобы определить тип выводи¬мых данных, a echo служит для вывода содержимого переменной SsStatus.
Основу главной страницы составляет простая форма, куда вводится информация о новом клиенте:
,
<р>Введите сведения о клиенте:
<р>Имя клиента: Адрес: Город: Область: Почтовый индекс: Телефон: Электронная почта:
Вы наверняка заметили, что изменился обработчик события onsubmit. Теперь вызывается функция sendRequest() (хотя по окончании обработ¬ки события по-прежнему возвращается значение false, чтобы предот¬вратить фактическую отправку формы). Эта функция сначала собира¬ет данные для отправки в запросе POST, затем создает объект XMLHttp и с его помощью отправляет запрос. Данные должны передаваться в формате строки запроса:
name1=value1&name2=value2&name3=vaiue3
Обе части каждого параметра - имя-значение - необходимо подверг¬нуть процедуре кодирования URL, чтобы избежать потери данных при передаче. JavaScript предоставляет для этих целей встроенную функцию encodeURIComponent(). Чтобы создать строку запроса, надо обойти в цикле все поля формы, извлечь имена и значения полей и за¬кодировать их. Все эти действия выполняет функция getRequestBody():
function getRequestBody(oForm) { var aParaffls = new ArrayO;
Эта функция принимает один аргумент - ссылку на форму. Для хран ния отдельных пар имя-значение функция создает массив (aParams Затем в цикле осуществляется обход всех элементов. Для каждого эл мента формы строится строка (sParam), которая добавляется в масси Этот прием помогает избежать многократного выполнения операц конкатенации строк, что, в свою очередь, может замедлить исполн ние функции в некоторых броузерах. На последнем шаге вызывает метод join() массива, которому передается символ амперсанда. Эт метод объединяет все пары имя-значение в одну строку, разделяя символами амперсанда.
Операция конкатенации строк в большинстве броузеров обходится весьма н дешево в смысле производительности, потому что строки в них представ.^ ют собой неизменяемые объекты, т. е. после того как строка была созда она уже не может изменить свое значение. Таким образом, операция конкат нации двух строк начинается с размещения новой строки и последующего к пирования содержимого двух строк в нее. Многократное повторение это процесса может привести к существенному замедлению. Поэтому следу сводить количество операций конкатенации к минимуму и для объединен большого числа строк применять метод join() массива.
Функция sendRequest(), которая обращается к функции getRequestB dy() и отправляет запрос:
Tf Unction''sendRequesЂ(y"'(?K
var oForm =. document ;:f*ojms[0];7>^ var sBody = getRequestBody(oForm);
i-y var:oXmlHttp = zXmlHttp.с reateRequest(); oXmlHttp.open("post", oForm.action, true); oXmlHttp.setRequestHeader("Content-Type",
"app]ication/x-www-form-u rlencoded");
oXmlHttp.on readystatechange = function () { if (oXmlHttp.readyState == 4) {
Как и в предыдущих примерах, эта функция прежде всего получает ссылку на форму и запоминает ее в переменной (oForm). Затем создает¬ся тело запроса и сохраняется в переменной sBody. Далее создается в настраивается объект XMLHttp. Обратите внимание, что на этот раз в первом аргументе методу ореп() передается тип запроса post, а во вто¬ром - содержимое атрибута oForm.action (опять же ради того, чтобы сценарий мог использоваться для работы с несколькими страницами). Обратите также внимание на то, как производится настройка заголов¬ка запроса. Когда броузер отправляет форму серверу, он записывает в заголовок Content-Type значение application/x-www-form-urlencoded. Большинство языков, применяемых на стороне сервера, требуют это¬го, чтобы корректно выполнить синтаксический анализ данных, от¬правленных методом POST; вот почему этот момент очень важен.
Обработчик события onreadystatechange очень похож на обработчик из примера с запросом GET. Единственное отличие состоит в том, что вме¬сто функции displayCustomerlnfoO вызывается saveResultQ. Последняя строка функции также очень важна: в ней методу send() передается строка sBody, благодаря чему эта строка становится телом запроса. Этот порядок действий фактически совпадает с тем, что делает броузер, по¬этому вся серверная часть должна работать так, как мы того ожидаем.