更新再開

その他

長らく放置していましたが情報発信の重要性に気づき、更新を再開することにしました。
整理された優良な情報を発信できるかはわかりませんが、ぐぐって調べることができるのは
様々な情報を発信している方々のおかげですので、私もそっち側の人間になりたいと思います。

jQueryでAjaxしたXMLデータで.html()するとIEでエラー

Web jQuery IE9

jQueryで次のような処理を書くとIEでハマるお話。

前提

処理内容

Ajaxを用いてXMLファイルを読み込んだあと、そのXMLデータの中身を .html() で取り出す。

JavaScript
var conf = null;
$.ajax({{
    url: "./data.xml",
    type: "GET",
    dataType: "xml",
    cache: false,
    async: false,
    timeout: 10000,
    success: function(data, textStatus, xhr) {
        conf = $(data).find("conf").html();
    }
});
XML（data.xml）
<conf>
    <span class="sample">サンプル</span>
</conf>

FireFoxだとこれで動くんだけどIEだと以下のようなエラーが出てしまう。

SCRIPT5007: プロパティ 'replace' の値を取得できません: オブジェクトは Null または未定義です。

理由はjQueryが .html() で使用する innerHTML が定義されていないためである。
というのもAjaxのデータタイプ（dataType）を"XML"にしているのが原因なので
ちゃんとinnerHTMLが扱えるように"HTML"としてやる必要があるようだ。

JavaScript（修正後）
var conf = null;
$.ajax({{
    url: "./data.xml",
    type: "GET",
    dataType: "html",
    cache: false,
    async: false,
    timeout: 10000,
    success: function(data, textStatus, xhr) {
        conf = $(data).find("conf").html();
    }
});

$.ajaxのdataTypeによるオブジェクトの違いとかをちゃんと理解していないとこうなる。
あらためて勉強しようと思ったのであった。