Объект XMLHttpRequest используется для обмена данными с сервером.
Отправить запрос на сервер
Для того, чтобы отправить запрос на сервер, мы используем open() и send() методы объекта XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| метод | Описание |
|---|---|
| open(method, url, async) | Определяет тип запроса method : тип запроса: GET или POST url : сервер (файл) местоположение async : true (асинхронный) или false (синхронно) |
| send() | Посылает запрос на сервер (используется для GET ) |
| send(string) | Посылает запрос на сервер (используется для POST ) |
GET или POST ?
GET проще и быстрее , чем POST , и может использоваться в большинстве случаев.
Тем не менее, всегда использовать POST запросы , когда:
- Кэшируемый файл не вариант (обновить файл или базу данных на сервере).
- Отправка большого количества данных на сервер ( POST не имеет ограничений по размеру).
- Отправка пользовательского ввода (который может содержать неизвестные символы), POST является более надежной и безопасной , чем GET .
GET запросы
Несложное GET запрос:
В приведенном выше примере, вы можете получить результат из кэша. Чтобы избежать этого, добавьте уникальный ID to the URL: ID to the URL:
Если вы хотите отправить информацию с GET методом, добавьте информацию URL:
пример
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Попробуй сам " POST запросы
Несложное POST запрос:
Для POST данные , как HTML - форму, добавить HTTP header с setRequestHeader() . Укажите данные , которые вы хотите отправить в send() метод:
пример
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Попробуй сам " | метод | Описание |
|---|---|
| setRequestHeader(header, value) | Добавляет HTTP-заголовки запроса header : указывает имя заголовка value : определяет значение заголовка |
URL - файл на сервере
url параметр open() метод, является обращение к файлу на сервере:
xhttp.open("GET", "ajax_test.asp", true);Файл может быть любого типа файла, например .txt и .xml или файлы сценариев сервера, как .asp и .php (который может выполнять действия на сервере перед отправкой ответ обратно).
Асинхронный - True или False ?
AJAX расшифровывается как Asynchronous JavaScript и XML, а для объекта XMLHttpRequest вести себя как AJAX, в async параметра open() метод должен быть установлен верно:
xhttp.open("GET", "ajax_test.asp", true);Отправка асинхронных запросов огромный шаг вперед для веб-разработчиков. Многие из задач, выполняемых на сервере, очень много времени. Перед тем как AJAX, эта операция может привести к применению к зависанию или остановить.
С помощью AJAX, то JavaScript не придется ждать ответа от сервера, но может вместо того, чтобы:
- выполнять другие сценарии во время ожидания ответа сервера
- иметь дело с ответом, когда ответ готов
Async=true
При использовании класса = "notranslate" асинхронной = правда, указать функцию для выполнения , когда ответ готов в случае onreadystatechange:
пример
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Попробуй сам " Вы узнаете больше о onreadystatechange в следующей главе.
Async=false
Чтобы использовать async=false , измените третий параметр в open() метода к ложным:
xhttp.open("GET", "ajax_info.txt", false);Использование async=false не рекомендуется, но в течение нескольких небольших запросов это может быть в порядке.
Помните, что JavaScript не будет продолжать выполняться, пока ответ сервера не будет готов. Если сервер занят или медленно, то приложение будет висеть или остановить.
Примечание: При использовании async=false , не пишите функцию onreadystatechange - просто поместите код после send() заявление:
пример
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Попробуй сам "