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("chapter671.xml",function(data){
$("div").html("<ul></ul>");
$(data).find("data1").each(function(){
$("div ul")
.append("<li>" + $("text1",this).text() + "</li>")
.append("<li>" + $("text2",this).text() + "</li>")
.append("<li>" + $("text3",this).text() + "</li>");
});
},"xml");
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
変更前
</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("chapter671.xml",function(data){
$("div").html("<ul></ul>");
$(data).find("data1").each(function(){
$("div ul")
.append("<li>" + $("text1",this).text() + "</li>")
.append("<li>" + $("text2",this).text() + "</li>")
.append("<li>" + $("text3",this).text() + "</li>");
});
},"xml");
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
変更前
</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({
url: 'chapter671.xml',
dataType: 'xml',
success: function(data){
$("div").html("<ul></ul>");
$(data).find("data1").each(function(){
$("div ul")
.append("<li>" + $("text1",this).text() + "</li>")
.append("<li>" + $("text2",this).text() + "</li>")
.append("<li>" + $("text3",this).text() + "</li>");
});
}
});
});
});
</script>
</head>
<body>
<input type="button" value="変更">
<div>
変更前
</div>
</body>
</html>
XML
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data1>
<text1>テキスト1</text1>
<text2>テキスト2</text2>
<text3>テキスト3</text3>
</data1>
<data2>
<text1>テキスト1</text1>
<text2>テキスト2</text2>
<text3>テキスト3</text3>
</data2>
<data3>
<text1>テキスト1</text1>
<text2>テキスト2</text2>
<text3>テキスト3</text3>
</data3>
</root>