Как создать запрос AJAX с помощью 

Фреймворки 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, чтобы получить больше ежедневных статей и руководств по веб-разработке.