Передача данных при спользовании GET И POST методов в XMLHTTPRequest (Ajax)
Автор: Paladinovolk | Категория: Сайтостроение Пятница 15 Январь 2010Обычно только GET метод используется при создании Ajax приложений. Но есть несколько случаев, когда POST необходима при создании AJAX запроса. Это может происходить по нескольким причинам. Например, POST запросы считаются более безопасными, чем GET запросы, создание запроса POST относительно труднее, чем создание запроса GET.
XMLHttpRequest Object
Для простоты, мы собираемся использовать XMLHTTPRequest, функция 'XMLHttpRequest()'. Если вы не знаете правильный способ как сделать объект XMLHttpRequest кросс-браузерным, смотрим здесь.
В первую очередь:
Использование GET метода
Сейчас мы открываем соединение с использованием метода GET.
var params = "lorem=ipsum&name=binny";
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(null);
Я надеюсь, что это ясно для вас. Если код не понятен, читайте статью "Пример создания не большого приложения AJAX", в который есть объяснения данного кода. Вам должно быть здесь все понятно прежде чем продолжить.
Использование POST метода
Внесем некоторые изменения. Будем использовать POST метод при отправке запроса.
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
Первое изменение (и самое очевидное), что я изменил первый аргумент функции "open" с GET на POST. Также обратите внимание на разницу во втором аргументе. В методе GET, мы посылаем параметры вместе с URL.
Но в методе POST мы будем использовать только URL в качестве второго аргумента.
Некоторые HTTP заголовки должны быть вместе с POST запросом. Поэтому мы задаем их в этих строках
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
Из вышенаписанного следует, что посылаемые данные, находится в форме "form". Мы также указываем длину параметров, которые мы посылаем.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
Мы установили «ready state» для обработчика события. Также как и для метода GET. Можно использовать http.responseText чтобы вставить значение в Div помощью innerHTML(AHAH), или по другому
Наконец, мы отправляем запрос с параметрами. В методе GET, этот параметр будет нулевым значением. Но в методе POST, данные, которые нужно отправить переданм в качестве аргумента функции. Параметры переменной были объявлены во второй строке "lorem=ipsum&name=binny".
