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!