Ajax需要什么比这个功能还要多

Question

我有一个小的JS函数可以为我做Ajax，而另一个它可以将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或其他任何框架。他们负责处理所有你不处理的ReadyState（2意味着它已经发送，3意味着它正在处理中，等等），他们应该逃避你得到的响应，所以你不会插入潜在的不安全JavaScript或什么东西到你的页面。

另一个更健壮的框架将给你的是不仅仅是使用innerHTML来替换DOM中的项目。你的函数只能用来用ajax调用的响应代替一个元素。使用Ajax可以做更多的事情。

Answer 2

我会删除这一行。

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

用用他可能不会理解的语言在用户身上喊叫比失败更糟。 :-)

Answer 3

jQuery可能是那里最轻的流行库之一。

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

如果你真的想看看你错过了什么，阅读了jQuery或原型源代码的AJAX程序。如果评论中有错误编号，请查看这些错误编号。