AJAX это технология, которая позволяет работать с html, javascript и php в интерактивном режиме, подгружая по необходимости различные данные. Пропущу исторические факты развития ajax и перейду к примеру с подробным описанием кода. Основные положения
Создание объекта для IE. Сперва пробуем модель Msxml2.XMLHTTP, если не пройдет берем Microsoft.XMLHTTP. Модель зависит от версии Вашего IE. var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
} |
Создание модели для остальных браузеров.
| xmlHttp = new XMLHttpRequest(); |
Создание запросаСоздадим JS функцию которая будет: Формировать GET запрос в php скрипт, из данных вводимых в форму.
Открывать соединение с сервером.
После соединения с сервером, выполнять определенное действие.
Посылать запрос.
| function check() { // Получаем значение из поля ввода
var str = document.getElementById("input").value; // Создать URL для подключения
var url = "check.php?str=" + escape(str); // Открыть соединение с сервером
xmlHttp.open("GET", url, true); // Установить функцию для сервера, которая выполнится после его ответа
xmlHttp.onreadystatechange = updatePage; // SПередать запрос
xmlHttp.send();
} |
Получение данных из php скриптаПолучаем данные в виде строки. function update() {
// Проверяем готовность
if (xmlHttp.readyState == 4) {
// Получаем текст полученный из php скрипта
var response = xmlHttp.responseText;
// Меняем значение поля с ответом
document.getElementById("answer").value = response;
} }
|
Пример создания интерактивной формы с помощью ajaxсоздадим файл form.html <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
function update() {
if (xmlHttp.readyState == 4) {
// Получаем текст из php скрипта
var response = xmlHttp.responseText;
// Меняем значение поля с ответом
document.getElementById("answer").value = response;
}
}
function check() {
// Получаем значение из поля ввода
var str = document.getElementById("input").value; // Создаем URL для подключения
var url = "check.php?str=" + escape(str); // Открываем соединение с сервером
xmlHttp.open("GET", url, true); // Вызываем функцию после ответа сервера на запрос
xmlHttp.onreadystatechange = update; // Передаем запрос
xmlHttp.send();
}
</script>
<body>
<input id="input" type="text" />
<input type="submit" onClick="check()" />
<br>
<input id="answer" type="text" />
</body>
</html> |
это форма, в которой мы вводим какие нибуть данные, к примеру строку для кодирования функцией md5()php скрипт кодирования md5 check.php <? echo md5($_GET[str]); ?> |
Далее используйте полученные знания со своими формами и не только. |
