XHR (参考)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.addEventListener("load",function(){
document.querySelector("input").addEventListener("click",function(){
httpObj = new XMLHttpRequest();
httpObj.open('GET','chapter663.txt',true);
httpObj.send(null);
httpObj.onreadystatechange = function(){
if((httpObj.readyState == 4) && (httpObj.status == 0)){
document.querySelector("p").innerText = httpObj.responseText;
}
}
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<p>変更前</p>
</body>
</html>
jQuery (load)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$("p").load("chapter663.txt");
});
});
</script>
</head>
<body>
<input type="button" value="変更" />
<p>変更前</p>
</body>
</html>
jQuery ($.get)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$.get("chapter663.txt",function(data){
$("p").text(data);
});
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<p>変更前</p>
</body>
</html>
jQuery ($.post)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$.post("chapter663.txt",function(data){
$("p").text(data);
});
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<p>変更前</p>
</body>
</html>
jQuery ($.ajax)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$.ajax({
type:"GET",
url:"chapter663.txt",
success:function(data){
$("p").text(data);
}
});
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<p>変更前</p>
</body>
</html>
TEXT
変更後