I'm developing a page, however I'm completely lay in the matter of JS ...
The site has the div with the ID #content, and inside it a refresh button. How can I do when someone clicks it to refresh only the div, not the entire page?
I'm currently using the code:
<img src="images/refresh.png" onclick="window.location.reload()" style="cursor: pointer; position: absolute; right: 10px; top: 10px;"/>
However, it runs the entire page ...
Thank you in advance for your help!
Rodrigo, to update a page for AJAX, you will first need a URL that will serve the partial content that will feed your div.
For the purpose of this example, I'll use the <template> tag and the URL.createObjectURL method to create a URL in memory.
Once you have set your URL , then we will have to use the XMLHttpRequest object to perform the AJAX ( Asynchronous JavaScript and XML ) request, even though both the object and the technology mention XML it can also serve HTML , JSON and others.
var tmpl = document.getElementById("tmplContent").innerHTML;
var blob = new Blob([tmpl], { type: "text/html" });
var url = URL.createObjectURL(blob);
var updateContent = document.getElementById("updateContent");
var content = document.getElementById("content");
updateContent.addEventListener("click", function (event) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.addEventListener("readystatechange", function (event) {
if (request.readyState == 4 && request.status == 200) {
content.innerHTML = request.responseText
}
});
request.send();
});<div id="content">
</div>
<input id="updateContent" type="button" value="Atualizar Conteudo" />
<template id="tmplContent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet aliquam ex vel eleifend. Aenean hendrerit cursus fermentum. Nam ornare imperdiet odio, non hendrerit risus eleifend vel. Nam nec augue consectetur, condimentum nulla ut, lacinia odio. Etiam tempus ligula ac accumsan tempus. Sed a diam non purus sodales tincidunt. Proin accumsan suscipit facilisis. Cras in placerat nulla. Ut eleifend massa eget gravida vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</template>Note that in the return of the XMLHttpRequest, I'm checking two properties, the readyState (which determines what step this request is) and the status (which tells the status of the request).
Below is a short glossary for readyState :
HTTP status code 200 means that the request completed successfully, you can see the other statuses in Http Statuses , but the most common ones are (%), 301 (not allowed), 400 (Not found), 401 (Error in server) and 403 % (not implemented).