Форумы портала PHP.SU » Разное » Обсуждение статей » AJAX при помощи Mootools

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

1. CodeWarrior - 21 Января, 2009 - 14:24:12 - перейти к сообщению
Сейчас все чаще народ интересуется тем как же организовать на своем сайте 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.

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

 

Powered by ExBB FM 1.0 RC1