Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Как послать данные на сервер при помощи аякса + ВИДЕО

September 03rd, 2007 | Category: Ajax, Javascript, Prototype, Tutorial, Видео | Автор: Александр

Сегодня я покажу вам пару приёмов использования джаваскрипт библиотеки Prototype. Туториал рассчитан для начинающих, но может и более опытные программисты узнают для себя что-то новое.

В этот раз я решил поэкспериментировать и записать туториал на видео. Пожалуйста посмотрите (лучше всего в режиме full screen) и скажите выкладывать ли мне в будущем подобные записи, или хватит и туториалов в текстовой форме.

В видео можете сразу перескочить на двадцатую секунду. Сначала была идея комментировать свои действия, и я специально оставил место для вступительной речи. Но оказалось, что записывать свою речь это не так просто и требует слишком много времени. Может в другой раз получится.

А тут тоже самое, но в более привычной всем текстовой форме:

Я сделаю простую форму, которая будет отсылать запрос на сервер при помощи аякса и показывать результат без перезагрузки страницы. После формы я сделал пустой div с id="result", в котором я хочу показать результат запроса. Почему в div-e я написал <?php echo $result; ?> я расскажу чуть позже.

PLAIN TEXT
HTML:
  1. <form action="index.php" method="post" id="myform" accept-charset="utf-8">
  2.     <input type="text" name="site" value="" id="site">
  3.     <p><input type="submit" value="Continue"></p>
  4. </form>
  5. <div id="result">
  6.     <?php echo $result; ?>
  7. </div>

Если оставить форму в таком виде, то никакого аякса у нас не будет, и браузер отправит её обычным POST запросом. Поэтому мы напишем скрипт который будет следить за этой формой и при событии "SUBMIT" сделает аякс запрос на сервер. На сервер он пошлёт значение текстового поля как параметр 'site'.

PLAIN TEXT
JavaScript:
  1. <script src="prototype.js" type="text/javascript"></script>
  2. <script type="text/javascript" charset="utf-8">
  3. // сначала ждём пока загрузится html
  4. document.observe('contentloaded', function(){
  5.     // теперь начинаем следить за формой
  6.     $('myform').observe('submit', function(e){
  7.         new Ajax.Updater('result', 'index.php', {parameters:{site: $F('site')}});
  8.         // останавливаем submit event
  9.         e.stop();
  10.     })
  11. })
  12. </script>

И теперь собственно PHP скрипт. Я сделал обыкновенный array с двумя значениями: google и ajaxrussia. Если на сервер придёт запрос google, то сервер вернёт адрес http://www.google.com и если ajaxrussia, то http://www.ajaxrussia.com. В реальных условиях на этом месте может быть запрос к базе данных.

PLAIN TEXT
PHP:
  1. <?php
  2.     $sites = array('google'=>'htpp://www.google.com', 'ajaxrussia'=>'http://www.ajaxrussia.com');
  3.     $result = $sites[$_POST['site']];
  4.    
  5.     if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
  6.     {
  7.         echo $result;
  8.         exit();
  9.     }
  10. ?>

Проверка if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') нужна для того, чтобы при аякс запросе возвращать только адрес страницы, а не весь html текст. Если же у пользователя отключен джаваскрипт и форму он послал без аякса, то php скрипт вернёт всю страницу и посетитель всё равно увидит результат (для этого я и написал раньше <?php echo $result; ?>).

Результат, как всегда, можно посмотреть по этому адресу.

del.icio.us Забобрить!

7 Comments so far

  1. Dumay September 3rd, 2007 07:34

    :) Хм, скорей нужно всё в сандартном текстовом формате выкладывать, если хотите прозреть крутым программерм который делает видео своих уроков - делайте :) Потом кто нить собирёт всё ваше идео и вы станите известней ( если так можно сказать ) но мне лично удобней в текстовом варианте :)

  2. Aleksandr September 4th, 2007 00:19

    Мне тоже удобней выкладывать текстовой вариант. Просто интересно было попробовать. Оставлю тогда я эту затею до лучших времён :)

  3. Сергей September 4th, 2007 18:39

    Для видео должен быть повод. Например, показать то, что не может быть описано текстом и не имеет живого примера. Просто повторять то, что и так ясно из текста - трата времени в большей степени. Так что я тоже не за, чтобы все статьи без разбора шли с видео сопровождением.

  4. Lelik September 6th, 2007 08:27

    Пасибо за подробное объяснение как это делают! А видео у мя фаервол заблокировал, но думаю я ничего не потерял )))

    Удачи! :)

  5. Ephis September 29th, 2007 00:40

    Хотел вот спросить у автора. Вы каким редактором пользуетесь? :)
    Ответ прошу прислать мне в аську 228-487-852 или на почту ephis@ukr.net.
    Спасибо.

  6. Михаил October 1st, 2007 08:26

    >>Хотел вот спросить у автора. Вы каким редактором пользуетесь?
    собственно мне тоже интересно было бы об этом узнать…. если не сложно напишите на kicker_2003@mail.ru

  7. Aleksandr October 1st, 2007 08:38

    Это E-TextEditor.
    http://www.e-texteditor.com/

Leave a reply