Как улучшить код для работы с ajax без jquery? Хочу полностью уйти от jquery, однако нельзя не признать, что с ней удобно работать с ajax. Написал следующий сниппет:"use strict"; let $_ajax = (function(){ class Ajax { constructor() { this.XHR = new XMLHttpRequest(); } _send(params) { if(params.sync === undefined) params.sync = true; let x = this.XHR; x.open(params.method, params.url, params.sync); x.onreadystatechange = function() { if (x.readyState == 4) params.callback(x.responseText) }; if (params.method == 'POST') x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); if(params.prepare) this.prepare(params.prepare); if(params.progress) this.progress(params.progress); x.send(params.data); } prepare(callback) { //метод, который вызывается перед отправкой запроса, если указан params.prepare callback(); } progress(callback) { //метод-обертка для события onprogress; вызывается если указан параметр params.progress this.XHR.onprogress = function(e) { callback(e) } } /* в следующие методы будем передавать единственный аргумент вида: params = { url: string, - адрес, по которому идет запрос data: object, - объек, содержащий данные callback: function, - функция обратного вызова sync: bulean, - параметр, определяющий ассинхронность prepare: function, - функция перед отправкой запроса progress: function - функция индикатор прогресса } */ get(params) { let query = []; for (let key in params.data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(params.data[key])); } this._send({ url: params.url + (query.length ? '?' + query.join('&') : ''), callback: params.callback, method: 'GET', data: null, sync: params.sync, prepare: params.prepare, progress: params.progress }); }; post(params) { let query = []; for (let key in params.data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(params.data[key])); }
this._send({ url: params.url, callback: params.callback, method: 'POST', data: query.join('&'), sync: params.sync, prepare: params.prepare, progress: params.progress }); }; } return new Ajax(); })(); и потом вызываем так:$_ajax.post({ url: 'res.php', data: data, callback: function(response) { // код функции }, prepare: function() { // код функции }, progress: function(e) { // код функции } }); Как видите, всё оформлено в новомодном es6. Посоветуйте, что изменить/доработать/убрать/оптимизировать? p.s. методы readystatechange и load взаимозаменяемы или нет? Второй как я понял является более современным вариантом для XHR2
В вашем коде уже присутствуют методы для работы с GET и POST запросами, однако можно добавить поддержку других типов запросов, таких как PUT, DELETE и т. д.
Предлагаю добавить обработку ошибок в запросах, чтобы было возможно обрабатывать случаи, когда сервер возвращает ошибку.
Можно добавить возможность передавать заголовки запроса в аргументах методов GET и POST.
Вы можете оптимизировать код, например, вынести общую функциональность из методов GET и POST в отдельную функцию для повторного использования.
Относительно вашего вопроса о readystatechange и load: событие load будет запускаться только в случае успешного завершения запроса, в то время как событие readystatechange будет запускаться на различных этапах выполнения запроса (0 – запрос не инициализирован, 1- инициализирован, 2- отправлен, 3- в процессе обработки запроса, 4- запрос завершен). В зависимости от вашей логики, вам нужно выбрать, какое событие лучше использовать.
В вашем коде уже присутствуют методы для работы с GET и POST запросами, однако можно добавить поддержку других типов запросов, таких как PUT, DELETE и т. д.
Предлагаю добавить обработку ошибок в запросах, чтобы было возможно обрабатывать случаи, когда сервер возвращает ошибку.
Можно добавить возможность передавать заголовки запроса в аргументах методов GET и POST.
Вы можете оптимизировать код, например, вынести общую функциональность из методов GET и POST в отдельную функцию для повторного использования.
Относительно вашего вопроса о readystatechange и load: событие load будет запускаться только в случае успешного завершения запроса, в то время как событие readystatechange будет запускаться на различных этапах выполнения запроса (0 – запрос не инициализирован, 1- инициализирован, 2- отправлен, 3- в процессе обработки запроса, 4- запрос завершен). В зависимости от вашей логики, вам нужно выбрать, какое событие лучше использовать.