NetBeansの「Java WebアプリケーションでのAjax入門」を試した時のメモ

「Java WebアプリケーションでのAjax入門- NetBeans IDEチュートリアル」を試してみたのだが、チュートリアル通りに実装すると、以下のような不具合が発生した。

不具合１
Internet Explorer（バージョン7で確認）を使った場合、検索窓に文字を入力しても作曲家の名前が表示されないという問題が発生した。
デバッグしてみると、下記のブラウザ環境を考慮してXMLHttpRequestオブジェクトを作成するところで、本来IEを使っている場合には、window.XMLHttpRequestが偽になって、ActiveXObjectを作成するはずなのに、その判定が偽にならずXMLHttpRequestを作成してしまっている事が原因であった。
これは、IE7以降はXMLHttpRequestがサポートされたためと思われる。
（参考：「IE7 の ajax 対応状況 - XMLHttpRequest をサポート : 管理人@Yoski」）

function initRequest(url) {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

上記の問題は、以下のように判定の順番を変えることで対策出来る。

function initRequest(url) {
    if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } 
}

不具合２
Internet Explorer（バージョン7で確認）を使った場合、検索窓に文字を入力すると以下のようなエラーが発生した（Firefoxでは発生せず）。

Error: Could not get the display property. Invalid argument.

で、Microsoft Script Debuggerを起動してみると、以下の箇所でエラーとなっていた。

completeTable.style.display = 'table';

どうもIEではstyle.displayに'table'を指定出来ない模様（参考：IEのstyle.display = 'table-row' - ひこにっき - tenmonグループ）。ということで「http://never-ever.info/modules/news/index.php?page=article&storyid=397」を参考に、問題の箇所を以下のように修正することで、エラーを回避することが出来た。

completeTable.style.display = '';

不具合３
Internet Explorer（バージョン7で確認）を使った場合、検索窓に存在しない作曲家の名前を入れても、一度表示された作曲家リストが消えないという問題が発生した。
本来、存在しない作曲家名を入力した場合には、サーバ側でNO CONTENTを返しているので、HTTPのステータスコードが204になり、下記のコード中のclearTable()によって、作曲家リストが消されるはずである。

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            parseMessages(req.responseXML);
        } else if (req.status == 204) {
            clearTable();
        }
    }
}

しかし、デバッグしたところ、なぜかHTTPのステータスコードが1223で返って来ていた。
「[http://wiki.paulownia.jp/ajax/xmlhttprequest」の情報によると、IEでは204の変わりに1223が返ってくる事があるようなので、以下のように修正することで問題を解決する事が出来た。

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            parseMessages(req.responseXML);
        } else if (req.status == 204 || req.status == 1223) {
            clearTable();
        }
    }
}