HTML and CSS Reference
In-Depth Information
* and touchstart, all of which are explained in Chapter 5.
*/
el.addEventListener("touchend", function requestCard(event){
/**
* This will call the loadCard method with the target
* link location as the parameter (index2.html).
*/
loadCard(event.target.href);
/**
* This prevents the original path of the link from
* being handled by the browser.
*/
event.preventDefault();
});
});
}
/**
* This method will dynamically load a card from the deck based on the path
* that is passed to it through the path parameter.
*/
function loadCard(path){
/**
* This creates a new XMLHttpRequest object request. This will be
* used to pull the html page in dynamically using JavaScript.
*/
var xhr = new XMLHttpRequest();
/**
* Creates a GET request (this can either be POST or GET). A POST
* request is useful for sending large amounts of data; a GET request
* should be used to get information from a server using a parameter-
* based URI. The third parameter sets the request to be asyncronous.
* Setting this as false or not including it will block the UI and
* prevent the user from interacting with the application. This will
* not send the request straight away. You must call xhr.send();
*/
xhr.open("GET", path, true);
/**
* This sets callbacks for when the state of the request has changed.
* The state can be determined by the this.readyState. In
* this instance, it is event. The different states are:
*
* DONE - Request complete
* LOADING - Request loading
* HEADERS_RECIEVED - Headers have loaded but the request body hasn't
