AJAX отправка XMLHttpRequest на сервер

AJAX (JavaScript) отправка запроса на сервер

Объект  XMLHttpRequest используется для запроса и обмена информацией с сервером без  загрузки  или перезагрузки страницы.

Отправка запроса на сервер

Для отправки запроса на сервер используются методы XMLHttpRequest – open() и send():

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

GET или POST?

GET проще и быстрее чем POST и может быть использован в больших случаях.
Однако, всегда используйте POST запрос когда:
- (обновление файла или базы данных на сервере)
- Отправка большего объема данных на сервер (POST не имеет объемного ограничения)
- Отправка пользовательских данных (которые могут содержать анонимные парамерты), POST более надежный и безопасный чем GET

Запрос методом GET

Простой GET запрос:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

В примере выше вы можете получить кэшированный запрос.
Что бы избежать этого, добавляйте уникальный идентификатор id в url:

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

Если Вы хотите отправить информацию методом GET, добавьте эту информацию в url:

xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();

Запрос методом POST

Простой POST запрос:

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

Для отправки данных типа формы HTML методом POST добавляйте HTML header с setRequestHeader().Определите данные которые Вы хотите отправить в send() методе:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

URL – файл на сервере
URL параметр в методе open() – адрес к файлу на сервере:

xmlhttp.open("GET","ajax_test.asp",true);

Асинхронный True или False?

AJAX определяется как Asynchronous JavaScript and XML и для объекта XMLHttpRequest ведет себя как AJAX – параметр async в методе open() отправляет значение true:

xmlhttp.open("GET","ajax_test.asp",true);

Отправка асинхронных запросов – огромный прогресс в веб-программировании. Большинство задач выполняемых на сервере требуют много времени. До появления AJAX эти операции могли спровоцировать зависание или остановку выполнения операции.
С AJAX JavaScript не нужно ждать ответа от сервера, но вместо этого может:
- использовать другие скрипты пока ожидают ответа от сервера
- обрабатывать ответ, когда ответ готов

Async=true

Когда используется Async=true, точно выполняется функция когда готов ответ в  onreadystatechange событии:

xmlhttp.onreadystatechange=function()   {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Async=false

Для использования Async=false нужно изменить третий параметр в open() на false:

xmlhttp.open("GET","ajax_info.txt",false);

Использование Async=false не рекомендуется, но для небольших запросов можно использовать.

Помните, что JavaScript не продолжит работу, пока сервер не даст ответ. Если сервер занят или медленный, запрос может зависнуть или остановиться.

Когда используется async=false не пишется onreadystatechange function – просто пишется код после send() утверждения:

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Почему Вы еще не прокомментировали?
Оставьте свой комментарий! Весь Интернет уже заждался!