Сейчас все чаще народ интересуется тем как же организовать на своем сайте AJAX механизм. Я поделюсь своим способом, который открыл для себя совсем недавно и использую в своем проекте.
Статья не претендует на единственно верный способ реализации. А что самое печальное, этот способ МОЖЕТ быть ошибочным (хотя у меня работает). Поэтому выношу на всеобщее обозрение и обсуждение для того чтобы во время все поправить.
Итак, сразу к делу. Предполагается, что у вас есть файл index.php и папка с именем ajax, а в ней файлы action.php. А также предполагается, что вы посетили сайт mootools.net и скачали файлы mootools-core.js и mootools-more.js (ну или как-то так). AJAX запрос будет работать через JavaScript, который мы видим ниже:
CODE ( text):
скопировать код в буфер обмена
var myAJAXRequest = new Request.HTML({ url: 'ajax/action.php', onSuccess: function(html) { $('__ajax_form').set('text', ''); $('__ajax_form').adopt(html); }, onFailure: function() { $('__ajax_form').set('text', 'The request failed.'); } }); function myAJAXSendRequest() { myAJAXRequest.send(); }
Итак, объясню только основное (все остальные вопросы к документации Mootools):
1. url: 'ajax/action.php' - это путь к выполняемому файлу. путь относительно index.php
2. __ajax_form - это id поля в котором будет готовится вся кухня AJAX, то есть туда результат выполнения action.php будет выкидываться.
3. Ну, и myAJAXSendRequest() - эта функция, которая отправляет запрос.
Теперь: index.php.
Например, его вид может быть таким:
CODE ( text):
скопировать код в буфер обмена
<?php echo("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <title>AJAX test</title> <script type='text/javascript' src='mootools-core.js'></script> <script type='text/javascript' src='mootools-more.js'></script> <script type='text/javascript' src='myscript.js'></script> </head> <body> <div id='__ajax_form'></div> <a href='javascript:myAJAXSendRequest()'>Щелкай сюда</a> "); ?>
Теперь: action.php.
Например, его вид может быть таким:
Проверяйте. Посмотрите какой будет результат если убрать:
Примечание: по неизвестным мне причинам, если указать кодировку windows-1251 в самом скрипте, в new Request.HTML({ (да, там есть такая опция и по умолчанию стоит utf-8), то текст все равно будет utf-8...
Теперь давайте разберемся со следующем: Если у вас есть форма, данные которой нужно передать по средством AJAX:
ваш js-скрипт:
CODE ( text):
скопировать код в буфер обмена
var myAJAXRequest = new Request.HTML({ url: 'ajax/action.php', onSuccess: function(html) { $('__ajax_form').set('text', ''); $('__ajax_form').adopt(html); }, onFailure: function() { $('__ajax_form').set('text', 'The request failed.'); } }); function myAJAXSendRequest() { myAJAXRequest.post($('__ajax_form_id')); }
изменилось только эта функция:
__ajax_form_id - это id заполняемой формы.
Все, теперь внутри файла action.php будут доступны данные массива $_POST.
Коментируйте.(Отредактировано автором: 21 Января, 2009 - 14:25:45)
|