Index.html. Ajax.js

⇐ ПредыдущаяСтр 2 из 2

Index. html

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1. 0 Strict//EN" " http: //www. w3. org/TR/xhtml1/DTD/xhtml1-strict. dtd" >

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Составы< /title>

< style type=" text/css" media=" all" >

@import url(" style. css" );

< /style>

< script type=" text/javascript" language=" JavaScript" src=" ajax. js" >

< /script>

< /head>

< body>

Составы клана Нико< br/>

< a onclick=" sost1Text()" href=" #click" > Первый состав< /a> & nbsp; & nbsp;

< a onclick=" sost2Text()" href=" #click" > Второй состав< /a> & nbsp; & nbsp;

< a onclick=" sost3Text()" href=" #click" > Третий состав< /a> & nbsp; & nbsp;

< a onclick=" sost4Text()" href=" #click" > Четвертый состав< /a>

< br />

< div id=" CONTAINER" > Полученное с сервера содержимого будет расположено в данном контейнере. < /div>

< /body>

< /html>

Ajax. js

function CreateRequest()

{

var Request = false;

if (window. XMLHttpRequest)

{

//Gecko-совместимые браузеры, Safari, Konqueror

Request = new XMLHttpRequest();

}

else if (window. ActiveXObject)

{

//Internet explorer

Request = new ActiveXObject(" Microsoft. XMLHTTP" );

if (! Request)

{

HRequest = new ActiveXObject(" Msxml2. XMLHTTP" );

}

if (! Request)

{

alert(" Невозможно создать XMLHttpRequest" );

}

return Request;

}

Функция посылки запроса к файлу на сервере

r_method - тип запроса: GET или POST

r_path - путь к файлу

r_args - аргументы вида a=1& b=2& c=3...

r_handler - функция-обработчик ответа от сервера

function SendRequest(r_method, r_path, r_args, r_handler)

{

//Создаём запрос

var Request = CreateRequest();

//Проверяем существование запроса еще раз

if (! Request)

{

return;

}

//Назначаем пользовательский обработчик

Request. onreadystatechange = function()

{

//Если обмен данными завершен

if (Request. readyState == 4)

{

//Передаем управление обработчику пользователя

r_handler(Request);

}

//Проверяем, если требуется сделать GET-запрос

if (r_method. toLowerCase() == " get" & & r_args. length > 0)

r_path += "? " + r_args;

//Инициализируем соединение

Request. open(r_method, r_path, true);

if (r_method. toLowerCase() == " post" )

{

//Если это POST-запрос

//Устанавливаем заголовок

Request. setRequestHeader(" Content-Type", " application/x-www-form-urlencoded; charset=utf-8" );

//Посылаем запрос

Request. send(r_args);

}

else

{

//Если это GET-запрос

//Посылаем нуль-запрос

Request. send(null);

}

/* Показательные тестирования */

Тест: получение обычного текста из файла tests/plain. txt

function sost1Text()

{

//Создаем обработчик

var Handler = function(Request)

{

$(" CONTAINER" ). innerHTML = Request. responseText;

}

//Посылаем запрос

SendRequest(" GET", " sostavi/sost1. txt", " ", Handler);

}

Тест: получение XML-данных из файла tests/xml. xml, их обработка и вывод

function sost3Text()

{

//Создаем обработчик

var Handler = function(Request)

{

//Обнуляем контейнер

$(" CONTAINER" ). innerHTML = " ";

//Получаем XML-документ

var xmldoc = Request. responseXML. documentElement;

//Получаем нужные нам элементы по названию тега

var xmlelements = xmldoc. getElementsByTagName(" element" );

//Выводим в HTML

for (var i = 0; i < xmlelements. length; i++)

{

//Заголовок элемента

var xmltitle = xmlelements[i]. getElementsByTagName(" title" )[0]. firstChild. nodeValue;

var xmlsub = xmlelements[i]. getElementsByTagName(" subtitle" )[0]. firstChild. nodeValue;

$(" CONTAINER" ). innerHTML += " < b> " + xmltitle + " < /b> < br /> ";

$(" CONTAINER" ). innerHTML += " < i> " + xmlsub + " < /i> < br /> ";

}

//Посылаем запрос

SendRequest(" GET", " sostavi/sost3. xml", " ", Handler);

}

Тест: получение JSON-данных из файла tests/json. txt, их обработка и вывод

function sost2Text()

{

//Создаем обработчик

var Handler = function(Request)

{

//Обнуляем контейнер

$(" CONTAINER" ). innerHTML = " ";

//Получаем объект

eval(" var responsedata = (" + Request. responseText + " )" );

for (var i = 0; i < responsedata. data. misc. length; i++)

{

$(" CONTAINER" ). innerHTML += " < b> " + responsedata. data. misc[i]. name + " < /b> < br /> ";

$(" CONTAINER" ). innerHTML += " < i> " + responsedata. data. misc[i]. type + " < /i> < br /> ";

}

//Посылаем запрос

SendRequest(" GET", " sostavi/sost2. txt", " ", Handler);

}

Тест: получение JSON-данных из файла tests/test. php и их вывод

function sost4Text()

{

//Создаем обработчик

var Handler = function(Request)

{

//Обнуляем контейнер

$(" CONTAINER" ). innerHTML = Request. responseText;

}

//Посылаем запрос

SendRequest(" GET", " sostavi/sost4. php", " ", Handler);

}

/* Функции, которые активно используются */

//Элиас для получения элемента по ID (короткий вариант)

function $(elementid)

{

return document. getElementById(elementid);

}

Результат:

⇐ Предыдущая 12