Каждый из программистов сталкивался с потребностью в использовании асинхронного обмена данными на странице(AJAX), данная технологи помогает подгружать контент на страницу без ее перезагрузки.
AJAX (Asynchronous Javascript and XML) — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.
Установка мощных JS(JavaScript) библиотек не всегда оправдана и не всегда нужна. Поэтому предлагаю вам один из самых простых вариантов организации асинхронного обмена данными на странице.
В моем варианте это файл ajax.js со следующим содержимым:
- function newContent( link, target) {
- /*
- link - URL адрес подгружаемой страницы
- target - DIV в который мы подгружаем контент
- */
- var contaner = document.getElementById(target);
-
- contaner.innerHTML = 'Загрузка ...';
-
- var resource = getRequest();
- if( resource )
- {
- resource.open('get', link);
- resource.onreadystatechange = function ()
- {
- /*Получаем значение, указывающее текущее состояние элемента управления*/
- if(resource.readyState == 4)
- {
- contaner.innerHTML = resource.responseText;
- }
- }
- resource.send(null);
- }
- else
- {
- document.location = link;
- }
- }
- /* Функция для получения метода для работы с браузерами */
- function getRequest(){
- try { return new XMLHttpRequest() }
- catch(e)
- {
- try { return new ActiveXObject('Msxml2.XMLHTTP') }
- catch(e)
- {
- try { return new ActiveXObject('Microsoft.XMLHTTP') }
- catch(e) { return null; }z
- }
- }
- }
* This source code was highlighted with Source Code Highlighter.Вызов в html делается следующим образом(index.html):
- <html>
- <head>
- <script type="text/javascript" src="ajax.js">script>
- head>
- <body>
- <a href="" onclick="newContent('newcontent.html','TARGET')">
- Вставить контент файла newcontent.html в див TARGET
- a>
- <div id="TARGET">div>
- body>
- html>
* This source code was highlighted with Source Code Highlighter.Вот собственно и маленькое простейшее решение.
Комментарии
Открыть систему комментариев