аватар |

Уроки / Ajax /

Пример работы Ajax и txt-файла

После пройденных уроков пора перейти и к примерам! В этом уроке рассмотрим примеры работы асинхронной и синхронной передачи данных в Ajax на примере txt-файлов.

Пример синхронной передачи данных в Ajax + TXT


Скажу сразу - для создания примера достаточно создать два файла (ajax.txt и index.html) и вставить в них содержимое, указанное ниже. Итак, делаем по шагам:

1. Создаём самый обычный txt-файл.
2. Назовём его ajax.txt
3. Вставляем в него любой текст, который вы хотите увидеть, а затем сохраняем.

Текст в ajax.txt (в качестве примера)

<h2>Ура! Ajax работает!</h2>

4. Создаём html-файл.
5. Назовём его index.html
6. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

Код HTML и JS (файла index.html)

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// код для IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// код для IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","ajax.txt",false); // false - используем СИНХРОННУЮ передачу
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>

<div id="myDiv"><h2>Содержимое данного блока изменится</h2></div>
<button type="button" onclick="loadXMLDoc()">Изменить предложение</button>

</body>
</html>

Демонстрация Скачать исходники

Теперь можете просмотреть работу примера.

Пример асинхронной передачи данных в Ajax + TXT


1. Используем созданный в первом примере файл ajax.txt. Содержимое можно не менять:

Текст в ajax.txt (в качестве примера)

<h2>Ура! Ajax работает!</h2>

2. Создаём html-файл.
3. Назовём его index.html
4. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// код для IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// код для IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax.txt",true); // true - используем АСИНХРОННУЮ передачу
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Содержимое данного блока изменится</h2></div>
<button type="button" onclick="loadXMLDoc()">Изменить Содержимое</button>

</body>
</html>

Демонстрация Скачать исходники

На вид действие будет тем же самым, однако следует использовать именно асинхронную передачу, так как не нужно ждать перезагрузки страницы и ответа сервера - загрузка данных Ajax и страницы не связаны между собой, то есть асинхронны при обработке.


Спасибо за внимание! Переходим к более сложным примерам!
 



Распечатать
Похожие статьи
15 июня 2013 11:00 Создаём объект XMLHttpRequest
15 июня 2013 10:57 Обмен данными в Ajax
04 апреля 2014 17:02 Пример работы Ajax и PHP с демонстрацией
15 июня 2013 10:58 Методы и свойства объекта XMLHttpRequest
07 июня 2013 13:32 Что такое Ajax?


Комментарии к статье (vk.com)