Skip to content

Instantly share code, notes, and snippets.

@sundaycrafts

sundaycrafts/ajax.html

Created June 4, 2015 11:17
Show Gist options
  • Save sundaycrafts/97baa5720e8d7aa93932 to your computer and use it in GitHub Desktop.
Save sundaycrafts/97baa5720e8d7aa93932 to your computer and use it in GitHub Desktop.
Download ZIP
js: AJAX load html very simple example
Raw
ajax.html
<h1>Hello world!</h1>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
var xhr = new XMLHttpRequest();
var data;
xhr.onload = function() {
// For IE
// xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
data = xhr.responseText;
}
}
xhr.open('GET', 'ajax.html');
xhr.send();
var btn = document.querySelector('#btn');
var txt = document.querySelector('#txt');
btn.addEventListener('click', function(){
txt.innerHTML = data;
console.log(typeof data); // string
});
}
</script>
</head>
<body>
<div id="cont">
<button id="btn">push</button>
<div id="txt"></div>
</div>
</body>
</html>
@sundaycrafts
Copy link
Author

Reference to...
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/ja/docs/HTML_in_XMLHttpRequest
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment