Russian (Pусский) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)
Фреймворки Javascript превращают простые AJAX функции в однострочные. Это невероятно, учитывая тот факт, что потребуется более двадцати строк, чтобы выполнить то же самое, используя чистый Javascript. Тем не менее важно узнать, что находится «под капотом».
Демо-ролик



Итоговый код
Это относительно простой скрипт, который позволит вам асинхронно запросить страницы, используя функцию "load(URL, CALLBACK)" .
// Our simplified "load" function accepts a URL and CALLBACK parameter. load('test.txt', function(xhr) { document.getElementById('container').innerHTML = xhr.responseText; }); function load(url, callback) { var xhr; if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest(); else { var versions = ["MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.2.0", "Microsoft.XmlHttp"] for(var i = 0, len = versions.length; i < len; i++) { try { xhr = new ActiveXObject(versions[i]); break; } catch(e){} } // end for } xhr.onreadystatechange = ensureReadiness; function ensureReadiness() { if(xhr.readyState < 4) { return; } if(xhr.status !== 200) { return; } // all is well if(xhr.readyState === 4) { callback(xhr); } } xhr.open('GET', url, true); xhr.send(''); } // or with jQuery... $('#container').load('test.txt');



Несколько примечаний для размышления, пока вы смотрите.
onreadystatechange сработает пять раз, когда указанная страница запрашивается.
- 0: uninitialized
- 1: loading
- 2: loaded
- 3: interactive
- 4: complete
Значение «4» является тем, что мы ищем. Когда это будет достигнуто, мы узнаем, что сможем свободно выполнить действие с полученными данными.
XMLHttpRequest и ActiveXObject
Современные браузеры используют объект «XMLHttpRequest» для выполнения асинхронных запросов. Это значит, что если вы захотите проигнорировать IE6, вы можете удалить проверку ActiveXObject в этом разделе.
if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest(); else { var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"]; for(var i = 0, len = versions.length; i < len; i++) { try { xhr = new ActiveXObject(versions[i]); break; } catch(e){} } // end for }
Вместо этого, можно просто написать "var xhr = new XMLHttpRequest();". Будьте осторожны, используя этот метод. Единожды выделив его в отдельную функцию "load", легко оставить проверку IE, так, как есть.
Уходим из глобального пространства
Если вы отправляете множественные запросы, то вы можете переместить ваш код в отдельный объект. Затем вместо прямого вызова функции "load", вы можете использовать "myObject.load();". Основная рекомендация для выполнения этой задачи будет:
var ajax = { load : function() { // paste here }, otherMethod : someFunction() { // paste here } } ajax.load();
Заключение
Я не сомневаюсь, что некоторые из вас оставят комментарий,примерно следующего содержания, "Почему я должен это делать, когда это может быть выполнено с помощью всего одной строки на jQuery?" Ответ заключается в том, что вам нужно узнать, что находится под капотом вашего автомобиля, так сказать. Фреймворки такие как Mootools и jQuery делают Javascript невероятно понятными для дизайнеров. Если вы относитесь к этой категории, я настоятельно рекомендую, подобрать книгу о чистом Javascript . На мой взгляд, нет ничего плохого в изучении двух техник одновременно. Будьте уверены, что вы изучите обе!
Это напоминает работу с WordPress, если вы не знаете PHP. Конечно, это возможно - но вы действительно этого хотите?
Надеюсь, это заставит вас встать и пойти вперед! Мне бы очень хотелось услышать ваши мысли! Хороших выходных. Увидимся на понедельник или в Twitter!
- Подписывайтесь на RSS-канал NETTUTS, чтобы получить больше ежедневных статей и руководств по веб-разработке.