Руководство по ванильному Ajax без jQuery

 // app.js function render(path, contentType, fn) { fs.readFile(__dirname + '/' + path, 'utf-8', function (err, str) { fn(err, str, contentType); }); } var httpHandler = function (err, str, contentType) { if (err) { res.writeHead(500, {'Content-Type': 'text/plain'}); res.end('An error has occured: ' + err.message); } else { res.writeHead(200, {'Content-Type': contentType}); res.end(str); } }; 

Функция render асинхронно читает содержимое запрошенного файла. httpHandler ссылка на функцию httpHandler , которая затем выполняется как обратный вызов. Функция httpHandler проверяет наличие объекта ошибки (который будет присутствовать, например, если запрошенный файл не может быть открыт). При условии, что все хорошо, он затем передает содержимое файла с соответствующим кодом состояния HTTP и типом содержимого.

Тестирование API

Как и в любом другом звуковом API, давайте напишем несколько модульных тестов, чтобы убедиться, что он работает. Для этих тестов я обращаюсь к supertest и mocha за помощью:

 // test/app.request.js it('responds with html', function (done) { request(app) .get('/') .expect('Content-Type', /html/) .expect(200, done); }); it('responds with javascript', function (done) { request(app) .get('/scripts/index.js') .expect('Content-Type', /javascript/) .expect(200, done); }); it('responds with json', function (done) { request(app) .get('/') .set('X-Requested-With', 'XMLHttpRequest') .expect('Content-Type', /json/) .expect(200, done); }); 

Это гарантирует, что наше приложение отвечает правильным типом контента и кодом состояния HTTP на различные запросы. После того, как вы установили зависимости, вы можете запустить эти тесты из команды, используя npm test .

Интерфейс

Теперь давайте посмотрим на пользовательский интерфейс, который мы создаем в HTML:

 // views/index.html <h1>Vanilla Ajax without jQuery</h1> <button id="retrieve" data-url="/">Retrieve</button> <p id="results"></p> 

HTML выглядит красиво и аккуратно. Как видите, все волнение происходит в JavaScript.

onreadystate против onload

Если вы onreadystate какую-нибудь каноническую книгу по Ajax, вы можете найти onreadystate любом месте. Эта функция обратного вызова поставляется в комплекте с вложенными if и множеством пухов, которые затрудняют запоминание на макушке. Давайте onreadystate события onreadystate и onload на onreadystate .

 (function () { var retrieve = document.getElementById('retrieve'), results = document.getElementById('results'), toReadyStateDescription = function (state) { switch (state) { case 0: return 'UNSENT'; case 1: return 'OPENED'; case 2: return 'HEADERS_RECEIVED'; case 3: return 'LOADING'; case 4: return 'DONE'; default: return ''; } }; retrieve.addEventListener('click', function (e) { var oReq = new XMLHttpRequest(); oReq.onload = function () { console.log('Inside the onload event'); }; oReq.onreadystatechange = function () { console.log('Inside the onreadystatechange event with readyState: ' + toReadyStateDescription(oReq.readyState)); }; oReq.open('GET', e.target.dataset.url, true); oReq.send(); }); }()); 

Это вывод в консоли:

Событие onreadystate происходит повсюду. Он срабатывает в начале каждого запроса, в конце, а иногда просто потому, что ему действительно нравится, когда его увольняют. Но в соответствии со спецификацией событие onload срабатывает только при onload выполнении запроса. Таким образом, событие onload — это современный API, который можно эффективно использовать за считанные секунды. Событие onreadystate должно быть обратно совместимым. Но событие onload должно быть вашим выбором. onload похоже на success обратный вызов в jQuery, не так ли?

Пришло время отложить 5-фунтовые гантели в сторону и перейти к рукам.

Установка заголовков запроса

jQuery устанавливает заголовки запросов под крышками, чтобы ваша внутренняя технология знала, что это Ajax-запрос. Как правило, бэкэнд не заботится о том, откуда поступает GET-запрос, если он отправляет правильный ответ. Это удобно, когда вы хотите поддерживать Ajax и HTML с одним и тем же веб-API. Итак, давайте посмотрим, как установить заголовки запроса в ванильном Ajax:

 var oReq = new XMLHttpRequest(); oReq.open('GET', e.target.dataset.url, true); oReq.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); oReq.send(); 

С этим мы можем сделать проверку в Node.js:

 if (req.headers['x-requested-with'] === 'XMLHttpRequest') { res.writeHead(200, {'Content-Type': 'application/json'}); res.end(JSON.stringify({message: 'Hello World!'})); } 

Как видите, vanilla Ajax — это гибкий и современный интерфейсный API. Существует множество идей, для которых вы можете использовать заголовки запросов, и одна из них — управление версиями. Например, допустим, я хочу поддерживать более одной версии этого веб-API. Это полезно, когда я не хочу ломать URL-адреса и вместо этого предоставляю механизм, в котором клиенты могут выбирать версию, которую они хотят. Мы можем установить заголовок запроса так:

 oReq.setRequestHeader('x-vanillaAjaxWithoutjQuery-version', '1.0'); 

 if (req.headers['x-requested-with'] === 'XMLHttpRequest' && req.headers['x-vanillaajaxwithoutjquery-version'] === '1.0') { // Send Ajax response } 

 var oReq = new XMLHttpRequest(); oReq.onload = function (e) { results.innerHTML = e.target.response.message; }; oReq.open('GET', e.target.dataset.url, true); oReq.responseType = 'json'; oReq.send(); 

 oReq.onload = function (e) { var xhr = e.target; if (xhr.responseType === 'json') { results.innerHTML = xhr.response.message; } else { results.innerHTML = JSON.parse(xhr.responseText).message; } }; 

 var bustCache = '?' + new Date().getTime(); oReq.open('GET', e.target.dataset.url + bustCache, true); 

 var oReq = new XMLHttpRequest(); oReq.onload = function (e) { results.innerHTML = e.target.response.message; }; oReq.open('GET', e.target.dataset.url + '?' + new Date().getTime(), true); oReq.responseType = 'json'; oReq.send();