Отправка данных

Последнее обновление: 1.11.2015

Принцип отправки данных может отличаться в различных ситуациях. Рассмотрим эти ситуации.

Отправка GET-запроса

GET-запрос характеризуется тем, что данные могут отправляться в строке запроса:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<div id="output"></div>
<script>
// объект для отправки
var user = {
	name: "Tom",
	age: 23
};

var request = new XMLHttpRequest();
function reqReadyStateChange() {
	if (request.readyState == 4) {
		var status = request.status;
		if (status == 200) {
            document.getElementById("output").innerHTML=request.responseText;
        }
	}
}
// строка с параметрами для отправки
var body = "name=" + user.name + "&age="+user.age;
request.open("GET", "http://localhost:8080/postdata.php?"+body);
request.onreadystatechange = reqReadyStateChange;
request.send();
</script>
</body>
</html>

Для отправки берем свойства объекта user и формируем из их значений сроку с параметрами: "name=" + user.name + "&age="+user.age. Затем эта строка добавляется к строке запроса в методе open("GET", "http://localhost:8080/postdata.php?"+body)

Предполагается, что данные отправляются скрипту на языке php postdata.php, который может иметь, например, следующее содержание:

<?php
$name = "Не известно";
$age = "Не известно";
if(isset($_GET['name'])) $name = $_GET['name'];
if (isset($_GET['age'])) $age = $_GET['age'];
echo "Ваше имя: $name  <br> Ваш возраст: $age";
?>

Конкретная технология стороны сервера тут не важна. И в качестве тестирования можно взять любую другую технологию. Например, ASP.NET MVC. Метод контроллера в ASP.NET MVC, который принимает данные, мог бы выглядеть следующим образом:

public string PostData(string name, int age)
{
    return "Ваше имя: "+name +"; Ваш возраст: "+ age;
}

Кодирование параметров

Все отправляемые в GET-запросе параметры разделяются знаком амперсанда(&). Но что, если какой-нибудь параметр имеет знак амперсанда. Например,

var user = {
	name: "Tom&Tim",
	age: 23
};
// строка с параметрами для отправки
var body = "name=" + user.name + "&age="+user.age;

В этом случае при получении параметров скрипт на стороне сервера может неправильно обработать данные и неправильно извлечь параметры. Поэтому, чтобы кодировать все передаваемые данные, нужно применять функцию encodeURIComponent():

var body = "name=" + encodeURIComponent(user.name) + "&age="+encodeURIComponent(user.age);

При этом строка "Tom&Tim" будет кодирована в следующую строку: "Tom%26Tim".

При необходимости мы можем выполнить обратное декодирование с помощью функции decodeURIComponent():

var encodeName = encodeURIComponent(user.name); // Tom%26Tim
var decodeName = decodeURIComponent(encodeName); // Tom&Tim

POST-запросы

Отправка данных в POST-запросах будет немного отличаться:

var user = {
	name: "Tom",
	age: 23
};

var request = new XMLHttpRequest();
function reqReadyStateChange() {
	if (request.readyState == 4 && request.status == 200)
        document.getElementById("output").innerHTML=request.responseText;
}
var body = "name=" + user.name + "&age="+user.age;
request.open("POST", "http://localhost:8080/postdata.php");
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = reqReadyStateChange;
request.send(body);

Для отправки данных методом POST надо установить заголовок Content-Type с помощью метода setRequestHeader(). В данном случае заголовок имеет значение application/x-www-form-urlencoded.

Отправка форм. FormData

Начиная со спецификации XMLHttpRequest2 в JavaScript появился новый объект - FormData, который позволяет сериализовать данные формы для ее последующей отправки. При этом нам даже необязательно создавать форму в коде html, мы можем создать ее динамически в JavaScript:

var formData = new FormData();
formData.append('name', 'Tom');
formData.append('age', 23);

var request = new XMLHttpRequest();
function reqReadyStateChange() {
	if (request.readyState == 4 && request.status == 200)
        document.getElementById("output").innerHTML=request.responseText;
}

request.open("POST", "http://localhost:8080/display.php");
request.onreadystatechange = reqReadyStateChange;
request.send(formData);

Для добавления данных у объекта FormData используется метод append('имя_параметра', значение). При этом никакие заголовки указывать не надо.

Также мы можем определить форму в html и использовать ее для отправки:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<div id="output"></div>
<form name="user" action="http://localhost:8080/postdata.php">
<input type="text" name="username" placeholder="Введите имя" /><br/>
<input type="text" name="age" placeholder="Введите возраст" /><br/>
<input type="submit" name="submit" value="Отправить" />
</form>
<script>
// получаем объект формы
var form = document.forms.user;
// прикрепляем обработчик кнопки
form.submit.addEventListener("click", sendRequest);

// обработчик нажатия
function sendRequest(event){
	
	event.preventDefault();
	var formData = new FormData(form);

	var request = new XMLHttpRequest();

	request.open("POST", form.action);
	
	request.onreadystatechange = function () {
		if (request.readyState == 4 && request.status == 200)
			document.getElementById("output").innerHTML=request.responseText;
	}
	request.send(formData);
}
</script>
</body>
</html>

Для сериализации всех полей формы нам достаточно передать объект формы в конструктор FormData: var formData = new FormData(form);

Отправка данных в формате json

Для отправки данных в формате json нам необходимо установить соответствующий заголовок и сериализовать данные с помощью метода JSON.stringify:

// объект для отправки
var user = {
	username: "Tom",
	age: 23
};
var json = JSON.stringify(user);
var request = new XMLHttpRequest();
request.open("POST", "http://localhost:8080/postjson.php");
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.onreadystatechange = function () {
		if (request.readyState == 4 && request.status == 200)
			document.getElementById("output").innerHTML=request.responseText;
}
request.send(json);
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850