 |
[:NetFAQ://] |
 |
|
[:NetFAQ://] |
|
|
[:NetFAQ://] |
|
|
[:NetFAQ://] |
|
|
 |
 Уроки AJAX. Практика POST запросов.
|
 |
|
Уроки AJAX. Отправка данных методом POST.
Основное преимущество POST запросов – это их большая безопасность и функциональность по сравнению с GET-запросами.
Поэтому метод POST чаще используют для передачи важной информации, а также информации большого объема.
В данном уроке мы напишем AJAX приложение для добавления новой информации о клиентах, отправка
запроса и получение ответа будет производиться именно методом POST.
Стоит отметить что ShadX уже писал о том как отправить форму на сервер методом 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
header("Content-Type: text/plain; charset=windows-1251");
$name = $_POST['txtName'];
$adress = $_POST['txtAdress'];
$phone = $_POST['txtPhone'];
$email = $_POST['txtEmail'];
$status = "";
$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");
$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;
?> |
А теперь наш 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>
Вот что в итоге должно получиться:
Надеюсь урок для вас прошёл не зря!
До новых встреч :-)
Опубликовано: 2008-06-26 17:14:12 purple_m0nkey
Комментарии
| w3c.kz |
Спасибо!!!
|
|
| Guest |
Еще неплохо было бы добавлять размер POST запроса.
request.setRequestHeader("Content-length", sBody.length);
|
|
| Dimok |
Interesnaja schtuka no choto malo cho ponjatno,naprimer kak operator echo w PHP feile wiwodit informaciju na HTML
|
|
| Даниил |
Dimok изучай PHP! *rolf*
|
|
| Эльрафир |
Кусочек данной статьи (не буду вдаватся какой)помог очень. Одну из функций с благодарностью добавил в коллекцию "под рукой" ))
|
|
| Избранный |
Дырявый скрипт, если в форму захотите вставлять чекбоксы или радио переключатели придется еще дорабатывать
|
|
| Vasiliy |
а как потом поставить редирект ?
|
|
| хэндикрафтика |
спасибо, дружище
|
|
| Олег |
Спасибо, исправил мелкие ошибки и заработало!!!
Как по мне это простой и понятный а главное робочий пример что само по себе редкость ( до этой статьи перелопатил кучу галимого материала).
|
|
| Денис |
Начал изучать аякс, наткнулся на ваши уроки. Стало более-менее понятно. Спасибо.
|
|
| антон |
спасибо за статью, разобрав работающий пример понял принципы работы с аяксом, причем довольно быстро , примного благодарен=)))
|
|
| Иван |
А как убрать форму после нажатия кнопки отправить?
Заранее благодарен.
|
|
| Пластилин |
Спасибо
|
|
| Анна |
атрибут action переводит выполнение программы на станицу SaveCustomer.php(где выподится только запить со статусом) и после программа не выполняется... как обойти?
|
|
| Bezonich |
Спасибо за статью, очень сильно помогла%)
п.с.: подправьте там код, а теряются теги
|
|
|
то что нужно. спасибо
|
|
| Fighter |
Строка var oForm = document.forms[0]; - лишняя. Гораздо эффективнее описать функцию sendRequest() как sendRequest(oForm) и вызывать ее потом с параметром this:
|
|
| Fighter |
Упс, скрипт сайта режет теги... Вызыватьаот так: |
|
|
Оставить комментарий:
|
|
|
|
[:NetFAQ://] |
|
|
|
[:NetFAQ://] |
|
|
[:NetFAQ://] |
|
|
[:NetFAQ://] |
|
|
[:NetFAQ://] |
|
|
Материалы