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