Примеры работы с AJAX. Отправка GET, POST, HEAD запросов через AJAX на javascript.

Работа с Ajax, отправка post, get, head запросов на сервер.

Прежде чем работать с аяксом поместите на сайте вот такой код:

<div id="result">Тут будет ответ от сервера</div><br /><br />
<div onclick="SendGet();">Отправить GET запрос через Ajax</div><br />
<div onclick="SendPost();">Отправить POST запрос через Ajax</div><br />
<div onclick="SendHead();">Отправить HEAD запрос через Ajax</div><br />

Затем подключите к своему сайту перед тегом ScriptJava фреймворк, добавив вот такой код:

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

Теперь давайте напишем функции для отправки ajax запросов:

<script type="text/javascript">
function SendGet() {
	//отправляю GET запрос и получаю ответ
	$$a({
		type:'get',//тип запроса: get,post либо head
		url:'ajax.php',//url адрес файла обработчика
		data:{'q':'1'},//параметры запроса
		response:'text',//тип возвращаемого ответа text либо xml
		success:function (data) {//возвращаемый результат от сервера
			$$('result',$$('result').innerHTML+'<br />'+data);
		}
	});
}

function SendPost() {
	//отправляю POST запрос и получаю ответ
	$$a({
		type:'post',//тип запроса: get,post либо head
		url:'ajax.php',//url адрес файла обработчика
		data:{'z':'1'},//параметры запроса
		response:'text',//тип возвращаемого ответа text либо xml
		success:function (data) {//возвращаемый результат от сервера
			$$('result',$$('result').innerHTML+'<br />'+data);
		}
	});
}

function SendHead() {
	//отправляю HEAD запрос и получаю заголовок
	$$a({
		type:'head',//тип запроса: get,post либо head
		url:'ajax.php',//url адрес файла обработчика
		response:'text',//тип возвращаемого ответа text либо xml
		success:function (data) {//возвращаемый результат от сервера
			$$('result',$$('result').innerHTML+'<br />'+data);
		}
	});
}
</script>

Чтобы добавить больше параметров в запрос, достаточно их дописать через запятую

data:{'q':'1','z':'1','s':'2'},//параметры запроса

Для получения ответов, нам нужен файл ajax.php, который будет обрабатывать наши запросы.
Содержимое файла ajax.php

<?php
if(isset($_GET['q'])) {
	header("Content-type: text/txt; charset=UTF-8");
	if($_GET['q']=='1') {
		echo 'запрос GET успешно обработан, q = 1';
	}
	else {
		echo 'карявый GET запрос';
	}
}
if(isset($_POST['z'])) {
	header("Content-type: text/txt; charset=UTF-8");
	if($_POST['z']=='1') {
		echo 'запрос POST успешно обработан, z = 1';
	}
	else {
		echo 'карявый POST запрос';
	}
}
?>

Залейте файл ajax.php на сервер и можете приступать к тестированию нашего скрипта.

Вот как бы и все.
Но на самом деле настроек используемых при отправке ajax запросов может быть куда как больше.
Вот не сокращенный вариант со всеми опциями запроса:

<script type="text/javascript">
function Send() {
	$$a({
		type:'get',//тип запроса: get,post либо head
		url:'',//url адрес файла обработчика
		data:{},//параметры запроса
		response:'text',//тип возвращаемого ответа text либо xml
		header:{//заголовки запроса, работают только если установлен response:'xml'
			'Content-Type':'application/x-www-form-urlencoded; charset=windows-1251',
			'Referer':location.href
		},
		async:true,//асинхронный если установлено true или синхронный запрос если false
		username:'',//имя пользователя если требуется для авторизации
		password:'',//пароль пользователя если требуется для авторизации
		errrep:true,//отображение ошибок error если true
		error:function(num) {//ошибки запроса
			var arr=['Your browser does not support Ajax',
						'Request failed',
						'Address does not exist',
						'The waiting time left'];
			alert(arr[num]);
		},
		status:function (number) {//код состояния отправки от 1 до 4
			alert(number);//вывожу код состояния отправки
		},
		endstatus:function (number) {//код состояния запроса например 404, 200
			alert(number);//вывожу код состояния запроса
		},
		success:function (data) {//возвращаемый результат от сервера
			alert(data);//вывожу результат запроса
		},
		timeout:5000//таймаут запроса
	});
}
</script>

Ajax запрос можно отправлять в асинхронном или синхронном режимах.
Синхронный режим подразумивает что браузер останавливает свою работу, подвисает и ждет ответ от сервера.
Асинхронный режим позволяет обмениваться данными с сервером без приостановки работы и без подвисания браузера.

Как видите все очень просто благодаря scriptjava фреймворку

Блог: gordon freeman

Автор: Гость (не зарегистрирован), дата: 22 ноября, 2011 - 16:08

Форум

Справочник

Discord чат

Курсы javascript

Примеры работы с AJAX. Отправка GET, POST, HEAD запросов через AJAX на javascript.

Отправить комментарий

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное