jQueryでXMLを操作

16 6月
6月 16, 2016

クライアント側でXMLを作成するときに、これまでは文字列として組み上げていました。XMLの内容を変更する場合でも、タグの内容を読み取った後、値を埋め込んだ文字列を作成しながら、下記のような感じで、一から組み上げていました。

var tmpstr = '3.0';
var xmlText = '';
xmlText = xmlText + '\n\n';
xmlText = xmlText + '\n\n';
xmlText = xmlText + '' + tmpstr + '\n\n';
xmlText = xmlText + '';

 

それは、XMLをjQueryオブジェクトとして取り扱った場合、タグの内容を書き換えるのに適当な方法を知らなかったからですが、調べてみると、下記のようなサイトがありました。

上記のサイトを参考に書いてみました。まずもととなる XML です。ファイル名は simple.xml です。

<?xml version="1.0" encoding="utf-8"?>
<root>
<server></server>
</root>

この空の server タグに値を埋め込みたいのですが、下記のようなコードで可能です。

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>simple</title>

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<script type="text/javascript">
//<![CDTA[

// テキストをxmlに変換。もともと xml ならばそのまま。

function text2xml(xmltext) {

if (!($.isXMLDoc(xmltext))) {
	var xml = $.parseXML(xmltext);
} else {
	var xml = xmltext;
}
return xml;
}


var tmp = new Date().getTime();

    $.ajax({
        url:'simple.xml?' + tmp,
        type:'get',
        dataType:'text',
        timeout:5000,
	async:false,
        success:function(xmltext,status){

		if(status!='success')return;

		var xml = text2xml(xmltext);

		$(xml).find('root').find('server').text('192.168.100.189');

		alert($(xml).find('root').find('server').text());

		var xs = new XMLSerializer();

		alert(xs.serializeToString($(xml)[0]));
	}
});
//]]>
</script>
</head>

<body>

</body>
</html>

本来は HTML に対して使用する書き換えの機能を XML に利用したという感じでしょうか。IE11 と firefox 47 と mac の safari、クローム、iOS、 アンドロイドで動作しました。