Создать форум бесплатно: ixbb.ru :: Календарь на Март 2024 года: calendar2008.ru/2024/mart/

  Reply to this topicStart new topicStart Poll

Ajax пример

dudeonthehorse
Отправлено: May 2 2010, 09:06 AM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



Доброго времени суток,
не будете ли так благосклонны показать пример на аяксе, а то от чтива в сети голова пухнет...
например у нас на странице выводится список товаров, которые мы кликом уносим в корзину, а ссылка "добавить в корзину" после нажатия превращается в "добавлено" и собсно выполняется скрипт add.php. в нашем примере его код не столь важен, интересует лишь как имея ссылочку дать понять аяксу то что нужно выполнить скрипт без обновления страницы, ну и передать скрипту параметр в виде айдишника товара(что в PHP мы делаем через GET)
PMEmail PosterICQ
Top
Ilidan
Отправлено: May 2 2010, 03:18 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 940
Пользователь №: 508
Регистрация:
30-March 07



Сам с ним долго разбирался) Благо люди есть хорошие, помогли)))
Давай лучше по порядку? Что именно тебе не понятно?
Для обмена данными с сервером используется специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:
CODE

function GetXmlHttpObject() //Кроссбраузерность
{
if (window.XMLHttpRequest)
 {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 return new XMLHttpRequest();
 }
if (window.ActiveXObject)
 {
 // code for IE6, IE5
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
return null;
}

Далее, нам нужна функция, которая и выполняет запрос к нужному нам файлу.
У меня она такая
CODE

var xmlhttp; //Глобальная переменная
function do_it(url) //Функция выполнения. В переменную url передается адрес обработчика, в твоем случае add.php
{
   xmlhttp=GetXmlHttpObject(); //получаем объект который описан в функции выше
   if (xmlhttp==null)
{
    alert ("Browser does not support HTTP Request");
    return;
}
   
   xmlhttp.onreadystatechange=stateChanged; //здесь вызывается функция, которая будет описана ниже. Она определяет что нужно делать в том или ином состоянии выполнения(как то так)))
   xmlhttp.open("GET",url,true); //здесь открывается нужный нам обработчик
   xmlhttp.send(null); //это так надо
}



А вот и функция, что вызывает для проверки состояния
CODE

function stateChanged() //Проверка состояния
{
if (xmlhttp.readyState==4)//состояние когда скрипт выполнен
{
   document.getElementById(id объекта).innerHTML = xmlhttp.responseText; //в id объекта вставляется текст полученый из скрипта
     
}
return false;
}

А для того что бы это все работало создаем например кнопочку и на обработчик Onclick вешаем функцию do_it(url) которой передаем url обработчика.
А эти три функции лучше записать в отдельный файл, например ajax.js и подключать на нужной странице как js скрипт...Как то так) Спрашивай что не понятно


--------------------
;-)
PMEmail PosterICQAOL
Top
dudeonthehorse
Отправлено: May 3 2010, 04:30 AM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 763
Пользователь №: 2933
Регистрация:
26-October 09



все предельно понятно, но вопросы, разумеется есть smile.gif
QUOTE
document.getElementById(id объекта).innerHTML = xmlhttp.responseText; //в id объекта вставляется текст полученый из скрипта

как я понял тут скорее в сам объект с айдишником 'id объектa' помещается вывод из скрипта, но в этом случае все несколько статично, так как скажем, на моей страничке несколько кнопок для выполнения скрипта. Можно ли(и как) оперировать 'this' в событии onclick и там же передавать параметры скрипту?
например:
CODE
<ul>
<li>Вася <a onclick="do_it(this,url,1); return false">добавить в друзья</a></li>
<li>Коля<a onclick="do_it(this,url,2); return false">добавить в друзья</a></li>
<li>Маша<a onclick="do_it(this,url,3); return false">добавить в друзья</a></li>
</ul>

как то так на вскидку smile.gif
то есть 'this' используется для проверки состояния и вывода результата, url для того же что и было, а вот циферка - id пользователя, который передается php скрипту(как его скрипт должен получить меня тоже интересует)
PMEmail PosterICQ
Top
Ilidan
Отправлено: May 3 2010, 12:05 PM
Quote Post


  Команда ЭйсВэб
*

Группа: Super moderator
Сообщений: 940
Пользователь №: 508
Регистрация:
30-March 07



C 'this' не работал. А параметры скрипту предевать очень просто. Например
CODE

<li>Вася <a onclick="do_it("script.php?id=1&parametr=34"); return false">добавить в друзья</a></li>

А в скрипте уже доставать из массива $_GET[]. Конечно огромные тексты так лучше не передавать, а вот id различные, пара-тройка слова вполне покатит


--------------------
;-)
PMEmail PosterICQAOL
Top

Topic Options Reply to this topicStart new topicStart Poll

 



[ Script Execution time: 0.0253 ]   [ 10 queries used ]   [ GZIP выключен ]