Javascript.RU

Примеры работы с 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 фреймворку

+2

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

Загрязнять глобальную область переменными и функциями это очень плохо. Inline onlick события это тоже крайне нерекомендуемая практика.

Код работает, да, но при больших объемах кода это превращается в ад, и новичку который станет брать пример придется очень трудно.

Да и если вы код преднамеренно упростили, то вы невольно оказывете людям медвежью услугу.


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

обоснуйте свой комментарий
никаких трудностей при большом обьеме кода не будет
засорения глобальной области переменными и функциями - полный бред
напишите свой пример
только без всяких там jquery
чистый javascript код, какой вы считаете что вообще ничего засорять не будет


Автор: Гость (не зарегистрирован), дата: 4 апреля, 2013 - 16:01
#permalink

Вообще не работает!
Т.к. в моём примере, header allredy is output в PHP!
А значит - чертям под хвост вся писанина, т.к. используется header - 2раз!

Как сделать вывод, если страничка сгенерировалась на php в конце файла есть form - А ВАМ НАДО POST-передать в файл?????????????

Ниодного примера нормального нет в Инете!


Автор: г (не зарегистрирован), дата: 10 декабря, 2011 - 16:09
#permalink

IE плохо реагирует на $$a, говорит, что предполагается наличие объекта.
Песочница вашего сайта говорит что адрес не найден хотя он есть.
Браузеры не выполняют скрипт (((


Автор: seoneo, дата: 16 февраля, 2012 - 22:57
#permalink

адрес должен быть без http
короче аякс не умеет работать с чужими адресами сайтов
в песочнице работать не будет по причине выше написанного


Автор: seoneo, дата: 27 января, 2012 - 12:07
#permalink

Протестил везде работает, только адресок должен быть на тот же домен где запущено.
Удобней и проще чем jquery
+


Автор: nur (не зарегистрирован), дата: 21 февраля, 2012 - 15:21
#permalink

Alert все время дает "request failed", почему?


Автор: fortuner, дата: 23 марта, 2012 - 20:31
#permalink

установи
errrep:false

плохая корость интернета
и таймер побольше поставь не 5000 а например 15000


Автор: gordon freeman, дата: 8 июля, 2012 - 12:40
#permalink

в новой версии scriptjava такого больше нет
установи таймер на 0 в старых версиях, тогда все будет ок


Автор: Гость (не зарегистрирован), дата: 7 сентября, 2012 - 12:49
#permalink

Мелочь, но все же корявый. По глазам бьет.


Автор: Гость (не зарегистрирован), дата: 5 ноября, 2012 - 05:33
#permalink

Спасибо, все работает.


Автор: Гость (не зарегистрирован), дата: 7 декабря, 2012 - 00:26
#permalink

отлично работает.


Автор: злойНик (не зарегистрирован), дата: 4 апреля, 2013 - 18:48
#permalink

Подскажите, возник такой тупик, если вместо div повесить событие onclick на ссылку, то скрипт перестаёт работать.


Автор: злойНик (не зарегистрирован), дата: 4 апреля, 2013 - 18:59
#permalink

Переделал чуть-чуть

<a href="#" onclick="SendGet();">

Так работает, но всё-таки хотелочь бы чтобы адрес был адекватным а не просто #
подскажите как сделать


Автор: gordon freeman, дата: 13 июля, 2013 - 18:27
#permalink
<a href="адрес" onclick="SendGet();return false;">

Автор: Mackay (не зарегистрирован), дата: 15 июля, 2013 - 12:26
#permalink

Так, например если есть поля input

<input id="name"></input>
<input id="email"></input>
data:{
var name = getElementById('name');
var email = getElementById('email');
"postname":"name",
"postemail":"email"
}

Правильно?
И вот $$a, почему 'а' стоит?


Автор: Дмитрий Кожевников (не зарегистрирован), дата: 20 декабря, 2013 - 05:19
#permalink

Добрый день, если интересно почему 'а', то нужно скачать файл по верхней ссылке, которую автор указал в фреймворке. Скачав этот файл, букву 'а' можно будет исправить на любое другое значение. Всё очень просто. Пример прекрасно работает как на локальном сервере так и через интернет.


Автор: knight_rider (не зарегистрирован), дата: 22 сентября, 2013 - 11:05
#permalink

Здравствуйте у меня есть такой код

function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
document.getElementById("txtHint2").innerHTML=xmlhttp.response;
}
}
xmlhttp.open("GET","includes/get_hotels.php?q="+str,true);
xmlhttp.send();
}

но в диве с ID txtHint2 хочу получит резултат не с фаила get_hotels.php а с фаила например something.php.

тоест послать одну переменную в два php фаил

как мне ето сделать?


Автор: Ilya_Nsk, дата: 15 мая, 2014 - 13:03
#permalink

Поместил в html

function SendGet() {
        $$a({ type:'get',url:'catalog.php',response:'text',
            success:function (data) {$$('result',$$('result').innerHTML+'<br />'+data); }
        });    }

, попробовал:

SendGet();

catalog.php:

<?php echo 'response from catalog.php';?>

, получил:
Refused to set unsafe header "Referer" scriptjava.js:286
(броузер: Chrome, хостер - внутрисетевой linux сервер)
даже "копать" не стал


Автор: Мурад25 (не зарегистрирован), дата: 24 октября, 2014 - 15:44
#permalink

Так, а почему у меня все ответы в ряд стоят, как сделать, чтобы при нажатии на POST старый POST ответ удалялся и на его место вставал новый


Автор: Сергей 6687 (не зарегистрирован), дата: 10 февраля, 2015 - 23:03
#permalink

А как вернуть два результата?


Автор: Гость (не зарегистрирован), дата: 29 мая, 2015 - 11:56
#permalink

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


Автор: Гость (не зарегистрирован), дата: 27 августа, 2015 - 19:50
#permalink

Функция "error" возвращает не число, а объект.
Более правильная запись:

error:function(answer) {//ошибки запроса
		alert(answer.statusText);
	},

и под $$a скрывается $.ajax


Автор: Гость (не зарегистрирован), дата: 18 февраля, 2016 - 17:46
#permalink

Доброго времени суток
делаю ваш код на локалки все работает
заливаю на сервер не работае linux
может подскажете в чем прикол


Автор: pro100deadly, дата: 2 июня, 2016 - 21:43
#permalink

Не знаю почему но не хочет работать.... Причину найти не могу, на всех страницах работает именно на 1 не работает там где нужно!


Автор: Гость (не зарегистрирован), дата: 18 января, 2017 - 19:52
#permalink

кОрявый


Автор: Гость (не зарегистрирован), дата: 1 сентября, 2017 - 05:25
#permalink

Только начал заниматься изучением взаимной работы Ajax и PHP.
Ничего не понимал до того, как попал на этот сайт.
Огромное спасибо автору. Просто огромнейшее!


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
6 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum