AJAX при помощи чистого JavaScript
// 1. Создаём новый объект XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2. Конфигурируем его: GET-запрос на URL 'send.php' Очень важно указать тип запроса true(асинхронный) или false(синхронный). Этот параметр говорит о том ждёт ли ваш сервер когда вы выполните задачу или идёт дальше не дождавшись. Часто бывает важно при реакции на клик по ссылке, реакции на форму и многое другое.
xhr.open('GET', 'send.php?a=2', false);
// 3. Отсылаем запрос
xhr.send();
// 4. Если код ответа сервера не 200, то это ошибка
if (xhr.status != 200)
{
// обработать ошибку
alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found
}
else {
// вывести результат
alert( xhr.responseText ); // responseText -- текст ответа.
}
Решаем отправку при помощь POST запроса
//Формируем запрос
var request = new XMLHttpRequest();
//Создаём переменные
var data = 'name=123123&data=456456';
//Указываем тип запроса адрес куда мы его отправим Очень важно указать тип запроса true(асинхронный) или false(синхронный). Этот параметр говорит о том ждёт ли ваш сервер когда вы выполните задачу или идёт дальше не дождавшись. Часто бывает важно при реакции на клик по ссылке, реакции на форму и многое другое.
request.open('POST', '/theme/bronim.php', true);
//Правим заголовок
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
//Пишем функцию которая будет реагировать на изменения readystate
request.onreadystatechange = function ()
{
if (request.readyState == 4 && request.status == 200)
{
//Тут можно заложить то действие которое нам необходимо, к примеру можно сразу перенести контент в нужный нам блок через innerHTML
alert(request.responseText);
//document.getElementById('podrob').innerHTML = request.responseText;
}
}
//Отправляем данные
request.send(data);
ОБработка
Функцию для вывода информации можно интегрировать изначально в ответ полученный из запроса:
onclick="selhour (this,1);">1
Внутри ответа можно обращатся через
getElementsByTagName("td") и обращение к родителю parentNode. В примере выше эти действия применяются внутри функции selhour.
Взаимодействие с DOM элементами
Интересная статья как использовать те элементы которые были созданы
Если на сайте присутствуют обработчики событий, придётся перезапустить скрипт чтобы прочитать элементы занова.