Пишем кроссбраузерный Ajax размером 2 кб

Пишем Ajax. Ajax - это способ(не метод, не язык и т.п.) подгружать данные без перезагрузки текущей страницы.
Некоторые берут готовые скрипты, которые весят 10 и более кб. Хотя достаточно понять и просто написать маленький скрипт, все коментарии я буду указывать в самом скрипте!
Здесь используется оператор try…catch используется в тех фрагментах сценария, где может возникнуть исключение, для его обработки. Он имеет вид:
try { оператор1 }
catch (исключение) { оператор2 } 
Здесь исключение — любое имя переменной, а оператор1 и оператор2 — любые группы операторов JavaScript, заключенные в фигурные скобки {}.
Оператор1 содержит программный код, в котором возможно возникновение исключения. Если исключение не возникло, то после исполнения оператора1 управление передается обычным образом оператору, следующему за try…catch. Если же оно возникло, то информация об исключении заносится в локальную переменную исключение, и управление передается оператору2, который должен содержать код обработки этого исключения.
Если возникшее исключение не может быть здесь обработано, то оператор2 должен содержать оператор throw для передачи исключения обработчику исключений более высокого уровня.  

<div id="reload">это заменим на содержимое xml-файла.</div>
<script LANGUAGE="JavaScript" type="text/javascript">
<!--
            var ro;//создаем  глобальную переменную ro
            try {ro = new ActiveXObject("Msxml2.XMLHTTP");}//как было уже сказано выше программный код, в котором возможно возникновение исключения(в нашем случае возникновение переменной, а если она не возникла, то управление передается обычным образом оператору, следующему за try, тоесть catch)
            catch(e)
                  {
                    try
                       {
                        ro = new ActiveXObject("Microsoft.XMLHTTP");//аналогичная ситуация складывается и здесь
                       }
                    catch(f)
                       {
                        ro = null;
                       }
                  }
            if(!ro && typeof(XMLHttpRequest) != 'undefined')//проверка нужна, чтобы наш Ajax сработал в браузере Mozilla/Netscape/Firefox (короче на движке Gecko)
                {
                 ro = new XMLHttpRequest();
                }
            try {
                ro.open('GET', 'xml_file.php');//открываем наш XML - фаил
                ro.onreadystatechange = response_callback;//Выполняем функцию response_callback которая написана ниже
                ro.send(null);
                }
            catch(e)
                {
                }
        function response_callback()//функця callback-а ей требуется проверять 2-а значения. Первая - ждать, когда состояние объекта req изменится на 4 (означающее, что процесс получения документа с сервера закончен). Второе, это проверить HTTP-статус ответа. Вы знаете, что код 404 означает "файл не найден" и 500 - "произошла ошибка на сервере". Но нам нужен старый добрый код 200 ("все ОК"), который означает, что на сервере наш запрос был успешно выполнен. Если мы получили и состояние 4 и код 200, мы можем продолжать выполнение нашего скрипта и обрабатывать результаты, полученные от сервера.
            {
                  try {
                        if((ro.readyState == 4) && (ro.status == 200))//проверяем эти 2-а значения
                            {
                                var response = ro.responseText;//Получаем в переменную response весь код XML - фаила
                                alert("получен XML-фаил следующего содержания:nn" + response); //Выводим его содержимое, только для себя. 
                                document.getElementById('reload').innerHTML = response;//эта DHTML, с помощью него мы присвоим свойству id с именем reload наше содержимое XML-файла
                            }
                      }
                  catch(e)//А это нужно, чтобы у нас небыло никаких ошибок
                      {
                      }
            }
//-->
</script>

Вот и весь Ajax. Да, для наглядности создайте в той же директории xml-фаил xml_file.php - как например в нашем случае или др. xml фаил, например xml_file.xml
Пример xml_file.php - файла:
<?php
header("content-type:text/html;charset=windows-1251");
echo time();
?>

Пример xml_file.xml - файла:
<?xml version="1.0" encoding="windows-1251" ?>
<mytext>Мой текст</mytext> 

Автор кода: nopox
Автор комментариев к коду: Lebnik

Оцени публикацию:
  • 8,35
Оценили человек: 8

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Спасибо за статью!
    Очень нужная, т.к. очень не хочется привязываться к jQuery.
    19 декабря 2009, 10:28 коммент полезен : 0 # Гость
  • "Вот и весь Ajax" :-)8
    Только кодировочку лучше использовать utf-8 в xlm и на странице, а то проблемы бут с IE
    26 мая 2010, 04:56 коммент полезен : 0 # Александр Яцкрв (гость)
  • Здравтауйте, а как использовать данный код когда на страницу нужно одновременно подгрузить, например 3 блока, типа
    <div id="reload_1">111111111</div>
    ....
    <div id="reload_2">2222</div>
    ....
    <div id="reload_3">333</div>

    Спасибо.
    26 июля 2010, 17:14 коммент полезен : 0 # Help
    • 1. оберните все это в функцию в которую передавайте ID нужного элемента, и применяйте его в моменте document.getElementById( ВАШ_ИД ).
      2. применяйте jQuery
      01 августа 2010, 05:46 коммент полезен : +1 # Гость
  • Не работает в Опера
    23 декабря 2010, 12:41 коммент полезен : +1 # Arhi (гость)
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » JavaScript »