Как использовать Ajax - WebRound.ru
На главную
Карта сайта
Обратная связь
Портал Хабаровска
WebRound.ru
22 июня 2018
Предыдущий баннерСлудующий баннер
Статьи > Как использовать Ajax

Как использовать Ajax

04.09.10  ArcherL
В этой статье я хотел бы рассказать о том, как я использую Ajax в своей ArcherL CMS.

Для начала кратко расскажу, что такое Ajax и с чем его едят. Простым языком Ajax – это технология, которая дает возможность вызвать серверный скрипт (например, написанный на PHP) средствами Javascript (скрипт на стороне клиента), далее получить результат работы вызванного серверного скрипта, и, в завершении, разместить полученные результаты в произвольном месте нашей веб-страницы. И все это проделывается с помощью Javascript. Чтобы использовать данную технологию ни вам как разработчику, ни клиенту ничего не нужно дополнительно устанавливать. Данная технология уже давно встроена во все современные браузеры.

Первое что нам понадобиться – это функция для вызова серверного скрипта. Рассмотрим такую функцию с именем make_request. Первый параметр данной функции – URL серверного скрипта (например «action.php»), второй – имя функции Javascript, которая будет принимать результаты нашего вызова (по умолчанию имя такой функции «set_request_result»), третий – параметры передаваемые серверному скрипту (такие же как и при отправки данных с веб-форм GET-запросом).

function make_request(url, function_name, param)
{
if (!is_param(function_name))
function_name = 'set_request_result';
if (!is_param(param))
param = null;
var http_request = false;
if (window.XMLHttpRequest) // Mozilla, Safari,…
{
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
http_request.overrideMimeType('text/xml');
}
else if (window.ActiveXObject) // IE
{
try
{
http_request = new ActiveXObject(«Msxml2.XMLHTTP»);
}
catch (e)
{
try
{
http_request = new ActiveXObject(«Microsoft.XMLHTTP»);
}
catch (e)
{
return false;
}
}
}
if (!http_request)
return false;
http_request.onreadystatechange = function() { eval(function_name + '(http_request);') };
http_request.open('GET', url, true);
http_request.send(param);
}

Второй и третий параметры не обязательны для заполнения. Для этого используется вспомогательная функция «is_param», которая проверяет наличие передаваемого параметра.

function is_param(param)
{
return typeof(param)!= 'undefined';
}

Далее рассмотрим функцию «set_request_result», которая принимает наш вызов. Ajax позволяет принимать данные как в текстовом виде так и в виде XML. Я использую более простой текстовый вид. В данном примере результат вызова серверного скрипта помещается в слой страницы (тег div с идентификатором «div1»).

function set_request_result(http_request)
{
try
{
if (http_request.readyState == 4 && http_request.status == 200)
{
var div1 = get_object('div1');
var result = http_request.responseText;
div1.innerHTML = result;
}
}
catch (e) {}
}

В этой функции я использую вспомогательную функцию get_object, которая возвращает элемент страницы по его идентификатору.

function get_object(name)
{
var obj = null;
obj = eval(«document.all['» + name + «']»);
if (!is_object(obj))
obj = eval(«document.getElementById('» + name + «')»);
else if (!is_object(obj))
obj = eval(«document.getElementByName('» + name + «')»);
return obj;
}

Далее вам необходимо реализовать серверный скрипт action.php, таким образом, чтобы в нем присутствовал вывод какого-либо содержимого. Например, так:

print 'Всем привет!!!';

Таким образом, надпись «Всем привет!!!» появится в нашем теге div, и, что самое главное, без перезагрузки всей страницы, что экономит трафик и время пользователю вашего сайта.

Источник статьи: http://archerl.com/ajax