Hatena::ブログ(Diary)

月夜見的な技術日記 このページをアンテナに追加 RSSフィード

2013-07-19

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

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によるオブジェクトの違いとかをちゃんと理解していないとこうなる。

あらためて勉強しようと思ったのであった。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/rezelkht/20130719/1374195034
リンク元