Ajax на чистом JavaScript

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Ajax на чистом JavaScript

Сообщение Slash » Пн июн 20, 2016 2:26 pm

Доброго времени суток Друзья!
На форуме есть инструкция, как выполнить Ajax запрос при помощи библиотеки jQuery (Динамическое обновление контента (без перезагрузки страницы AJAX jQuery)), в этой теме я покажу, как выполнить Ajax запрос на чистом JavaScript, то есть без подключения, каких то библиотек.

Я написал небольшую функцию, которую так и назвал - ajax. Вот, как она выглядит:

Код: Выделить всё

function ajax(value) {
    var inquiry = new XMLHttpRequest();
    inquiry.open(value.method, value.url, true);
    inquiry.send();
    inquiry.onreadystatechange = function() {
        if (this.readyState != 4) {
            return;
        };

        if (this.status != 200) {
            return;
        };
        
        document
.getElementById(value.result).innerHTML = this.responseText;
    };
}; 

Как видите тут не много кода, но и работает функция только с GET методом, но это только пока, скоро мы её улучшим.

Как использовать данную функцию:
Надо заполнить все параметры функции и всё. Вот как это делается:

Код: Выделить всё

ajax({
    method: 'GET',             // Метод
    url: 'ajax.php?a=11&b=22', // Адрес, куда посылать запрос
    result: 'result'           // ID тега, куда выводить результат
});

На этом пока всё. Следите за темой, скоро продолжим.
Спасибо за внимание.
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Ajax на чистом JavaScript

Сообщение Slash » Пн июн 20, 2016 9:34 pm

Немного допилил функцию, вот, что получилось:

Код: Выделить всё

function ajax(value) {
    var gear    = '';
    var method  = (value.method == 'POST' ? 'POST' : 'GET');
    var subject = (value.subject != '' ? value.subject : '');
    var inquiry = new XMLHttpRequest();
    inquiry.open(method, value.url, true);
    inquiry.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    if (method == 'POST') {
        for (var i = 0; subject.length > i; i++) {
            gear += (!= 0 ? '&' : '') + subject[i].split(':')[0] + '=' + encodeURIComponent(subject[i].split(':')[1]);
        };
    };

    inquiry.send(gear);
    inquiry.onreadystatechange = function() {
        if (this.readyState != 4) {
            return;
        };

        if (this.status != 200) {
            return;
        };
        
        document
.getElementById(value.result).innerHTML = this.responseText;
    };
}; 

Основная доработка это добавил метод POST. Теперь можно отправлять, как GET запросы, так и POST. Если используете метод GET, то его можно не указывать, он установлен по умолчанию. Пример GET запроса:

Код: Выделить всё

ajax({
    url: 'ajax.php?a=11&b=22', // Адрес, куда посылать запрос (URL с параметрами)
    result: 'result'           // ID тега, куда выводить результат
});

С POST методом необходимо указать передаваемые параметры массивом:

Код: Выделить всё

ajax({
    method: 'POST',                   // Метод
    url: 'ajax.php',                  // Адрес, куда посылать запрос
    subject: ['name:Иван', 'age:21'], // Передаваемые параметры (в массиве) 
    result: 'result'                  // ID тега, куда выводить результат
}); 

Элементы массива передаваемых параметров, необходимо писать с двоеточием, оно разделяет название переменной от ее значения.
Синтаксис: имя_переменной:значение.
Элемент массива: name:Иван, примет переменная $_POST['name'] и ее значение будет Иван.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Ajax на чистом JavaScript

Сообщение Slash » Вт июн 21, 2016 6:58 am

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

Код: Выделить всё

        document.getElementById(value.result).innerHTML = this.responseText

Меняем на:

Код: Выделить всё

        if (value.processing != '') {
            value.processing(this.responseText);
        }; 

В коде вызове функции, меняем:

Код: Выделить всё

    result: 'result'

На:

Код: Выделить всё

    processing: function(data) {
        // Тут код, что необходимо делать с полученным результатом
        // В данном примере полученный результат будет в переменной "data"
    }

Пример использования:

Код: Выделить всё

ajax({
    method: 'POST',
    url: 'ajax.php',
    subject: ['a:' + a, 'b:' + b],
    processing: function(data) {
        alert(data);
    }
});

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость