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

Автор: Aport Понедельник, Февраль 2nd, 2015 Нет комментариев

Рубрика: Уроки JavaScript

Пишем 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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты