Как получить ответ xmlhttprequest?

jQuery – Получения данных формы с помощью метода each

Работу по извлечению данных c элементов формы посредством метода рассмотрим на примере.

// создадим пустой объект
var $data = {};
// переберём все элементы input, textarea и select формы с id="myForm "
$('#myForm').find ('input, textearea, select').each(function() {
  // добавим новое свойство к объекту $data
  // имя свойства – значение атрибута name элемента
  // значение свойства – значение свойство value элемента
  $data = $(this).val();
});

В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода и добавления в созданный объект данных соответствующих значениям определённых атрибутов ( и ) элементов.

При необходимости, после получения данных формы можно добавить различные проверки. Это предотвратит отправку не валидных данных на сервер.

Для отправки данных на сервер (например, по технологии AJAX) можно использовать метод jQuery .

// AJAX-запрос, который будет отправлен на сервер:
//   по адресу: process.php
//   методом POST
//   содержащий данные $data 
// success - это функция, которая будет вызвана после получения ответа от сервера
//   (сам ответ доступен посредством аргумента result)
$.ajax({
  url: 'process.php',
  type: 'post',
  data: $data,
  success: function(result) {
    // действия при получения ответа (result) от сервера
  }
});

Как отправить почту по SMTP через Gmail в PHPMailer

По умолчанию в Google аккаунте отключена возможность отправлять почту по SMTP через Gmail в PHPMailer. Чтобы её включить необходимо предоставить доступ к аккаунту для приложения.

Но для того, чтобы определиться что нужно настроить, сначала необходимо узнать текущее состояние двухэтапной аутентификации.

Для этого необходимо перейти в Google аккаунт и открыть раздел «Безопасность». В группе «Вход в аккаунт Google» найти настройку «Двухэтапная аутентификация» и посмотреть её статус.

Что делать при выключенной двухэтапной аутентификации Google

Если настройка «Двухэтапная аутентификация» выключена, то перейти к группе «Ненадежные приложения, у которых есть доступ к аккаунту» и нажать на «Открыть доступ (не рекомендуется)». После этого на открывшейся странице перевести переключатель «Небезопасные приложения заблокированы» в состояние включено. На этом действия по настройке Google аккаунта завершены.

Что делать при включённой двухэтапной аутентификации Google

Когда настройка «Двухэтапная аутентификация» включена необходимо выполнить другие действия, а именно создать пароль для приложения. Потому что использовать пароль, который вы используете для обычного входа на почту, для SMTP аутентификации в соответствии с безопасностью Google в этом случае нельзя.

Чтобы создать пароль приложению нужно перейти в Google аккаунт, а затем в раздел «Безопасность». Далее на этой странице найти группу настроек «Вход в аккаунт Google» и кликнуть на ссылку «Пароли приложений». На открывшейся странице из раскрывающегося списка «Приложение» необходимо выбрать «Другое (введите название)» и написать, например, имя своего сайта, а затем нажать на кнопку «Создать». Созданный пароль необходимо скопировать, он нам нужен будет при настройке отправки почты через PHPMailer.

Настройка process.php для отправки через Gmail

В process.php для отправки почты через Gmail нужно выставить следующие настройки:

При включенной двухэтапной аутентификации Google в нужно установить пароль, созданный для приложения, а при выключенной — пароль от аккаунта.

Интересные статьи, связанные с созданием форм обратных связей:

Строение формы обратной связи

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

Данная форма работает через AJAX. Любую форму обратной связи, работающую с использованием данной технологии, можно представить в виде схемы:

Из схемы видно, что форма обратной связи состоит из 2 основных частей: клиентской и серверной.

Клиентская часть данной формы представлена посредством следующих файлов:

• — веб-страница, содержащая html5 форму обратной связи;
• — JavaScript сценарий, выполняющий всю логику по обработке формы на стороне клиента;
• — библиотека jQuery, необходимая для работы скриптов файла .

По умолчанию HTML форма, представленная в проекте, состоит из:

• текстового поля для ввода имени;
• текстового поля для ввода email-адреса;
• textarea поля для ввода текста сообщения;
• элемента с (для добавления файлов);
• капчи (для защита от спама);
• чекбокса, посредством которого пользователь соглашается с условиями по обработке представленной им в форме информации;
• кнопки, посредством которой пользователь осуществляет отправку данных формы на сервер.

Указанный набор полей формы приведён в качестве примера. В зависимости от задачи вы можете добавить в форму обратной связи другие новые элементы, а также удалить имеющиеся.

Код JavaScript, находящийся в файле «process-forms.js» содержит всю логику, необходимую для обработки формы на стороне клиента.

Он выполняет:

• проверку (валидацию) данных формы перед отправкой их на сервер; не корректные данные обводятся в красную рамку и снабжаются подсказкой; выполнение проверки текстовых полей осуществляется с использованием HTML5 функции checkValidity;
• загрузку и отображение файлов, которые будут отправлены на сервер; изображения отображаются с превью (на основе объекта FileReader); организовано это с использованием элемента input с type=»file» и установленого атрибута multiple;
• обновление кода капчи и получения нового изображения на котором он написан;
• отправку данных на сервер посредством метода POST без перезагрузки страницы;
• обработку ответа от сервера и отображение его пользователю.

Сбор данных с формы, подлежащих отправки на сервер выполняется в этом проекте с помощью FormData.

Серверная часть формы обратной связи состоит из:

• captcha.php (скрипта для генерации капчи);
• oswald.ttf (шрифта, посредством которого код капчи пишется на изображении);
• background.png (изображения (фона), на которое накладывается текст капчи);
• process.php (скрипта, выполняющего обработку данных формы на сервере; при их успешной проверке осуществляет отправку этих данных на email; результат своего выполнения возвращает в формате JSON);
• файлов, находящихся в каталоге PHPMailer (php библиотеки, позволяющей более просто и безопасно отправлять электронные письма).

PHP скрипт process.php выполняет следующие функции:

• проверяет метод запроса, а также как он послан (с помощью AJAX или нет);
• выполняет очистку (фильтрацию) данных (для защиты от XSS);
• выполняет проверку (валидацию) полей формы;
• проверяет правильность введённого пользователем кода капчи;
• проверяет, соответствуют ли полученные файлы установленным характеристикам;
• перемещает файлы, отправленные пользователем, под уникальными именами в заданную директорию на сервере;
• в случае успешного выполнения всех вышеприведённых действий отправляет письмо (email) с вложениями по указанному адресу. Кроме отправки письма он также сохраняет данные формы в текстовый файл;
• отправляет клиенту (браузеру пользователя) результат (ответ) в формате JSON, содержащий сведения об успехе или возникшие при обработке формы ошибки.

Файлы формы обратной связи имеют кодировку UTF-8 без BOM. Для проверки работоспособности формы в Денвере необходимо в корне сайта создать файл и добавить в него строчку: .

jQuery — Сериализация формы

В jQuery для получения всех полей формы , и можно использовать следующие методы:

• serialize() — предназначен для сериализации данных формы в строку запроса.

  имяПоля1=значение1&имяПоля2=значение2...

• serializeArray() — выполняет кодирование элементов формы в массив, состоящий из имен и значений.

Методы jQuery и оличаются друг от друга только форматом вывода данных. Метод обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.

Например, рассмотрим, как можно перебрать массив, который вернул метод , с помощью функции :

// создание массива объектов из данных формы
var data = $('#myForm').serializeArray();
// переберём каждое значение массива и выведем его в формате имяЭлемента=значение в консоль
$.each(data,function(){
  console.log(this.name+'='+this.value);
});

Если же вы собираете данные для того чтобы их передать в метод библиотеки jQuery ajax, то в этом случае неважно, какой из этих методов использовать. Т.к

данный метод может принимать данные, закодированные как с помощью метода , так и посредством .

Для того чтобы элемент был сериализован методом или , он должен отвечать критериям «successful controls», указанным в спецификации HTML. Первое условие «successful controls» – это наличие у элемента атрибута . Второе, если форма отправлена не с помощью кнопки , то она (имя и значение кнопки) не будет добавлена в возвращаемую методом строку или массив. Третье, значения из элементов checkboxes и radio кнопок ( с type «radio» или «checkbox») будут включены в набор только в том случае, если они установлены (отмечены). Четвёртое, элементы, которые отключены, обработаны не будут. Т.е. для того чтобы элемент был сериализован, он должен иметь в качестве значение свойства (другими словами, у элемента обязан отсутствовать атрибут ).

Внимание: Методы и не сериализуют данные из элементов, которые используются для выбора файлов. Разберём пример, в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода или

Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery. Ответ, который прийдёт с сервера вставим в элемент с идентиикатором

Разберём пример, в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода или . Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery . Ответ, который прийдёт с сервера вставим в элемент с идентиикатором .

<!-- Элемент для вывода результата -->
<div id="form_result"></div>
<hr>
<!-- HTML-форма -->
<form id="orderCallBack" action="process.php">
  Ваше имя: <input type="text" name="name" value=""><br>
  Ваш телефон: <input type="text" name="phone" value=""><br>
  Ваше сообщение:<br> <textarea name="message"></textarea><br>
  <input type="submit" name="submit1" value="Заказать звонок" data-method="serialize"><br>
  <input type="submit" name="submit2" value="Заказать звонок" data-method="serializeArray">
</form>
<!-- Сценарий для обработки формы -->
<script>
$(function() {
  // при нажатию на кнопку с типом submit
  $('#orderCallBack input').click(function(e) {
    // отменяем стандартное поведение браузера
    e.preventDefault();
    // переменная, которая будет содержать данные серилизации
    var $data;
    // в зависимости от того какую нажали кнопку, выполняем
    // серилизацию тем или иным способом
    if ($(this).attr('data-method') == 'serialize') {
      $data = $(this).parent('form').serialize();
    } else {
      $data = $(this).parent('form').serializeArray();
    }
    // для отправки данных будем использовать технологию ajax
    //   url - адрес скрипта, с помощью которого будем обрабатывать форму на сервере
    //   type - метод отправки запроса (POST)
    //   data - данные, которые необходимо передать серверу
    //   success - функция, которая будет вызвана, когда ответ прийдёт с сервера
    $.ajax({
      url: $(this).parent('form').attr('action'),
      type: 'post',
      data: $data,
      success: function(result) {
        $('#form_result').html(result);
      }
    })
  });
});
</script>

PHP код, обрабатывающий ajax запрос на сервере:

<?php
// переменная для сохранения результата
$data='';
// переберём массив $_POST
foreach ($_POST as $key => $value) {
  // добавим в переменную $data имя и значение ключа
  $data .= $key . ' = ' . $value . '';
}
// выведим результат
echo $data;
?>

Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).

Dealing with binary data

If you use a (en-US) object with a form that includes widgets, the data will be processed automatically. But to send binary data by hand, there’s extra work to do.

There are many sources for binary data, including , , and WebRTC. Unfortunately, some legacy browsers can’t access binary data or require complicated workarounds. To learn more about the API, see Using files from web applications.

The least complicated way of sending binary data is by using (en-US)’s method, demonstrated above. If you have to do it by hand, it’s trickier.

In the following example, we use the API to access binary data and then build the multi-part form data request by hand:

As you see, the HTML is a standard . There’s nothing magical going on. The «magic» is in the JavaScript:

Here’s the live result:

Функция «post в JavaScript»

Создадим функцию post :

function post() {}

Получаем данные из полей ввода :

var a = ida .value; // Считываем значение a

var b = idb .value; // Считываем значение b

В переменную «data» помещаем, конструкцию похожую на массив(но не массив) ключ = значение.

var data = «a=» + encodeURIComponent(a) + «&b=» + encodeURIComponent(b);

Создаём объект xhr:

var xhr = new XMLHttpRequest();

Открываем асинхронное соединение :

xhr.open(«POST», «https://dwweb.ru/путь до файла/examople_post_js.php» , true);

Отправляем кодировку :

xhr.setRequestHeader(«Content-Type», «application/x-www-form-urlencoded»);

Отправляем POST-запрос :

xhr.send(data);

Далее, не буду каждую строчку расписывать смотрим комментарии:

xhr.onreadystatechange = function() // Ждём ответа от сервера
{
  if (xhr.readyState == 4) // возвращает текущее состояние объекта(0-4)
  {
    if(xhr.status == 200) // код 200 (если страница не найдена вернет 404)
    {
      summa.innerHTML = xhr.responseText; // Выводим ответ сервера
    }
  }
}

CORS для простых запросов

При запросе на другой источник браузер всегда ставит «от себя» заголовок .

Например, если мы запрашиваем со страницы , заголовки будут такими:

Как вы можете видеть, заголовок содержит именно источник (домен/протокол/порт), без пути.

Сервер может проверить и, если он согласен принять такой запрос, добавить особый заголовок к ответу. Этот заголовок должен содержать разрешённый источник (в нашем случае ) или звёздочку . Тогда ответ успешен, в противном случае возникает ошибка.

Здесь браузер играет роль доверенного посредника:

1. Он гарантирует, что к запросу на другой источник добавляется правильный заголовок .
2. Он проверяет наличие разрешающего заголовка в ответе и, если всё хорошо, то JavaScript получает доступ к ответу сервера, в противном случае – доступ запрещается с ошибкой.

Вот пример ответа сервера, который разрешает доступ:

Демо: загрузка файла с индикатором прогресса

Современный позволяет отправить на сервер всё, что угодно. Текст, файл, форму.

Мы, для примера, рассмотрим загрузку файла с индикацией прогресса. Это требует от браузера поддержки File API, то есть исключает IE9-.

File API позволяет получить доступ к содержимому файла, который перенесён в браузер при помощи Drag’n’Drop или выбран в поле формы, и отправить его при помощи .

Форма для выбора файла с обработчиком :

Мы получаем файл из формы через свойство элемента и передаём его в функцию :

Этот код отправит файл на сервер и будет сообщать о прогрессе при его отправке (), а также об окончании запроса (, ).

Полный пример индикации прогресса при загрузке, основанный на коде выше:

Результат
server.js
index.html

Извлечение данных

Загрузка файла в виде двоичного объекта с помощью XHR всегда была проблемой. С технической точки зрения это было даже невозможно. Один из известных способов заключается в переопределении mime-типа пользовательской кодировкой, как показано ниже.

Ранее содержимое картинки можно было извлечь таким способом:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);

// Hack to pass bytes through unprocessed.
xhr.overrideMimeType('text/plain; charset=utf-8');

xhr.onreadystatechange = function(e) {
  if (this.readyState == 4 && this.status == 200) {
    var binStr = this.responseText;
    for (var i = 0, len = binStr.length; i < len; ++i) {
      var c = binStr.charCodeAt(i);
      //String.fromCharCode(c & 0xff);
      var byte = c & 0xff;  // byte at offset i
    }
  }
};

xhr.send();

Этот способ работает, однако элемент вовсе не является большим двоичным объектом (элементом blob). Это двоичная строка, представляющая файл картинки. Мы заставляем сервер вернуть данные в необработанном виде. Хотя этот прием работает, я не рекомендую использовать его. При попытке принудительно перевести данные в нужный формат с помощью манипуляций с кодировкой и строками всегда возникают проблемы.

Указание формата ответа

В предыдущем примере картинка загружалась в виде двоичного файла путем переопределения mime-типа сервера и обработки текста как двоичной строки. Вместо этого воспользуемся новыми возможностями технологии : свойствами и , позволяющими указать браузеру желаемый формат ответа.

xhr.responseType

Прежде чем отправить запрос, необходимо задать для свойства значение text, arraybuffer, blob или document

Обратите внимание: если установить значение или опустить его, по умолчанию выбирается формат text.
xhr.response

После успешного выполнения запроса свойство response будет содержать запрошенные данные в формате , , или в соответствии со значением .. Переработаем предыдущий пример с использованием этой новой возможности

Теперь мы извлекаем данные картинки в формате вместо строки. Передаем буфер в API и получаем объект

Переработаем предыдущий пример с использованием этой новой возможности. Теперь мы извлекаем данные картинки в формате вместо строки. Передаем буфер в API и получаем объект .

BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  if (this.status == 200) {
    var bb = new BlobBuilder();
    bb.append(this.response); // Note: not xhr.responseText

    var blob = bb.getBlob('image/png');
    ...
  }
};

xhr.send();

Так намного лучше.

Ответы в формате ArrayBuffer

 – это стандартный контейнер фиксированной длины для двоичных данных. Это очень удобный универсальный буфер для необработанной информации, но его главное достоинство – возможность создавать «представления» исходных данных с помощью типизированных массивов JavaScript. Фактически на базе одного источника можно сформировать несколько представлений. Например, можно создать 8-битный целочисленный массив, который использует тот же объект , что и 32-битный массив на базе тех же данных. Исходная информация остается неизменной: она просто представляется в разном виде.

В примере ниже мы извлекаем ту же картинку в формате , но на этот раз создаем из данных в буфере 8-битный целочисленный массив.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  var uInt8Array = new Uint8Array(this.response); // this.response == uInt8Array.buffer
  // var byte3 = uInt8Array; // byte at offset 4
  ...
};

xhr.send();

Ответы в формате Blob

Для непосредственной работы с объектами без операций с отдельными байтами файла можно использовать значение .

window.URL = window.URL || window.webkitURL;  // Take care of vendor prefixes.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;

    var img = document.createElement('img');
    img.onload = function(e) {
      window.URL.revokeObjectURL(img.src); // Clean up after yourself.
    };
    img.src = window.URL.createObjectURL(blob);
    document.body.appendChild(img);
    ...
  }
};

xhr.send();

Объект можно использовать по разному: например, сохранить его в индексированной базе данных, записать в файловую систему HTML5 или , как показано в этом примере.

Элементы кода, которые будут использованы в примерах.

XMLHttpRequest, — это класс, для работы AJAX.

request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.

url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.

.open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.

.setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.

.send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.

onreadystatechange – это событие, которое случится, когда нам придет ответ от сервера.

readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения, которые он может дать:

Значение	Описание
Метод open() не вызван
1	Метод open() вызван
2	Получены заголовки ответа
3	Получено тело ответа
4	Передача ответа выполнена

status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.

.responseText – данные, которые придут от сервера в виде строки.

.response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.

.text() – используется в запросе fetch, возвращает строку.

.json() – используется в запросе fetch, возвращает json обращенный в объект.

Использование XMLHTTPRequest¶

Различают два использования XmlHttpRequest. Первое — самое простое, синхронное.

Синхронный XMLHttpRequest

В этом примере через XMLHTTPRequest, с сервера запрашивается страница , и текст ответа сервера показывается через .

Здесь сначала создается запрос, задается открытие () синхронного соединение с адресом и запрос отсылается с , т. е. без данных: .

При синхронном запросе браузер «подвисает» и ждет на строчке 3, пока сервер не ответит на запрос. Когда ответ получен — выполняется строка 4, код ответа сравнивается с 200 (ОК), и при помощи печатается текст ответа сервера. Все максимально просто.

Свойство получит такой же текст страницы, как браузер, если бы Вы в перешли на . Для сервера GET-запрос через XmlHttpRequest ничем не отличается от обычного перехода на страницу.

Асинхронный XMLHttpRequest

Этот пример делает то же самое, но асинхронно, т. е. браузер не ждет выполнения запроса для продолжения скрипта. Вместо этого к свойству подвешивается функция, которую запрос вызовет сам, когда получит ответ с сервера.

Асинхронность включается третьим параметром функции . В отличие от синхронного запроса, функция не останавливает выполнение скрипта, а просто отправляет запрос.

Запрос регулярно отчитывается о своем состоянии через вызов функции . Состояние под номером 4 означает конец выполнения, поэтому функция-обработчик при каждом вызове проверяет — не настало ли это состояние.

Вообще, список состояний такой:

• — Unitialized
• — Loading
• — Loaded
• — Interactive
• — Complete

Состояния 0-2 вообще не используются.

Вызов функции с состоянием в теории должен происходить каждый раз при получении очередной порции данных от сервера. Это могло бы быть удобным для обработки ответа по частям, но Internet Explorer не дает доступа к уже полученной части ответа.
Firefox дает такой доступ, но для обработки запроса по частям состояние все равно неудобно из-за сложностей обнаружения ошибок соединения. Поэтому тоже не используется.

На практике используется только последнее, .

Если хотите углубиться в тонкости багов браузеров c , отличными от , то многие из них рассмотрены в статье на Quirksmode (англ.).

Не используйте синхронные запросы

Синхронные запросы применяются только в крайнем случае, когда кровь из носу необходимо дождаться ответа сервера до продолжения скрипта. В 999 случаях из 1000 можно использовать асинхронные запросы. При этом общий алгоритм такой:

1. Делаем асинхронный запрос
2. Рисуем анимированную картинку или просто запись типа «Loading…»
3. В при достижении состояния 4 убираем и, в зависимости от вызываем обработку ответа или ошибки.

Кроме того, иногда полезно ставить ограничение на время запроса. Например, хочется генерировать ошибку, если запрос висит более 10 секунд.

Для этого сразу после через ставится вызов обработчика ошибки, который очищается при получении ответа и обрывает запрос с генерацией ошибки, если истекли 10 секунд.

Таймаут на синхронный запрос ставить нельзя, браузер может висеть долго-долго… А вот на асинхронный — пожалуйста.

Этот пример демонстрирует такой таймаут.

Использование FormData для отправки файлов на сервер

Рассмотрим ещё один пример, в котором объект FormData будем использовать для отправки файла на сервер.

HTML-код, состоящий из блока ( с ), элемента с типом и кнопки для отправки файла на сервер.

<div class="container">
  <!-- Блок, в который будем выводить путь к файлу на сервере -->
  <p class="alert alert-info">
    Результат:<br><span id="result"></span>
  </p>
  <div class="form-group">
    <!-- Элемент, для выбора файла  -->  
    <input type="file" id="file">
  </div>
    <!-- Элемент для отправки файла на сервер  -->    
  <button id="upload-image" class="btn btn-primary">Отправить</button>
</div>

Сценарий php, выполняющий загрузку файла в указанную директорию.

<?php
// переменная для хранения результата
$result = 'Файл не был успешно загружен на сервер';
// путь для загрузки файлов
$upload_path = dirname(__FILE__) . '/uploads/';
// если файл был успешно загружен, то
if ($_FILES == UPLOAD_ERR_OK) {
  // получаем расширение исходного файла
  $extension_file = mb_strtolower(pathinfo($_FILES, PATHINFO_EXTENSION));
  // получаем уникальное имя под которым будет сохранён файл 
  $full_unique_name = $upload_path . uniqid('file_', true).'.'.$extension_file;
  // перемещает файл из временного хранилища в указанную директорию
  if (move_uploaded_file($_FILES, $full_unique_name)) {
    // записываем в переменную $result ответ
    $result = 'Файл загружен и доступен по адресу: <b>/' . substr($full_unique_name, strlen($_SERVER)+1) . '</b>';
  } else {
    // записываем в переменную $result сообщение о том, что произошла ошибка
    $result = "Произошла обшибка при загрузке файла на сервер";
  }
}
// возвращаем результат (ответ сервера)
echo $result;
?>

JavaScript сценарий, который отправляет файл на сервер, получает от него ответ и выводит его на странице.

<script>
// после загрузки DOM модели
document.addEventListener('DOMContentLoaded', function() {
  // при нажатию на кнопку upload-image
  document.getElementById('upload-image').addEventListener('click', function() {
    // элемент, содержащий файл выбранный пользователем
    var file = document.getElementById('file');
    // элемент для вывода результата
    var result = document.getElementById('result');
    // если элемент содержит файл, то
    if (file.files.length) {
      // создаём объект formData
      var formData = new FormData();
      // добавляем в formData файл
      formData.append('file', file.files);
      // создаём объект XMLHttpRequest
      var request = new XMLHttpRequest();
      // инициализирум запрос
      request.open('POST', 'process.php');
      // при изменении состояния запроса        
      request.addEventListener('readystatechange', function() {
        // если запрос завершился и код ответа сервера OK (200), то
        if (this.readyState == 4 && this.status == 200) {
          // помещаем в элемент result результат ответа сервера
          result.innerHTML = this.responseText;
        }
      });
      // отправляем запрос
      request.send(formData);
    } else {
      result.innerHTML = "Не выбран файл для загрузки!";
    }
  });
});
</script>

JavaScript сценарий, переработанный с использованием методов бибилиотеки jQuery.

<script>
// после загрузки страницы
$(function() {
  // при нажатии на кнопку "Отправить"
  $('#upload-image').click(function() {
    // элемент, с помощью которого пользователь выбирает файл
    var file = $('#file');
    // элемент, в который выведим ответ сервера
    var result = $('#result');
    // если файл выбран, то
    if (file.prop('files').length) {
      // создаём объект FormData
      var formData = new FormData();
      // добавляем в объект FormData файл 
      formData.append('file', file.prop('files'));
      // выполняем HTTP (AJAX) запрос
      //   url - адрес, содержащий php скрипт, который будет обрабатывать запрос
      //   procedData - параметр, с помощью которого отключим преобразование данных в строку запроса
      //   contentType - параметр, с помощью которого отключим установления  типа контента jQuery
      //   type - параметр, с помощью которого установим в качестве метода отправки запроса POST
      //   success - параметр, который 
      $.ajax({
        url: 'process.php',
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data) {
          result.html(data);
        }
      });
    } else {
      result.html("Не выбран файл для загрузки!");
    }
  });
});
</script>

Функция post в JavaScript вместе с формой:

<script>

function post()

{

  var a = ida .value; // Считываем значение a

  var b = idb .value; // Считываем значение b

  var data = «a=» + encodeURIComponent(a) + «&b=» + encodeURIComponent(b);

  var xhr = new XMLHttpRequest();// Создаём объект xhr

  xhr.open(«POST», «https://dwweb.ru/путь/examople_post_js.php» , true);// Открываем асинхронное соединение

  xhr.setRequestHeader(«Content-Type», «application/x-www-form-urlencoded»);// Отправляем кодировку

  xhr.send(data); // Отправляем POST-запрос

  xhr.onreadystatechange = function() // Ждём ответа от сервера

  {

    if (xhr.readyState == 4) // возвращает текущее состояние объекта(0-4)

    {

      if(xhr.status == 200) // код 200 (если страница не найдена вернет 404)

      {

        summa.innerHTML = xhr.responseText; // Выводим ответ сервера

      }

    }

  }

}

</script>