nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

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

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

Сегодня я хочу показать вам как работать с Ajax на javascript.

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


<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 />


Затем подключите к своему сайту перед тегом </head> 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 фреймворку :)
Вас зовут:

Ваш комментарий:


Код на картинке: