Iframe’овый Ajax

Хочу поделиться своим способом отправить те или иные данные серверному скрипту и получить ответ от него, без перезагрузки основной страницы. В 95% случаев, такое реализуют посредством XMLHttpRequest в JS, но по моему мнению, это не самый лучший вариант, почему именно он закрепился как «default» для всего, где не нужна перезагрузка страницы, мне не понятно.

Мой способ (на iframe) работает везде и всегда, как рабочая лошадка, для его реализации почти ничего не нужно. А суть в следующем:

Ключевые слова способа:

1. Скрытый iframe на странице и его параметр name.
2. Параметр target тега form.
3. parent – имя основного окна в JS.

Теперь по порядку. У тега <form>, также как у ссылки (<a>), есть параметр target, в значении которого – название окна, в котором будет открыта новая страница (после отправки формы). По умолчанию, форма отправляется в том же окне, страница переходит на адрес, указанный в параметре action формы. Если мы зададим target=»_blank», то форма отправится в соседней вкладке, а если зададим имя скрытого ифрейма, то нужная нам форма отправится на сервер незаметно от посетителя, в том самом скрытом ифрейме. Скриптом мы будем выводить JavaScript код, сможем менять как угодно основное окно.

Перейдем к практике. Напишем, например, проверку валидности формы отправки комментария без перезагрузки страницы.

Создадим 2 файла:

index.php

<form name="form" action="script.php" target="iframe" method="post">
<input type="text" name="name" /> Ваше имя <br />
    Ваш комментарий: <br />
<textarea name="text" style="width: 300px; height: 200px"></textarea><br />
<input type="submit" value="Проверить валидность" />
</form>
<div id="errors" style="background-color: red; color: white;"> </div>
<iframe name="iframe" src="" style="width: 1px; height: 1px; display: none;"></iframe>

Форма, благодаря target=»iframe» будет отправляться в скрытом ифрейме под именем name=»iframe». В слое id=»errors» будут выводиться ошибки.

script.php

<?php
$name = $_POST['name'];
$text = $_POST['text'];
$errors = '<ol>';
//Проверяем имя пользователя
if(!ereg('^[A-Za-zА-Яа-яёЁ0-9\.|-|_| ]{2,60}$', $name)) {
	$errors .= '<li>Имя содержит запрещенные символы или имеет запрещенную длину.</li>';
	$error = true;
}
//Проверяем текст комментария
if(strlen($text) > 200 | strlen($text) < 5) {
	$errors .= '<li>Комментарий слишком короткий или слишком длинный.</li>';
	$error = true;
}

if($error) {
	//Если есть ошибки, выводим их в <div id=errors> родительского окна
	echo '<script language="JavaScript">parent.document.getElementById("errors").innerHTML = "'.$errors.'";</script>';
}
else {
	//Добавляем комментарий в базу
	echo '<script language="JavaScript">alert("Ваш комментарий добавлен");
	parent.document.getElementById("errors").innerHTML = "Ошибок нет";</script>';
}
?>

Скрипт-обработчик формы проверяет введенные данные (имя и емейл), выводит JavaScript, который находит родительское окно и элемент с нужным ID (parent.document.getElementById()), вставляет в него все ошибки (innerHTML).

Вот такой Ajax по-простому.

Самое замечательное в этой технологии то, что она отлично подходит для долгоиграющих скриптов. Например, парсеров. Отправляем форму с данными для парсинга, скрипт парсит и после каждого действия выводит результат в представленном выше виде и сбрасывает буфер ( функция flush() ). При этом, браузеры сразу выполняют сброшенные скрипты, один за другим и выводят в основном окне результаты (вроде «+1 страница … успешно» или «не удалось спарсить страницу …». Все это создает эффект независшей программы.