Панель управления
Топ новостей
» DVD X Studios CloneDVD 5.6.1.1» Венок из ромашек / The Daisy Chain (2008)
» Замёрзшие / Frozen (2010) BDRip
» Мир Наизнанку 3: Африка (2012) SATRip
» Магия / Rough Magic (1995/HDTVRip)
» Переполох в Гималаях / Lissi und der wilde Kaiser (2007 ...
» Эпоха / Epoch (2001/DVDRip)
» Приключение на таинственном острове / Mysterious Island ...
» Вечера на хуторе близ Диканьки (2001/DVDRip)
» Movavi Video Suite 10.3 SE
Реклама
Знакомство с Ajax
Новость опубликовал: administrator ( Добавлено : (18-07-2010, 09:28) )
Небольшая вводная статья для тех, кто хотел бы узнать, что такое этот зверь Ajax, с чем его едят и как его применять «в быту». Сразу скажу, что, если Вы знакомы с языком javascript и HTTP запросами, ну и, конечно же знаете один из серверных языкрв программирования (PHP, Perl, к примеру), то освоить Ajax Вам будет просто…
Файл engine/modules/mymod.php не найден, его загрузка невозможна.
Комментариев: (30) Просмотров: 1011
AJAX - идея, предложенная одним умным человеком в далёком 2005 году. Суть ее сводится к тому, что бы осуществлять передачу данных от клиента (программы браузера) к серверу без фактической перезагрузки web-страницы, тоесть это та красота, которую мы видим на хороших сайтах.
Есть несколько реализаций этой идеи, данная статья расскажет об одной из них.
Для начала предлагаю уточнить, какие плюсы на своём сайте мы получаем, включая Ajax в свои скрипты.
1. Мы экономим траффик как посетителя, так и свой собственный, на многих ъостах приходиться платить за трафик.
2. Мы экономим драгоценное время посетителя, что положительно скажется на уважение пользователя к сайту.
3. Серверу не приходится передавать каждый раз кучу HTML-кода, что значительно облегчает ему работу. Сервер попросту меньше нагружен – сайт будет работать быстрее.
4. Пользователь жмет на кнопочку и практически тут же видит результат, что превращает сайт практически в пользовательскую программу.
Примеры использоавния Ajax
К примеру, раньше, пользователь, чтобы выйти (очистить cookies) из собственного аккаунта на каком-либо сайте, жал на "выход", ждал перезагрузки и, убедившись, что для системы он Гость, уходил с сайта. Что не совсем удобно, согласитесь. Теперь, он жмет "выход" и через мгновение видит изменение своего статуса. Таких примеров полным полно как во всём мире, так и в Рунете.
Я думаю, уже не осталось сомнений, что AJAX имеет право на существование на Вашем сайте. Остается только вопрос, как же реализовать саму идею на практике. Сразу скажу, есть несколько больших и громоздких скриптов. Но мы попытаемся написать свой собственны.
Я надеюсь, все знают о существовании тэга . Если не знаете, дальше можно не читать. Так вот, у него есть замечательный атрибут src - адрес к javascript-скрипту. Этим файлом так же может быть и php-файл с php-скриптом, после обработки сервером выдающий некий javascript, попутно может сохранять что-то в базу данных или в файлы, создавать cookies набор, ну или что-нибудь другое.
Для начала нам так же нужно динамически создавать в документе. Отведем для него специальный блок в нашем HTML-файле:
Стоит заметить, что нам понадобится передавать параметры php-скрипту, а функции URL-кодирования в javascript нет.
Данные от страницы должны как-то передаваться нашему файлу, где храниться javascript код, поэтому делаем так:
Пишем подобный скрипт, попытался его прокомментировать как можно подробнее:
Ну как видите, если потратить некоторое время, то можно быстро разобраться и уже через некоторое время начать внедрять Ajax в свой сайт. Я например, использовал Ajax для различного рода опросов на сайте, отсылки писем и прочих небольших полезных вещиц. Но не стоит внедрять Ajax для навигации по сайту или для выбора статей из списка - это существенно понизит индексируемость Вашего сайта, потому что javascript поисковики не «читают»!
И теперь остается еще один небольшой вопросик. Дело в том, что все скрипты, вызывающиеся запросом, кэшируются браузером. Чтобы этого избежать, каждый php-скрипт начинаем с четырех строк:
Так же не забывайте указывать кодировку как в HTML-файле, так и в php-скрипте, это Вас обезопасит от отображения «козябл» вместо буков.
Скачать небольшой пример ajax, Вы можете здесь - пример
Удачной работы с Ajax…
Есть несколько реализаций этой идеи, данная статья расскажет об одной из них.
Для начала предлагаю уточнить, какие плюсы на своём сайте мы получаем, включая Ajax в свои скрипты.
1. Мы экономим траффик как посетителя, так и свой собственный, на многих ъостах приходиться платить за трафик.
2. Мы экономим драгоценное время посетителя, что положительно скажется на уважение пользователя к сайту.
3. Серверу не приходится передавать каждый раз кучу HTML-кода, что значительно облегчает ему работу. Сервер попросту меньше нагружен – сайт будет работать быстрее.
4. Пользователь жмет на кнопочку и практически тут же видит результат, что превращает сайт практически в пользовательскую программу.
Примеры использоавния Ajax
К примеру, раньше, пользователь, чтобы выйти (очистить cookies) из собственного аккаунта на каком-либо сайте, жал на "выход", ждал перезагрузки и, убедившись, что для системы он Гость, уходил с сайта. Что не совсем удобно, согласитесь. Теперь, он жмет "выход" и через мгновение видит изменение своего статуса. Таких примеров полным полно как во всём мире, так и в Рунете.
Я думаю, уже не осталось сомнений, что AJAX имеет право на существование на Вашем сайте. Остается только вопрос, как же реализовать саму идею на практике. Сразу скажу, есть несколько больших и громоздких скриптов. Но мы попытаемся написать свой собственны.
Я надеюсь, все знают о существовании тэга . Если не знаете, дальше можно не читать. Так вот, у него есть замечательный атрибут src - адрес к javascript-скрипту. Этим файлом так же может быть и php-файл с php-скриптом, после обработки сервером выдающий некий javascript, попутно может сохранять что-то в базу данных или в файлы, создавать cookies набор, ну или что-нибудь другое.
Для начала нам так же нужно динамически создавать в документе. Отведем для него специальный блок в нашем HTML-файле:
<div id="block2" style="display: none;"></div>
Стоит заметить, что нам понадобится передавать параметры php-скрипту, а функции URL-кодирования в javascript нет.
Данные от страницы должны как-то передаваться нашему файлу, где храниться javascript код, поэтому делаем так:
<input type="submit" value="Отрправить запрос"' onclick="makeRequest(‘данные’);" />
Пишем подобный скрипт, попытался его прокомментировать как можно подробнее:
// Переменная name передаёт параметры php-скрипту
function makeRequest(name) { // Передаваемых параметров может быть больше
var http_request = false;
if (window.XMLHttpRequest) { // Если не Internet Explorer
http_request = new XMLHttpRequest(); // Создать объект для связи с сервером
if (http_request.overrideMimeType) { // Установить тип содержимого и кодировку
http_request.overrideMimeType('text/html; charset=windows-1251');
}
} else if (window.ActiveXObject) { // Если IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); // Создать объект для связи с сервером
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // Если не получилось создать
alert('Невозможно создать экземпляр класса XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); }; // Установить функцию которая будет использоваться при получении ответа
http_request.open('GET','script/add_ajax.php?name='+name, true); // Открыть соединение
http_request.send(null); // Отослать запрос серверу
}
function alertContents(http_request) {
if (http_request.readyState == 4) { // Если ответ получен
if (http_request.status == 200) { // Если все нормально
//Вставить в содержимое block полученный ответ
document.getElementById('block2').style.display = 'block';
// Вствляем полученные от сервера данные в блок на нашей странице
document.getElementById('block2').innerHTML=http_request.responseText;
} else {
alert('С запросом возникла проблема.');
}
}
}
function makeRequest(name) { // Передаваемых параметров может быть больше
var http_request = false;
if (window.XMLHttpRequest) { // Если не Internet Explorer
http_request = new XMLHttpRequest(); // Создать объект для связи с сервером
if (http_request.overrideMimeType) { // Установить тип содержимого и кодировку
http_request.overrideMimeType('text/html; charset=windows-1251');
}
} else if (window.ActiveXObject) { // Если IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); // Создать объект для связи с сервером
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // Если не получилось создать
alert('Невозможно создать экземпляр класса XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { alertContents(http_request); }; // Установить функцию которая будет использоваться при получении ответа
http_request.open('GET','script/add_ajax.php?name='+name, true); // Открыть соединение
http_request.send(null); // Отослать запрос серверу
}
function alertContents(http_request) {
if (http_request.readyState == 4) { // Если ответ получен
if (http_request.status == 200) { // Если все нормально
//Вставить в содержимое block полученный ответ
document.getElementById('block2').style.display = 'block';
// Вствляем полученные от сервера данные в блок на нашей странице
document.getElementById('block2').innerHTML=http_request.responseText;
} else {
alert('С запросом возникла проблема.');
}
}
}
Ну как видите, если потратить некоторое время, то можно быстро разобраться и уже через некоторое время начать внедрять Ajax в свой сайт. Я например, использовал Ajax для различного рода опросов на сайте, отсылки писем и прочих небольших полезных вещиц. Но не стоит внедрять Ajax для навигации по сайту или для выбора статей из списка - это существенно понизит индексируемость Вашего сайта, потому что javascript поисковики не «читают»!
И теперь остается еще один небольшой вопросик. Дело в том, что все скрипты, вызывающиеся запросом, кэшируются браузером. Чтобы этого избежать, каждый php-скрипт начинаем с четырех строк:
Header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
Header("Cache-Control: no-cache, must-revalidate");
Header("Pragma: no-cache");
Header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT");
Header("Cache-Control: no-cache, must-revalidate");
Header("Pragma: no-cache");
Header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT");
Так же не забывайте указывать кодировку как в HTML-файле, так и в php-скрипте, это Вас обезопасит от отображения «козябл» вместо буков.
Скачать небольшой пример ajax, Вы можете здесь - пример
Удачной работы с Ajax…
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Другие новости по теме:
- CSS: верстка несимметричных макетов.
- PHP: запись информации в текстовый файл
- CSS: верстка макета из трех колонок с постоянной шириной
- Постраничная навигация на PHP
- Вёрстка на div. Как обойтись без float
- Пользовательские интерфейсы jQuery: tooltip – всплывающая подсказка.
- Кросс-браузерный CSS без хаков
- Сжатие данных с помощью PHP gzip module
- Отправка писем с вложениями на PHP
- Пользовательские интерфейсы jQuery: создаем слайдер.
#1 написал: HuttBlalp
4 апреля 2012 07:44 | ICQ: -- |
 Группа: Гости Регистрация: -- |
fleet credit card account access, free low interest credit card application. credit repair spokane, Pay day loans or money advances. transunion credit score compared to fico using a credit services. colorado consumer credit law, mortgage definitions conforming loans. line of credit called. bad credit home loan co, opt out of credit card invitations. |
Публикаций: 0 | Комментариев: 0
цитировать
#2 написал: GekCreertyWak
12 мая 2012 14:39 | ICQ: -- |
Группа: Гости Регистрация: 11.05.2012 |
car insurance search engine cheap new driver car insurance. home insurance comparison sites, car insurance quote. cheap contents insurance, rental car company insurance. cheap car insurance for learner nj homeowners insurance. best homeowners insurance. car insurance ga home insurance in florida. |
Публикаций: 0 | Комментариев: 208
цитировать