Отправка формы через AJAX на javascript без перезагрузки страницы

AJAX это самая популярная web технология.
К сожалению javascript метод XMLHTTPRequest не позволяет отправлять на сервер файлы.
Конечно можно придумать изощренный способ, но он будет работать не во всех браузерах, да и будет слишком громоздким.
Я посмотрел множество возможных вариантов скрытой отправки формы с помощью различных библиотек, а так же на чистом javascript, в итоге мое внимание привлекла простенькая библиотека scriptjava library написанная на яваскрипте (ее описание я увидел на википедии).

В этой статье я хочу показать как можно отправлять любую форму на сервер через AJAX, в том числе и форму с файлами.

Перед тем как писать функцию отправки формы, я подключил библиотеку между тегами head

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Разработка функции отпрвки формы сводится к минимуму

<script type="text/javascript">
	function SendForm() {
		//отправка формы на сервер
		$$f({
			formid:'test_form',//id формы
			url:'comment.php',//адрес на серверный скрипт, такой же как и в форме
			onstart:function () {//действие при начале отправки
				$$('result','начинаю отправку');//в элемент с id="result" выводим уведомление
			},
			onsend:function () {//действие по окончании отправки
				$$('result',$$('result').innerHTML+'<br />комментарий успешно отправлен');//в элемент с id="result" выводим результат
			}
		});
	}
</script>

на самом деле функцию можно упростить и она будет выглядеть так, решать вам

<script type="text/javascript">
	function SendForm() {
		//отправка формы на сервер
		$$f({
			formid:'test_form',//id формы
			url:'comment.php'//адрес на серверный скрипт, такой же как и в форме
		});
	}
</script>

В функции мы указываем id формы, а так же ссылку на серверный файл обработчик.

Теперь на странице нужно создать форму и кнопку по которой эта форма будет отправляться

<form id="test_form" action="comment.php" method="post">
	Имя: <input type="text" name="name" /><br />
	Комментарий: <textarea name="comment"></textarea>
</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendForm();">Отправить форму через Ajax</div><br />

Вот собственно и все что касается обычной формы.
Для отправки формы с файлами, переписывать функцию не нужно.
Нужно только поменять саму форму:

<form id="test_form" method="post" enctype="multipart/form-data" onSubmit="">
<input class="file_form" type="file" name="upload_file" />
</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendFile();">Отправить файл через Ajax</div><br />

Единственная проблема это получить ответ от сервера, а не от яваскрипта о том что файл загрузился.
Тут конечно прийдется прибегнуть к серверному языку.
На примере PHP я покажу как это делается:

<?php
if($_FILES['upload_file']['size']>0) {
	echo'
	<script type="text/javascript">
		var elm=parent.window.document.getElementById("result");
		elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт";
 	</script>
	';
}
?>

В данном случае нужно использовать parent.window для получения доступа к окну с формой.

Более подробную информацию о библиотеке и ее возможностях можно узнать на википедии ^[1]

Автор: olololchik