С помощью методов open и send Вы можете отправлять асинхронные запросы.

Отправление запроса на сервер

С помощью методов open() и send() объекта XMLHttpRequest Вы можете отправлять AJAX запросы.

Синтаксис запроса:

// Создаем объект XMLHttpRequest
var xhttp=new XMLHttpRequest();
// Запросим содержимое файла testfile.txt 
xhttp.open('GET',testfile.txt,true);
xhttp.send();

Запрос GET

Приведем пример простого GET запроса, который запрашивает содержимое файла testfile.txt и выводит его на страницу:

xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState==4 && xhttp.status==200)
      document.getElementById("result").innerHTML=xhttp.responseText;
   }
xhttp.open("GET","testfile.txt",true);
xhttp.send();

Обратите внимание: содержимое текстового файла testfile.txt: Это содержимое обычного текстового файла.

Передача данных

Вместе с AJAX запросом на сервер могут быть переданы различные данные.

Рассмотрим передачу информации на примере простого калькулятора, который складывает числа.

var x=document.getElementById('tf1').value;
var y=document.getElementById('tf2').value;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
  if (xhttp.readyState==4 && xhttp.status==200)
     document.getElementById("ajax").innerHTML=xhttp.responseText;
  }
xhttp.open("GET","add.php?x="+x+"&y="+y,true);
xhttp.send();

Запрос POST

Приведем пример простого POST запроса, который запрашивает содержимое файла testfile.txt и выводит его на страницу:

xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState==4 && xhttp.status==200)
      document.getElementById("result").innerHTML=xhttp.responseText;
   }
xhttp.open("POST","testfile.txt",true);
xhttp.send();

Обратите внимание: несмотря на то, что в результате выполнения POST и GET запросов мы получили одинаковый результат различия между ними имеются и мы рассмотрим их далее в данной главе.

Метод POST как и метод GET позволяет передавать вместе с AJAX запросами различные данные.

Данные, которые будут переданы на сервер должны быть указаны в качестве параметров метода send().

Обратите внимание: чтобы отправить данные в формате, в котором передаются данные с HTML форм необходимо задать соответствующий HTTP заголовок с помощью setRequestHeader.

var x=document.getElementById('tf1').value;
var y=document.getElementById('tf2').value;

xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState==4 && xhttp.status==200)
      document.getElementById('ajax').innerHTML=xhttp.responseText;
   }
xhttp.open('POST','addpost.php',true);
xhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
var str='x='+x+'&y='+y;
xhttp.send(str);

Какой метод выбрать GET или POST?

Метод GET проще и быстрее при запросах, однако POST более надежный и безопасный.

Тем не менее мы рекомендуем Вам всегда использовать GET если это возможно.

Приведем несколько примеров где использование GET недопустимо:

• Необходимо передать секретные данные (такие как логин и пароль пользователя);
• Необходимо передать большое количество данных. GET имеет предел на количество передаваемых данных (2000 символов), а POST нет;
• Необходимо получить некэшированный результат. Как можно избежать кэширования результата рассказано далее в этой главе.

Кэширование результата при GET запросах.

Часто ответ полученный в результате GET запроса не является "свежим" ответом, а является копией, которая была сохранена в кэше при предыдущем обращении к серверу.

К счастью существует способ помогающий избежать этого. Необходимо, чтобы url при GET запросе всегда был уникальным. Передача при запросе в скрипт переменной со случайным значением исключит возможность получения кэшированного значения.

Синтаксис:

url?переменная="+Math.random()

xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState==4 && xhttp.status==200)
      document.getElementById("time").innerHTML=xhttp.responseText;
   }
xhttp.open("GET","gettime.php?x="+Math.random(),true);
xhttp.send();

Сделайте сами

Задание 1 исправьте ошибки в коде.

var xhttp=new XMLHTTPRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState=4 && xhttp.status=200)
      document.getElementById('res').innerHTML=xhttp.responseText;
   }
xhttp.opens('GET' winter.txt true);
xhttp.send();

Задание 2 создайте четыре кнопки и напишите для них код запрашивающий с помощью AJAX файлы winter.txt, summer.txt, autumn.txt, spring.txt с сервера и отображающий результат на странице.

<script type="text/javascript">
/* Пишите код здесь */
</script>

<body>
<!--
Пишите код здесь 
-->
<div id='summer'> </div>
<div id='autumn'> </div>
<div id='winter'> </div>
<div id='spring'> </div>
</body>

Задание 3

1. Скрипт file1.php принимает три аргумента var1, var2, var3 (значения могут быть в диапазоне от 1 до 5). Создайте AJAX запрос для обращения к этому скрипту и подберите такие значения аргументов var1, var2 и var3, чтобы результат выполнения скрипта был равен 8.
2. Скрипт file2.php принимает три аргумента a, b, c (значения могут быть в диапазоне от 5 до 10). Создайте AJAX запрос для обращения к этому скрипту и подберите такие значения аргументов a, b и c, чтобы результат выполнения скрипта был равен 130.

<script type="text/javascript">
/* Пишите код здесь */
</script>

<body>
<!--
Пишите код здесь 
-->
</body>