Теперь мы знаем, насколько XMLHttp может упростить выполнение запросов GET, и пора рассмотреть отправку запросов POST. Прежде всего необходимо внести те же самые изменения в файл SaveCustomer.php, что и в GetCustomerlnfo.php,т.е. необходимо выкинуть весь посторонний код HTML и JavaScript,добавить информацию о типе содержимого и вывести текст:
<?php
header("Content-Type: text/plain");
$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];
$sStatus = "";
$sDBServer = "your.database.server";
$sDBName = "имя_базы_данных";
$sDBUsername = "имя_лользователя_базы_данных";
$sDBPassword = "пароль_пользователя_базы_данных";
SsSQL = "Insert into Customers(Name,Address,City,State,Zip,Phone, ".
"'E-mail') ".
" values ('$sName', '$sAddress', '$sCity', '$sState', ".
"'$sZipCode','$sPhone', '$sEmail')";
$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sStatus = "Невозможно открыть базу данных"
if($oResult = mysql_query($sSQL)) {
$sStatus = "Добавлен клиент с идентификатором ",mysql_insert_id();
} else {
SsStatus = "При добавлении нового клиента возникла ошибка.".
"Информация не была записана.";
}
mysql_close($oLink);
echo $sStatus;*
?>
Это полный текст сценария SaveCustomer. php. Обратите внимание, что функция header() вызывается для того, чтобы определить тип выводимых данных, a echo служит для вывода содержимого переменной $sStatus.
Основу главной страницы составляет простая форма, куда вводится информация о новом клиенте:

<р>Введите сведения о клиенте:
<р>Имя клиента:
Адрес:
Город:
Область:
Почтовый индекс:
Телефон:
Электронная почта:
input type="submit" value="Сохранить информацию о клиенте" />

Вы наверняка заметили, что изменился обработчик события onsubmit. Теперь вызывается функция sendRequest() (хотя по окончании обработки
события по-прежнему возвращается значение false, чтобы предотвратить фактическую отправку формы). Эта функция сначала собирает данные для отправки в запросе POST, затем создает объект XMLHttp и с его помощью отправляет запрос. Данные должны передаваться
в формате строки запроса:
name1=rvalue1&name2=value2&name3=value3i
Обе части каждого параметра - имя-значение - необходимо подвергнуть процедуре кодирования URL, чтобы избежать потери данных при передаче. JavaScript предоставляет для этих целей встроенную функцию encodeURIComponent(). Чтобы создать строку запроса, надо обойти в цикле все поля формы, извлечь имена и значения полей и закодировать их. Все эти действия выполняет функция getRequestBody():
function getRequestBody(oForm) {
var aParams = new ArrayO;
for (var i=0 ; i < oForm.elements,length; i++) {
var sParam += "=";
encodeURIComponent(oForm.elements[i].name);
sParam += "=";
sParam += encodeURIComponent(oForm,elements[i],value);
aParams.push(sParam);
return aParams.joln("&");
}
Эта функция принимает один аргумент - ссылку на форму. Для хранения отдельных пар имя-значение функция создает массив (aParams)Затем в цикле осуществляется обход всех элементов.Для каждого элемента формы строится строка (sParam), которая добавляется в массив
Этот прием помогает избежать многократного выполнения операции конкатенации строк, что, в свою очередь, может замедлить исполнение функции в некоторых броузерах. На последнем шаге вызывается
метод join( ) массива, которому передается символ амперсанда. Эта метод объединяет все пары имя-значение в одну строку, разделяя их символами амперсанда.
Операция конкатенации строк в большинстве броузеров обходится весьма дешево в смысле производительности, потому-что строки в них представляют собой неизменяемые объекты, т.е. после того как строка была создана,она уже не может изменить свое знамение. Таким образом, операция конкатенации двух строк начинается с размещения новой строки и последующего копирования содержимого двух строк в нее. Многократное повторение этого процесса может привести к существенному замедлению. Поэтому следуем сводить количество операций конкатенации к минимуму и для объединена
большого числа строк применять метод join() массива.
Функция sendRequest(), которая обращается к функции getRequestBody() и отправляет запрос:
function sendRequest() {
var oForm = document.forms[0];
var sBody = getRequestBody(oForm);
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open("post", oForm.action, true);
oXmlHttp.setRequestheader("Content-Type",
"application/x-www-form-urlencoded");
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
saveResult(oXmlHttp.responseText);
} else {
saveResult("Обнаружена ошибка: " + XmlHttp.statusText);
}
}
};
oXmlHttp.send(sBody):
Как и в предыдущих примерах, эта функция прежде всего получает ссылку на форму и запоминает ее в переменной (oForm). Затем создается тело запроса и сохраняется в переменной sBody. Далее создается и настраивается объект XMLHttp. Обратите внимание, что на этот раз
в первом аргументе методу ореn() передается тип запроса post, а во втором - содержимое атрибута oForm.action (опять же ради того, чтобы сценарий мог использоваться для работы с несколькими страницами).
Обратите также внимание на то, как производится настройка заголовка запроса. Когда броузер отправляет форму серверу, он записывает в заголовок Content-Type значение application/x-www-form-urlencoded.
Большинство языков, применяемых на стороне сервера, требуют этого,чтобы корректно выполнить синтаксический анализ данных, отправленных методом POST; вот почему этот момент очень важен.
Обработчик события onreadystatechange очень похож на обработчик из примера с запросом GET. Единственное отличие состоит в том, что вместо функции displayCustomerlnfoO вызывается saveResult(). Последняя
строка функции также очень важна: в ней методу send() передается строка sBody, благодаря чему эта строка становится телом запроса. Этот порядок действий фактически совпадает с тем, что делает броузер, поэтому
вся серверная часть должна работать так, как мы того ожидаем.