この関数よりもAjaxには何が必要です

Question

私にはAjaxを実行する小さなJS関数があり、要求にPOSTデータで追加するようなものもあります。 Ajaxがそれほど多くの図書館で大きな話題になっているので、私の機能には何が欠けていますか、それは安全でないか、それとも心配なことでしょうか？

function loadPage(pagePath, displayElement) 
{ 
    var xmlHttp; 

    try 
    { 
     // Firefox, Opera 8.0+, Safari 
     xmlHttp=new XMLHttpRequest(); 
    } 
    catch (e) 
    { 
     // Internet Explorer 
     try 
     { 
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     catch (e) 
     { 
      try 
      { 
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (e) 
      { 
       alert("Your browser does not support AJAX!"); 
       return false; 
      } 
     } 
    } 

    xmlHttp.onreadystatechange=function() 
    { 
     if(xmlHttp.readyState==4) 
     { 
      document.getElementById(displayElement).innerHTML = xmlHttp.responseText; 
     } 
    } 

    xmlHttp.open("GET", pagePath, true); 
    xmlHttp.send(null); 
} 

Answer 1

独自のAjaxコードを使用しないことを強くお勧めします。代わりに、Prototype、Dojoなどのフレームワークを使用してください。彼らはあなたが処理していないReadyStatesをすべて処理しています（2は送信済み、3は処理中であることを意味します）。あなたは応答をエスケープして、潜在的に安全でないjavascriptなどをあなたのページに追加することができます。

もっと堅牢なフレームワークがもたらすもう一つのことは、innerHTMLを使用してDOM内のアイテムを置き換える以外にもできることです。ここの関数は、ajax呼び出しの応答で1つの要素を置き換えるためにのみ使用できます。 Ajaxにはもっとたくさんのことがあります。

Answer 2

私はこの行を削除します。

alert("Your browser does not support AJAX!") 

おそらく理解できない言語でユーザーに叫んでも、失敗よりも悪いです。 :-)

Answer 3

jQueryはおそらくそこで最も軽い人気のあるライブラリの1つです。

Answer 4

私は、ネストされたのtry/catchブロックのファンだったことがありませんので、私はそれをような何かしたい：

var xmlHttp; 
if (window.XMLHttpRequest) { 
    // Firefox, Opera 8.0+, Safari 
    xmlHttp=new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
    try { 
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
} 

if (xmlHttp) { 
    // No errors, do whatever you need. 
} 

を、私はそれがうまくいくと思います。しかし、前に述べたように、なぜ車輪を再発明するかは、図書館を使用してください。さらに優れている - 彼らがどのようにそれを行うかを見つける。

Answer 5

プロトタイプでも同じこと：

function loadPage(pagePath, displayElement) { 
    new Ajax.Updater(displayElement, pagePath); 
} 

Ajax.Updater in Prototype API

Answer 6

あなたは本当にあなたが不足しているかを確認したい場合は、そのAJAXルーチンのためのjQueryのかプロトタイプのソースコードを読みます。コメントにバグ番号がある場合は、それらも参照してください。