BX.ajax — функция для отправки аяксовых запросов

Функция возвращает ссылку на объект XMLHttpRequest, при помощи которого осуществляется запрос. В случае успеха запроса будет вызван обработчик onsuccess. В качестве параметра будет результат запроса.

Если параметр processData установлен в true, то обработка будет в зависимости от типа данных который указывается в параметре dataType, возможны следующие варианты:

• html результат будет очищен от js-кода. Код будет выполнен после передачи данных обработчику. Перед передачей будут выполнены все скрипты с атрибутом bxrunfirst, или все скрипты, если параметр scriptsRunFirst установлен в true
• script полученный результат будет передан обработчику и выполнен. Что раньше — определяется параметром scriptsRunFirst
• json результат будет интерпретирован как описание объекта в формате json, обработчик получит объект

Если подключена библиотека для работы с localStorage (core_ls), то помимо перечисленных параметров, можно использовать дополнительные параметры:

• lsId строковой идентификатор для передачи данных запроса между различными вкладками
• lsTimeout время жизни данных запроса
• lsForce false|true

Эти параметры предназначены для интерфейсов, постоянно опрашивающих сервер с целью получения каких-либо данных. В этом случае данные запроса будут сохраняться в localStorage, и если в любой вкладке текущего браузера будет сделан запрос с  тем же самым lsId, то вместо совершения запроса обработчик получит данные, сохраненные в localStorage. Соответственно, lsTimeout должен быть чуть меньше интервала отправки запросов. Параметр lsForce позволяет принудительно отправить запрос в обход проверки наличия данных в localStorage и обновить это данные.

Запрос

Пример рабочего скрипта, когда на клиенте делается запрос к файлу обработчику:

// когда DOM готов
BX.ready(function () {
    // ajax запрос
    BX.ajax({
        // файл на который идет запрос
        url: 'test.php',
        // метод запроса GET/POST
        method: 'POST',
        // параметры передаваемый запросом
        data: {
            NAME: 1
        },
        // ответ сервера лежит в data
        onsuccess: function(data) {
            console.log(data);
        },
        // выполнится в случае ошибки
        onfailure: function () {
            console.log("error");
        },
    })
}

Возможные значения для BX.ajax:

• url URL запроса
• data POST данные для отправки (строка или объект)
• method метод запроса GET|POST
• dataType тип загрузки данных html|json|script
• timeout время ожидания запроса в секундах. 0 для браузера значение по умолчанию
• async является ли запрос асинхронным или нет true|false
• processData любая обработка данных отключена, если значение false, выполняется только обратный вызов false|true
• scriptsRunFirst следует ли запускать все найденные скрипты перед вызовом onsuccess. тег script может иметь атрибут bxrunfirst, чтобы включить этот флаг только для него самого false|true
• emulateOnload нужно ли эмулировать событие BX.ajax.onload_403613 для загруженных скриптов true|false
• skipAuthCheck следует ли проверять сбой авторизации, должно быть установлено значение true для запросов CORS
• start немедленно отправить запрос, если значение равно false, запрос может быть запущен вручную с помощью возвращаемого объекта XMLHttpRequest
• cache в случае значения false к параметру URL будет добавляться случайный кусок, чтобы избежать браузерного кэширования true|false
• preparePost установлен ли Content-Type x-www-form-urlencoded в POST запросе true|false
• headers добавьте дополнительные заголовки, например: [{'name': 'If-Modified-Since', 'value': 'Wed, 15 Aug 2012 08:59:08 GMT'}, {'name': 'If-None-Match', 'value': '0'}]
• lsTimeout локальное хранилище данных TTL, бесполезно без lsId
• lsForce следует ли принудительно выполнять запрос вместо использования данных localStorage, бесполезно без lsId
• onsuccess функция-обработчик результата
• onfailure функция-обработчик ошибки

Отправка формы в библиотеке BX

Допустим на странице имеем некую простую формы, данные с которой нам надо отправить:

<form id="bx_custom_form">
    <input type="text" name="name" placeholder="Ваше имя" />
    <input type="text" name="phone" placeholder="Номер телефона" />
    <input type="file" name="file">
    <input type="submit" value="Отправить" />
</form>

Давайте напишем JS код с использованием библиотеки Bitrix JS. Данный с формы будем получить при помощи интерфейса FormData:

BX.ready(function () {
// получаем форму
let customForm = BX("bx_custom_form");
// вешаем обработчик событий на отправку формы
BX.bind(customForm, "submit", BX.proxy(sendForm, this));
// функция отправки
function sendForm(e) {
    BX.PreventDefault(e);
    // с формой работаем через объект FormData
    let data = new FormData(customForm);
    // ajax запрос
    BX.ajax({
    url: "/ajax/sendForm.php", 
    data: data,
    method: "POST",
    dataType: "json",
    processData: false,
    preparePost: false,
    // действия в случаи успеха
    onsuccess: function (data) {
        console.log(data);
    },
    // действия в случаи ошибки
    onfailure: function () {
        console.log("error");
    },
    });
}
});