Форумы портала PHP.SU :: Версия для печати

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):
скопировать код в буфер обмена

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 будет выкидываться.

CODE (text):
скопировать код в буфер обмена

<div id="__ajax_form"></div>

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>
");
?>