Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Экзамен / web / example1 / Введение в PHP.doc
Скачиваний:
101
Добавлен:
18.05.2015
Размер:
3 Mб
Скачать

Использование dom

Итак, загружены новые данные, без прерывания работы пользователя с текущей страницей. Полученные данные нужно включить в состав документа, уже отображающегося на экране с помощью структуры объектов DOM. От свойства responseText лучше отказаться, так как его применение потребует дополнительного синтаксического разбора. Гораздо полезнее свойство responseXML, в котором информация изначально представляется в совместимом с DOM виде. В структуре текущего документа необходимо выбрать узел, в состав которого следует включить возвращенные данные, и вызвать метод replaceChild(), заменив старое поддерево новым, прочитанным из responseXML объекта XMLHttpRequest. Выполнив упомянутые действия, получим Ajax-приложение. Ну а чтобы не нарушалась структура, например, чтобы не встречались открывающие дескрипторы без закрывающих, целесообразно вообще отказаться от HTML – гораздо большего доверия заслуживает формат XML. Рассмотрим пример

<?php//index.php

// получим путь к серверу (чтобы не писать руками)

$path = sprintf('http://%s:%d%s',

$_SERVER['HTTP_HOST'],

$_SERVER["SERVER_PORT"],

$_SERVER["PHP_SELF"]

);

$path = str_replace('index.php', 'ajax.php', $path);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>AJAX test</title>

<script type="text/javascript">

// реагируем на событие отправки формы

function onSubmit(form) {

if (window.XMLHttpRequest) { // Mozilla, Safari, ...

// создаем новый объект XMLHttpRequest

httpRequest = new XMLHttpRequest();

// обработчик изменения состояния орбъекта

httpRequest.onreadystatechange = function() {

if (httpRequest.readyState === 4) {

// если ответ готов

if (httpRequest.status === 200) {

box = document.getElementById('box-append_to');

box.innerHTML = box.innerHTML + '<br />' + httpRquest.responseText;

} else {

alert('Во время запроса возникла ошибка');

}

}

};

httpRequest.open('POST', '<?php echo $path;?>');

// чтобы сервер мог разобрать параметры, отправленные через POST

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

httpRequest.send('name=' + encodeURIComponent(form.elements['name'].value) +

'&pass=' + encodeURIComponent(form.elements['pass'].value)

);

}

return false;

}

</script>

</head>

<body>

<form onsubmit="return onSubmit(this);" action="">

<label>Имя</label>

<input type="text" name="name" />

<br />

<label>Пароль</label>

<input type="text" name="pass" />

<br />

<input type="submit" value="Отправить данные" />

</form>

<div id="box-append_to">

</div>

</body>

</html>

<?php

// ответ сервера

if (isset($_POST['name'])) {

print sprintf(

"%s Пришли параметры. Имя: %s, пароль: %s",

date('H:i:s'),

$_POST['name'],

@$_POST['pass']

);

}

?>

Соседние файлы в папке example1