検索結果: タグ「Ajax」

jQueryのAjaxを使ってRSSフィードを読み込むとIE7でエラーに

2008年12月21日 15:53 » オープンソース

jQueryのAjaxを使ってRSSフィードを読み込むとIE7でエラーになった。

該当のフィードはあるCMSによって動的に作成されたもので、RSSのバージョンは2.0。

マイクロソフトのブログ(http://blogs.msdn.com/rssteam/articles/PublishersGuide.aspx)によると、IE7でRSS2.0のフィードを正しく表示させるには、MIMEタイプを

text/xml(推奨)

か、もしくは

application/rss+xml

にしてくださいとある。

このCMSではapplication/rss+xmlになっていたので、ためしにtext/xmlに変えてみたところエラーが消えた。

 

確認のためにtext/xml、application/rss+xml、application/xmlの3パターンで読み込むサンプルを作成。

http://4plus.jp/samples/rss/

 

  $.ajax({
    type: 'POST',
    url: '/samples/rss/' + type + '.php',
    dataType: 'xml',
    success: function (response) {
      ・・・
    },
    error: function (xmlhttp, textStatus, errorThrown) {
      alert("xmlhttp.status: " + xmlhttp.status + ", \n" +
            "textStatus: " + textStatus + ", \n" +
            "errorThrown: " + errorThrown);
    }
  });

 

のようにしてエラーを表示させてみると、やはりapplication/rss+xmlの時だけ

 

xmlhttp.status: 200

textStatus: parsererror

errorThrown: undefined

 

というメッセージが出た。

PrototypeのAjax.RequestとresponseXMLを使ったAjax通信

2008年6月20日 17:32 » オープンソース

Firefox 3のダウンロード数が凄いことになっているらしい。
PrototypejQueryなどのライブラリのおかげでブラウザー互換を意識せずにJavascript開発ができるようになってきた昨今、FirebugHTTPLiveHeadersなど開発に便利なアドオンがあるFirefoxの人気が高まるのもうなずける。
とはいえまだまだ完全に互換性問題が無くなった訳ではない。当社でも最近IEで「エラーは起こらないのに、Ajaxが上手くいかない」状況にぶつかって苦労した。

実現したかったのは「ユーザーがボタン(input type="button")を押した時に非同期通信を行い、動的に作成した返り値を表示する」というもの。Ajax通信自体にはPrototypeのAjax.Requestオブジェクトを利用した。また、返り値に日本語を含むので、ブラウザーの違いによる文字コード問題を避けるためにresponseTextではなくresponseXMLを選んだ

JavascriptのAjax部分は以下の通り。

Event.observe($('someButton'), 'click',
    function(e) {
      new Ajax.Request('myxml.php',
        { method:'post',
          parameters:
            { param1: "foo", param2: "bar" },
          onSuccess: function(transport){
            var res = transport.responseXML;
            var msg = res.getElementsByTagName('msg')[0] ;
            alert(msg.firstChild.nodeValue);
          },
          onFailure: function(){ alert('Error: could not save layout.') }
      });
  });

続いてmyxml.phpの中身。

header("Content-Type: application/xml");
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo "\n";
echo "<msg>";
echo "<![CDATA[";
echo $_POST['param1'] . ',' . $_POST['param2'];
echo "]]>";
echo "</msg>";

ここでCDATAの前後に¥nを出力しないように注意する。つまり、XMLの出力は

<msg>
<![CDATA[Hello World]]>
</msg>

ではなく

<msg><![CDATA[Hello World]]></msg>

となるようにする。というのも、前者の場合msg要素のfirstChildがHello Worldではなく¥nになってしまうからだ。

Firebugがあればこういった部分のデバグも容易に行えるが、IEの場合はonSuccessのコールバック内でエラーが起きても何も表示されないためにわかりにくい。Ajax開発ではJavascriptだけでなくこういったXMLの細かい部分にも注意したい。

Ads

アーカイブ

ページの上部へ