AJAX. Отправка данных методом POST. (Rating: +9)

Свежие Креативы и море позитива !!!
Print RSS
AJAX. Отправка данных методом POST.

Основное преимущество POST запросов – это их большая безопасность и функциональность по сравнению с GET-запросами. Поэтому метод POST чаще используют для передачи важной информации, а также информации большого объема. В данном уроке мы напишем AJAX приложение для добавления новой информации о клиентах, отправка запроса и получение ответа будет производиться именно методом POST.

Прежде всего советую изучить предыдущий урок, в нём мы рассамтривали GET запросы и написали web-приложение для просмотра информации о клиентах из БД. Структура таблицы осталась прежней:

CREATE TABLE `Customers` (
`CustomerId` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`Name` varchar(255) NOT NULL default '',
`Adress` varchar(255) NOT NULL default '',
`Phone` varchar(255) NOT NULL default '',
`E-mail` varchar(255) NOT NULL default ''
);

Давайте напишем наше "ядро" на PHP. Скрипт будет вносить новую запись в таблицу с клиентами, сохраним его под именем SaveCustomer.php.
<?php

header("Content-Type: text/plain; charset=windows-1251");
        
        /* данные переданные методом POST */
        
        $name   =  $_POST['txtName']; 
        $adress =  $_POST['txtAdress'];
        $phone  =  $_POST['txtPhone'];
        $email  =  $_POST['txtEmail'];
        
        $status = "";
        
        /* всё что нужно для подключения к MySQL серверу. замените на своё. */
    
        $host = "localhost"; 
        $user = "user";
        $pass = "pass";
        $database = "database";
        
        $link = mysql_connect($host,$user,$pass) or die(mysql_error());
        @mysql_select_db($database) or $status = "Невозможно открыть базу данных $database";
        mysql_query("SET NAMES cp1251");
        
        /* фильтруем все спец-символы. защита от SQL Injection */
        
        $name = mysql_real_escape_string($name);
        $adress = mysql_real_escape_string($adress);        
        $phone = mysql_real_escape_string($phone);
        $email = mysql_real_escape_string($email);        
        
        /* Тоже немаловажная часть. Решает все проблемы с кодировкой русских символов.*/
        
        $name = iconv("UTF-8", "WINDOWS-1251", $name);   
        $adress = iconv("UTF-8", "WINDOWS-1251", $adress);   
        $phone = iconv("UTF-8", "WINDOWS-1251", $phone);   
        $email = iconv("UTF-8", "WINDOWS-1251", $email);   
        
        $query = "INSERT INTO `Customers`(`Name`,`Adress`,`Phone`,`E-mail`) VALUES('$name','$adress','$phone','$email')";
        
        if($result = mysql_query($query)) {
            $status = "Добавлен клиент с идентификатором ".mysql_insert_id();
        } else {
            $status = "При добавлении нового клиента произошла ошибка. Информация не была записана.";
        }
        
        mysql_close($link);
        
        echo $status; /* выводим статус исполнения */
?>

Код прост и можно сказать "самодокументируется". Вкраце механизм работы: беруться POST данные, фильтруются на спец-символы, перекодируются в кирилицу из UTF-8, затем пробуем занести их в нашу таблицу. В случае успеха возвращается идентификатор нового клиента, если произошла ошибка, пользователя об этом тоже оповестят.

А теперь наш AJAX-интерфейс (saver.html), коментарии внутри кода.

<html>
<head>
<title>Добавление информации о клиентахtitle>
<meta http-equiv="Content-Type: text/html; charset=windows-1251">

<script language="JavaScript">

function createXMLHttp() {
if(typeof XMLHttpRequest != "undefined") { // для браузеров аля Mozilla

return new XMLHttpRequest();
} else if(window.ActiveXObject) { // для Internet Explorer (all versions)
var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
"Microsoft.XMLHttp"
];
for (var i = 0; i < aVersions.length; i++) {
try { //
var oXmlHttp = new ActiveXObject(aVersions[i]);

return oXmlHttp;
} catch (oError) {

}
}
throw new Error("Невозможно создать объект XMLHttp.");
}
}

/* Очень важная функция, обратите на неё внимание.
Формирует строку запроса "name1=value1&name2=value2&name3...".
Принимает один аргумент - ссылку на форму.
*/

function getRequestBody(oForm) {
var aParams = new Array();
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.join("&");
}


/* В этой ф-ции мы создаём объект XmlHttp, формируем запрос, инициализируем перехватчик состояний
onreadystatechange, и посылаем наш запрос.

Обратите внимание, что во втором аргументе метода open(..) мы передаём
ссылку на oForm.action, это сделано как из соображений безопасности, так и ради
того что-бы сценарий можно-было бы использовать для работы с несколькими страницами.

Так-же, стоит отметить факт отправки дополнительного заголовка: "appilaction/x-www-form-urlencoded"
Большинство языков (в том числе и PHP), требуют этого, для корректного выполнения
синтаксического анализа пришедших данных. Этот момент очень важен.

*/

function sendRequest() {
var oForm = document.forms[0];
var sBody = getRequestBody(oForm);
var oXmlHttp = createXMLHttp();

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("Ошибка: " + oXmlHttp.statusText);
}
}
};

oXmlHttp.send(sBody);
}

function saveResult(sText) {
var sElem = document.getElementById("divStatus");
sElem.innerHTML = sText;
}


script>
head>
<body>
<center>
<form method="POST" action="SaveCustomer.php" OnSubmit="sendRequest(); return false">
<pre>
<p>Ввведите сведения о клиенте:<br>
Имя: <input type="text" name="txtName" value=""><br>
Адрес: <input type="text" name="txtAdress" value=""><br>
Телефон: <input type="text" name="txtPhone" value=""><br>
E-mail: <input type="text" name="txtEmail" value=""><br>
<input type="submit" value="Отправить">p><br>
pre>
form>
<pre><div id="divStatus">div>pre>
center>
body>
html>

Вот что в итоге должно получиться

Надеюсь урок для вас прошёл не зря! До новых встреч :-)

(Источник)
Added: Станислав 20.08.2010 / 18:41
AJAX, JavaScript, PHP
Rating: +9
Views: 4065
Comments (8) »