Уже достаточно давно многие сайты обладают динамическими страницами, то есть они обновляются без перезагрузки. Это достигается путём обращений к серверу через JavaScript , в большинстве случаев, это POST и GET запросы . И практически всегда такие сайты используют для этого Ajax . И далеко не все знают (к сожалению), что Ajax - это не отдельный язык, а всего лишь библиотека JavaScript . Вывод: Ajax - это лишь удобный способ отправить POST-запросы , но всё это можно сделать и без его помощи. Вот как отправить POST-запросы через JavaScript без Ajax , я расскажу в этой статье.

Мы с Вами сейчас решим классическую задачу - это суммирование двух чисел, заданных пользователем. То есть мы с Вами считаем из текстовых полей 2 числа, отправим их на сервер, получим ответ и выведем на страницу. И всё это без перезагрузки страницы .

Начнём с простого: написание PHP-кода :

Здесь всё элементарно, поэтому даже не буду комментировать. А вот теперь более сложная часть - клиентская:

/* Данная функция создаёт кроссбраузерный объект XMLHTTP */
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function summa() {
var a = document.getElementById("a").value; // Считываем значение a
var b = document.getElementById("b").value; // Считываем значение b
var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
xmlhttp.open("POST", "test.php", true); // Открываем асинхронное соединение
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Отправляем кодировку
xmlhttp.send("a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b)); // Отправляем POST-запрос
xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
if (xmlhttp.readyState == 4) { // Ответ пришёл
if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
document.getElementById("summa").innerHTML = xmlhttp.responseText; // Выводим ответ сервера
}
}
};
}

Сумма равна:

HTML-код я комментировать не буду, поскольку он совершенно прозрачный. А вот к JavaScript я немного добавлю, несмотря на подробные комментарии. Во-первых, функция getXmlHttp() является универсальной. Вы её можете смело копировать в свои скрипты. Её задача вернуть такой XMLHTTP , чтобы он работал в любом браузере. Потому что самый популярный вариант - это new XMLHttpRequest() , однако, он не работает, например, в IE6 . Другие варианты также не являются универсальными, поэтому здесь мы просто подбираем под любой браузер рабочий вариант.

Я написал также в комментариях про "асинхронную работу ". Есть ещё синхронный вариант. Отличие только в том, что в синхронном пока не будет получен ответ от сервера, браузер работать не будет , он просто повиснет. Мне трудно придумать такую задачу, где это необходимо, поэтому я сразу написал асинхронный вариант. Он работает следующим образом: мы отправляем запрос и ждём ответа, но при этом браузер не виснет . А когда ответ приходит (xmlhttp.readyState == 4 ), то мы сразу обрабатываем ответ. Вот это и есть асинхронный вариант работы, он чуть-чуть сложнее, но только его и нужно использовать (за исключением очень редких случаев).

Вот таким способом отправляются POST-запросы через JavaScript . Как видите, Ajax нам вовсе не потребовался. И я настоятельно рекомендую, если у Вас всего пару запросов на весь сайт, то даже не думайте использовать эту тяжеловесную библиотеку, а используйте материал данной статьи.

GET-запрос

GET или POST-запрос отправляется через объект XMLHttpRequest (также сокращённо называется XHR).

// выполнить код, когда придёт ответ с GET-запроса // код при успешном запросе // Оправка GET-запроса ajax.open("GET" , "/handler.php" ); ajax.setRequestHeader("X-Requested-With" , "XMLHttpRequest" ); ajax.send();

Стоит обратить внимание на метод setRequestHeader() . Данный метод говорит серверу, что был отправлен Ajax-запрос. Многие фреймворки, например jQuery, устанавливают данный заголовок по умолчанию. Если не установить данный заголовок, то сервер может не определить Ajax-запрос и вернуть ошибку.

Отправлять GET или POST-запрос можно только на текущем домене сайта (из-за правила ограничения домена, также называемые «Same Origin Policy»).

Метод open() также может принимать третий параметр false , который делает запросы синхронными (т.е. код перестаёт выполняться, пока не придёт ответ от сервера). Данный способ считается нерекомендованным к использованию, т.к. может замедлять работу JavaScript. Браузер Chrome также выдаёт предупреждение в консоли, когда используется данным параметр.

POST-запрос

Сначала надо указать, какие данные надо отправить:

// Старые браузеры var params = "lang=JavaScript&framework=jQuery" ; // Современные браузеры var params = new FormData(); params.append("lang" , "JavaScript" ); params.append("framework" , "jQuery" );

Объект FormData() поддерживается современными браузерами (поддержка IE с версии IE 10).

В FormData() можно также передать элемент формы, чьи поля будут переданы в POST-запросе.

var params = new FormData(document .getElementById("form-name" )); // 1-ый способ var params = new FormData(document .forms["form-name" ]); // 2-ой способ

Созданные параметры можно передать через метод send() .

var ajax = new XMLHttpRequest(); // выполнить код, когда придёт ответ с POST-запроса ajax.onreadystatechange = function () { if (ajax.readyState == 4 ) { if (ajax.status == 200 || ajax.status == 304 ) { // код при успешном запросе ajax.response; // ответ сервера } else { // код при ошибке } } } // Оправка POST-запроса ajax.open("POST " , "/ajax-handler.php" ); ajax.setRequestHeader("X-Requested-With" , "XMLHttpRequest" ); ajax.send(params ); Please enable JavaScript to view the jQuery AJAX Определение и применение

jQuery функция $.post() позволяет загрузить данные с сервера с помощью HTTP запроса методом POST. Для загрузки данных с помощью HTTP запроса методом GET вы можете воспользоваться jQuery функцией $.get() .

Обращаю Ваше внимание, что функция $.post() является сокращенной версией функции $.ajax() со следующими параметрами:

$.ajax({ type : "POST " // метод HTTP, используемый для запроса url : "url ", // строка, содержащая URL адрес, на который отправляется запрос data : data, // данные, которые будут отправлены на сервер success : success , // функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно dataType : "dataType " // тип данных, который вы ожидаете получить от сервера } );

Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:

Url?name=value&name=value // метод GET использует пары имя = значение

При отправке данных методом POST данные передаются таким образом, что пользователь уже не видит передаваемые обработчику формы данные (добавляет данные формы в теле запроса http, которые не отображаются в URL).

Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST :

• Метод GET ограничивает объём передаваемой в URL информации (около 3000 символов), метод POST не имеет подобных ограничений.
• Никогда не используйте метод GET , если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL - в открытом виде).
• Страница, сгенерированную методом GET , можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
• Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.

jQuery синтаксис: Синтаксис 1.0: $.post(url , data , success , dataType ); url - String data - PlainObject , или String success - Function (PlainObject data , String textStatus , jqXHR jqXHR ) dataType - String Синтаксис 1.12/2.2: $.post({ settings } ); // параметры запроса передаются в объекте settings - PlainObject

Страницы, загруженные функцией $.post() никогда не кэшируются, по этой причине значения параметров cache (определяет будут ли кэшироваться страницы, по умолчанию true ) и ifModified (проверяет поля заголовка Last-Modified , по умолчанию false ) jQuery функции .ajaxSetup() (устанавливает значения по умолчанию для будущих запросов AJAX ) не повлияют на эти запросы .

Добавлен в версии jQuery 1.0 Значения параметров Параметр Описание

url	Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр.
data	Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом.
success	Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Необязательный параметр. Функция принимает следующие параметры: data - данные возвращенные с сервера. textStatus - строка описывающая статус запроса. jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest ).
dataType	Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML , с версии jQuery 1.4 json будет давать объект JavaScript , script будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр. Доступные типы (результат передается в качестве первого аргумента в функцию обратного вызова success ): "xml" - возвращает XML документ, который может быть обработан с помощью jQuery. "html" - возвращает HTML как обычный текст, теги будут обработаны и выполнены после вставки в объектную модель документа (DOM ). "script" - расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _= , даже если парамета cache имеет значение true . Это превратит метод POST в GET для кроссдоменных запросов. "json" - расценивает ответ как JSON и возвращает объект JavaScript . Кроссдоменные "json" запросы преобразуются в "jsonp" , если в параметрах запроса не указано jsonp : false . Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату , любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL , или {} . "jsonp" - загружает данные в формате JSON , используя при этом формат загрузки JSONP . Добавляет дополнительный параметр "?callback=? " в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _= к URL адресу,даже если парамета cache имеет значение true . "text" - обычная текстовая строка. несколько значений - значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте "text XML" для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML : "jsonp text XML" . Следующая строка позволит сделать тоже самое: "jsonp XML" , jQuery будет пытаться конвертировать из JSONP в XML , после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML .

Пример использования Пример использования jQuery функции $.post() $(document ).ready(function (){ $("form ").submit(function (){ var formData = $(this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки $.post("user.php ", formData , function (data ) { // передаем и загружаем данные с сервера с помощью HTTP запроса методом POST $("div ").html(data ); // вставляем в элемент данные, полученные от сервера } ) } ); } );

В этом примере мы привязываем JavaScript обработчик событий "submit" (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной ) формы при нажатии на элемент с типом submit (кнопка для отправки формы).

Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки - результат выполнения метода .serialize() . После этого с использованием jQuery функции $.post() выполняем асинхронный AJAX запрос со следующими параметрами:

• url - файл, к которому мы обращаемся ("user.php "), он содержит следующий PHP код: Результат {"a":1,"b":2,"c":3,"d":4,"e":5} PHP пример работы функции json_decode $json = "{"a":1,"b":2}"; var_dump(json_decode($json, true)); $arr = json_decode($json, true); echo "
  ".$arr["a"]. "
  ".$arr["b"]. "
  "; Результат array(5) { ["a"] => int(1) ["b"] => int(2) } 1 2 Пример работы Ajax запроса методом POST

  Что мы будем делать:
  Проверяем на корректность отправленные (POST-запросом AJAX) данные (данные вводятся пользователем). Если данные корректны, выводим сообщение. В ином случае делаем красную подсветку у полей. Все работает асинхронно, то есть без перезагрузки страницы. Вы можете использовать данный принцип, например, чтобы создать систему комментариев с вставкой комментариев в базу данных.

  
  

  jQuery $(document).ready(function(){ var working = false; /* Данный флаг предотвращает отправку нескольких комментариев: */ $("form").submit(function(e){ e.preventDefault(); if(working) return false; working = true; $("#submit").val("Подождите.."); $(".error").removeClass("error"); $.post("submit.php",$(this).serialize(),function(msg){ /* Отправляем значения формы в submit.php: */ working = false; $("#submit").val("Отправить"); if(msg.status) // Если данные корректны, добавляем сообщение { console.log(msg.status); $(msg.html).hide().insertBefore("form").slideDown(); } else { // Если есть ошибки, проходим циклом по объекту // msg.errors и выводим их на страницу $.each(msg.errors,function(k,v){ $("#"+k).addClass("error"); //alert(k); }); } },"json"); }); }); HTML Введите число Введите email PHP // принимаем данные пришедшие посредством ajax $arr = $_POST; $arr = $_POST; if(filter_var($arr, FILTER_VALIDATE_EMAIL) && filter_var($arr, FILTER_VALIDATE_INT)) { echo json_encode(array("status"=>1,"html"=>"Спасибо, ваши данные точны")); // информация возвращаемая сервером } else { if(filter_var($arr, FILTER_VALIDATE_EMAIL) == false) { $errors["email"] = "Пожалуйста, введите имя."; } if(filter_var($arr, FILTER_VALIDATE_INT) == false) { $errors["intt"] = "Пожалуйста, введите имя."; } $arr = $errors; /* Вывод сообщений об ошибке */ echo "{"status":0,"errors":".json_encode($arr)."}"; }

  JQuery это библиотека javascript, цель которой "пиши меньше, делай больше". jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.

  jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.

  Что такое AJAX?

  AJAX - это асинхронный (т.е. браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.) JavaScript и XML. Он используется для создания динамических и быстрых веб-страниц. AJAX позволяет нам обновлять часть веб-страницы без перезагрузки страницы целиком.

  Что насчет jQuery и AJAX?

  Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.

  jQuery делает существующий браузерный Ajax API мощнее и проще в использовании. Создавать вызовы ajax обычным способом, используя javascript, немного затруднительно: так как вы должны учитывать, что для различных браузеров требуются разные подходы к созданию объекта XMLHttpRequest . Кроме того отправлять данные, например, из форм, становится сложнее, если вы используете обычный javascript для вызова ajax.

  jQuery обеспечивает простую и мощную функциональность, которая расширяет javascript AJAX методы и обеспечивает более гибкий подход.

  В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме . Давайте начнем... Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.

  Шаг 1. Создайте файл school.php и вставьте в него следующий код:

  В приведенном выше коде мы получаем имя и номер студента и, используя jquery и ajax, отсылаем их в details.php .

  function getdetails(){ var name = $("#name").val(); var rno = $("#rno").val(); $.ajax({ type: "POST", url: "details.php", data: {fname:name, id:rno} }).done(function(result) { $("#msg").html(" Address of Roll no " +rno +" is "+result); }); }

  Your Name:
  Roll Number:

  Шаг 2: Создайте details.php и расположите в нем следующий код:

  В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.

  Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.

  Надеюсь, эта статья будет вам полезна.