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','chapter665.html',true);
httpObj.send(null);
httpObj.onreadystatechange = function(){
if((httpObj.readyState == 4) && (httpObj.status == 0)){
document.querySelector("div").innerHTML = httpObj.responseText;
}
}
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
<p>変更前</p>
</div>
</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(){
$("div").load("chapter665.html");
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
<p>変更前</p>
</div>
</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("chapter665.html",function(data){
$("p").html(data);
},"html");
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
<p>変更前</p>
</div>
</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("chapter665.html",function(data){
$("p").html(data);
},"html");
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
<p>変更前</p>
</div>
</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:"chapter665.html",
dataType:"html",
success:function(data){
$("div").html(data);
}
});
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
<p>変更前</p>
</div>
</body>
</html>
HTML
<p>変更後</p>