Základní požadavek AJAX:XMLHttpRequest

Existuje řada běžných úloh front-endu, u kterých se mnozí z nás nikdy nedotkli hlubokých, špinavých rozhraní API, protože naše oblíbené rámce JavaScriptu poskytují jednodušší způsoby, jak s nimi pracovat. Proto jsem napsal Jak funguje delegování událostí JavaScriptu, Proveďte základní požadavek HTTP s Node.js a spoustu výukových programů o dalších příspěvcích rozhraní API na nízké úrovni. Další na řadě je XMLHttpRequest, API, pomocí kterého provádíme naše volání AJAX!

Načítání XHR objektu

Na rozdíl od většiny rozhraní API je získání základní komponenty ve skutečnosti trochu práce, protože Internet Explorer dříve vyžadoval komponentu ActiveX, aby fungoval AJAX:

var request;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  } 
  catch (e) {
    try {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {}
  }
}

Bleh; kód je ošklivý, ale to byste měli očekávat za oponou, že?

Podání požadavku

Provedení požadavku vyžaduje dvě volání funkce:

request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);

Otevřené volání definuje typ požadavku (get , post atd.) a metoda send provede požadavek. Dost jednoduché! Přidání vlastních záhlaví je také jednoduché:

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Požádat o zpětná volání

Samozřejmě zadávání požadavků je poněkud zbytečné, pokud nezpracováváte výsledek, a existují dva způsoby, jak nastavit zpětné volání:

// state changes
request.onreadystatechange = function() {
	if(request.readyState === 4) { // done
		if(request.status === 200) { // complete	
			console.log(request.responseText)
		}
	}
};

// addEventListener
function callbackFn(e) {
	// Handle each event
}
request.addEventListener("progress", callbackFn, false);
request.addEventListener("load", callbackFn, false);
request.addEventListener("error", callbackFn, false);
request.addEventListener("abort", callbackFn, false);

Vyberte metodu, kterou chcete, kromě addEventListener metoda je pravděpodobně elegantnější.

To je můj jednoduchý úvod do vytváření jednoduchých požadavků AJAX s nativním XMLHttpRequest API. Další informace o běžných testech AJAX, jako je odesílání dat z formulářů, najdete na webu Mozilla Developer Network!