Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: AJAX при помощи Mootools

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Мини-статья
CodeWarrior
Отправлено: 21 Января, 2009 - 14:24:12
Post Id



Частый гость


Покинул форум
Сообщений всего: 157
Дата рег-ции: Янв. 2009  
Откуда: Албания


Помог: 0 раз(а)




Сейчас все чаще народ интересуется тем как же организовать на своем сайте AJAX механизм. Я поделюсь своим способом, который открыл для себя совсем недавно и использую в своем проекте.
Статья не претендует на единственно верный способ реализации. А что самое печальное, этот способ МОЖЕТ быть ошибочным (хотя у меня работает). Поэтому выношу на всеобщее обозрение и обсуждение для того чтобы во время все поправить.

Итак, сразу к делу. Предполагается, что у вас есть файл index.php и папка с именем ajax, а в ней файлы action.php. А также предполагается, что вы посетили сайт mootools.net и скачали файлы mootools-core.js и mootools-more.js (ну или как-то так). AJAX запрос будет работать через JavaScript, который мы видим ниже:
CODE (text):
скопировать код в буфер обмена
  1. var myAJAXRequest = new Request.HTML({
  2.  
  3.         url: 'ajax/action.php',
  4.  
  5.         onSuccess: function(html) {
  6.                 $('__ajax_form').set('text', '');
  7.                 $('__ajax_form').adopt(html);
  8.         },
  9.         onFailure: function() {
  10.                 $('__ajax_form').set('text', 'The request failed.');
  11.         }
  12.  
  13. });
  14.  
  15. function myAJAXSendRequest() {
  16.         myAJAXRequest.send();
  17. }

Итак, объясню только основное (все остальные вопросы к документации Mootools):
1. url: 'ajax/action.php' - это путь к выполняемому файлу. путь относительно index.php
2. __ajax_form - это id поля в котором будет готовится вся кухня AJAX, то есть туда результат выполнения action.php будет выкидываться.
CODE (text):
скопировать код в буфер обмена
  1. <div id="__ajax_form"></div>

3. Ну, и myAJAXSendRequest() - эта функция, которая отправляет запрос.

Теперь: index.php.
Например, его вид может быть таким:
CODE (text):
скопировать код в буфер обмена
  1. <?php
  2. echo("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml'>
  4.  
  5. <head>                                    
  6. <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
  7. <title>AJAX test</title>
  8. <script type='text/javascript' src='mootools-core.js'></script>
  9. <script type='text/javascript' src='mootools-more.js'></script>
  10. <script type='text/javascript' src='myscript.js'></script>
  11. </head>
  12.  
  13. <body>
  14. <div id='__ajax_form'></div>
  15. <a href='javascript:myAJAXSendRequest()'>Щелкай сюда</a>
  16. ");
  17. ?>


Теперь: action.php.
Например, его вид может быть таким:
CODE (text):
скопировать код в буфер обмена
  1. <?php
  2. header("Content-Type: text/html; charset=Windows-1251");
  3. echo("AJAX зопрос в действии");
  4. ?>

Проверяйте. Посмотрите какой будет результат если убрать:
CODE (text):
скопировать код в буфер обмена
  1. header("Content-Type: text/html; charset=Windows-1251");


Примечание: по неизвестным мне причинам, если указать кодировку windows-1251 в самом скрипте, в new Request.HTML({ (да, там есть такая опция и по умолчанию стоит utf-8), то текст все равно будет utf-8...

Теперь давайте разберемся со следующем: Если у вас есть форма, данные которой нужно передать по средством AJAX:
ваш js-скрипт:
CODE (text):
скопировать код в буфер обмена
  1. var myAJAXRequest = new Request.HTML({
  2.  
  3.         url: 'ajax/action.php',
  4.  
  5.         onSuccess: function(html) {
  6.                 $('__ajax_form').set('text', '');
  7.                 $('__ajax_form').adopt(html);
  8.         },
  9.         onFailure: function() {
  10.                 $('__ajax_form').set('text', 'The request failed.');
  11.         }
  12.  
  13. });
  14.  
  15. function myAJAXSendRequest() {
  16.         myAJAXRequest.post($('__ajax_form_id'));
  17. }


изменилось только эта функция:
CODE (text):
скопировать код в буфер обмена
  1. function myAJAXSendRequest() {
  2.         myAJAXRequest.post($('__ajax_form_id'));
  3. }


__ajax_form_id - это id заполняемой формы.

Все, теперь внутри файла action.php будут доступны данные массива $_POST.

Коментируйте.

(Отредактировано автором: 21 Января, 2009 - 14:25:45)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Обсуждение статей »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB