HTML and CSS Reference
In-Depth Information
* OPENED - The open method has been called
* UNSENT - The XMLHttpRequest object has been instantiated
*
* You can create conditions for each readyState using a switch
* statement.
*/
xhr.onreadystatechange = function contentLoaded(){
/** Here you check the request state **/
if (this.readyState === this.DONE) {
/**
* Here you select the container element that will be
* populated with the new content.
*/
var container = document.querySelector("#container");
/**
* This will check the response status, 200 is OK.
* You can find the various HTTP status codes at
*/
if (this.status === 200) {
/**
* Here you create a DOMParser object that will
* parse the returned HTML so that is can be
* traversed.
*/
var domParser = new DOMParser(),
/**
* For now, HTML retrieved by XMHHttpRequest is
* returned as a string. To convert it to a
* traversible DOM document, it needs to be
* converted.
*/
externalDocument = domParser.parseFromString(this.responseText,
'text/html'),
/**
* The next thing to do is select the card from
* the DOM Document returned by parseFromString.
* DOMParser allows you to use DOM methods to
* traverse any HTML returned by an
* XMLHttpRequest.
*/
card = externalDocument.querySelector("#card").outerHTML;
/**
* Next you simply call the setCardContent
