Отправка файла методом пост с помощью ajax. Простой пример использования PHP и 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. Но при этом, если отправляю через форму, то все работает на ура. Ниже привожу index.html, из которого хочу отправить логин пользователя. login.js, в котором формирую сам запрос, SerletStore.java сам сервлет. И структура всего проекта.
login.js Единственный более менее работающий url = "http://localhost:8080/testservlet/post ", а они "/testservlet/post", "testservlet/post", "/post," "post" вызывают ошибку 404.
Function addNewVoting() { var xhr = new XMLHttpRequest(); var body = "name=" + encodeURIComponent("name") + "&surname=" + encodeURIComponent("surname"); xhr.open("POST", "http://localhost:8080/testservlet/post", true) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") xhr.send(body); }; function addNewVoting1() { var user = { "firstName": "vlad" } var JSONString = JSON.stringify(user); var url = "http://localhost:8080/testservlet/post"; $.ajax({ url: url, method: "post", data: JSONString, contentType: "application/json", error:function (message) { var JSONObject = JSON.parse(message); console.log(JSONObject); }, success:function (data) { var JSONObject = JSON.parse(data); console.log(JSONObject); }, headers: { "Accept":"application/json", "Accept-Language":"en", "Cache-Control":"max-age=3600" } }); };
При вызове второй функции выводит это:
index.html
Login Form
ServletStore.java
Import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet(name="post", urlPatterns = "/post") public class Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter writer = resp.getWriter(); writer.print("Hello"); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doPost(req, resp); } }
Структура проекта .
Уже достаточно давно многие сайты обладают динамическими страницами, то есть они обновляются без перезагрузки. Это достигается путём обращений к серверу через 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 нам вовсе не потребовался. И я настоятельно рекомендую, если у Вас всего пару запросов на весь сайт, то даже не думайте использовать эту тяжеловесную библиотеку, а используйте материал данной статьи.
В данной статье я расскажу, как написать на чистом JavaScript е Ajax без использования библиотек.
Для начала нам нужно понять, как работает Ajax. Ajax работает в JavaScript с помощью стандартной функции XMLHttpRequest, но в IE нужно использовать функцию ActiveXObject («Microsoft.XMLHTTP»).
Покажу на примерах, как всё это работает.
Начнём.
Нужно сделать проверку Ajax объекта, чтобы сделать скрипт кроссбраузерно.
Вот код проверки:
Var M = {}; // Здесь мы создаём объект для создания методов и свойства.
M._xhr = function(){try {this.a = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {this.a = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {this.a = false;}} if(!this.a && typeof XMLHttpRequest!="undefined") { this.a = new XMLHttpRequest();}return this.a;}
Потом нужно сделать несколько функций для упращения кода и его удобства. Вот код:
M._d = document;
M._func = function(obj) {return Object.prototype.toString.call(obj) === ""; }
M._array = function(obj) { return Object.prototype.toString.call(obj) === ""; }
M._ge_by_tag = function(id){ this.p = M._d.getElementsByTagName(id); this.ct = this.p.length; this.count = 0;do{return this.p;this.count++;}while(this.count = 200 && r.status < 300) {
this.text = r.responseText;if(d.onDone) d.onDone(this.text, r); else if(d.onJsonDone) d.onJsonDone(eval("("+this.text+")"),r); else if(d.onFail) d.onFail = "";
}else {alert(r.status);}}}}}
Сейчас нужно разобраться в коде:
R.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");r.setRequestHeader("X-Requested-With", "XMLHttpRequest");
Эта строка означает, что мы используем Ajax.
Дальше.
R.open("POST", link, true);
r.send(q);
А это обработчик открывает запрос с сервером, где send отправляет данные.
Этот код для POST запроса, а для GET нужно немного изменить. Нужно просто не отправлять данные с помощью send. Для отправки GET запроса и его данных нужно просто в open после link прибавить вот этот "+"?"+q". Здесь мы отправляем данные в открытом виде. Например:
R.open("GET", link+"?"+q, true);
r.send(null); // Здесь напишем null. поскольку ничего не нужно отправить.
test.php?text=hello world
Вот с кодом всё. А теперь как использовать код.
Вот пример:
demo test
window.onload = function(){
M.get("/test.php",{ // M.post or M.get
query:{text:"hello"}, // Значение запроса
onDone:function(a){ // Если всё нормально, то отобразить результат.
M._ge_by_id("result").innerHTML = a;
},
onFail:function(a){ // А если нет. то показать ошибку
alert("Error");
}
});
}
Есть ещё возможность преобразовать результат в JSON.
Вот код:
Метод post() , как правило, предназначен для отправки данных на сервер (например из формы).
К контексте метода post стоит упомянуть о json - текстовый формат, основанный на javascript. Может использоваться практически любым языком программирования.
jQuery, Ajax запрос методом POST jQuery.post(url,,,)- Первый аргумент(url) – это url-адрес документа, куда отправляется запрос;
- Второй аргумент(data) – это данные, отсылаемые на сервер, как правило, представленные в виде объекта js;
- Третий аргумент(callback(data, textStatus, jqXHR)) – это ф-я, вызываемая после ответа сервера. В качестве аргументов данная функция принимает данные отправленные сервером в ответ на запрос и статус того, как был выполнен запрос.
В языке PHP (от 5.2), поддержка JSON включена в ядро в виде функций json_decode() (декодирует JSON строку) и json_encode() , которые сами преобразуют типы данных JSON в соответствующие типы 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) данные (данные вводятся пользователем). Если данные корректны, выводим сообщение. В ином случае делаем красную подсветку у полей. Все работает асинхронно, то есть без перезагрузки страницы. Вы можете использовать данный принцип, например, чтобы создать систему комментариев с вставкой комментариев в базу данных.
