2013-12-13

IEでVisualforceページのjQueryのAjax処理が動かない

Visualforceページ内でActionFunction等のajax系のapexタグ・属性

(apex:actionFunction, 等)を利用しつつ、

jQueryの$.ajaxを利用している場合に、IEで$.ajaxがうまく動かなくなってしまう。

 

これは、Apexのajax系処理をVFに実装して画面を表示すると

/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=********** のURLで

Sarissa.js(http://dev.abiss.gr/sarissa/)というAjaxのライブラリが読み込まれてしまうためで、

IEでSarissa.jsが読み込まれると

ブラウザ組み込みのXMLHttpRequestオブジェクトがSarissa.jsによって上書きされてしまい

結果としてjQueryの$.ajaxが動かなくなってしまうことが原因。

 

対応策としては、

・Apexのajax系処理を使う場合はjQueryのAjax通信を行わない。

(どちらか片方に寄せる)

・下記のようにしてjQueryオブジェクトのxhrプロパティを書き換える。

jQuery.ajaxSetup({
  xhr: function() {
    try {
     if (window.ActiveXObject)
       return new window.ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) { }
    return new window.XMLHttpRequest();
  }
});

の2パターン。

force.com内で完結するのであれば、JavaScript Remotingとかajax系タグだけでも問題ないが、

外部Webサービスとajaxを利用して連携する場合には注意が必要。

このエントリーをはてなブックマークに追加