Skip to content

Instantly share code, notes, and snippets.

@felipegenuino

felipegenuino/ajax-com-callback.html

Created March 30, 2015 02:45
Show Gist options
  • Save felipegenuino/e4569ae6f4f49063ec9a to your computer and use it in GitHub Desktop.
Save felipegenuino/e4569ae6f4f49063ec9a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ajax-com-callback.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<title>AJAX with JavaScript</title>
<script>
/*
Property Description
onreadystatechange Stores a function (or the name of a function)
to be called automatically each time the
readyState property changes
readyState Holds the status of the XMLHttpRequest.
Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"
404: Page not found
*/
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if (xhr.status === 200) {
document.getElementById('ajax').innerHTML = xhr.responseText;
} else {
alert(xhr.statusText);
}
}
};
xhr.open('GET','sidebar.html');
xhr.send();
</script>
</head>
<body>
<div class="grid-container centered">
<div class="grid-100">
<div class="contained">
<div class="grid-100">
<div class="heading">
<h1>Bring on the AJAX</h1>
</div>
<div id="ajax">
</div>
<contatos>
<contato>
<nome> Felipe Genuino </nome>
<telefone> 48 99113048 </telefone>
</contato>
<contato>
<nome> Felipe Genuino </nome>
<telefone> 48 99113048 </telefone>
</contato>
</contatos>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment