我有一个小的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);
}

解决方案

回答

我强烈建议我们不要滚动自己的Ajax代码。而是使用Prototype，Dojo或者其他任何框架。他们已经处理了所有我们未处理的ReadyState(2表示已发送，3表示正在处理，等等)，并且应该避免收到响应，因此我们不会插入可能不安全的信息javascript或者其他内容。

更健壮的框架将为我们提供的另一件事是，我们不仅可以使用innerHTML替换DOM中的项目，还可以做更多的事情。函数只能用ajax调用的响应替换一个元素。我们可以使用Ajax做更多的事情。

回答

我将删除此行。

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

用用户可能不理解的语言向用户大喊大叫比失败还糟。 :-)

回答

jQuery可能是最流行的轻量级库之一。

回答

我从来都不喜欢嵌套的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.
}

我认为那行得通。但是正如前面提到的，为什么要重新发明轮子，请使用库。甚至更好地了解他们是如何做到的。

回答

原型中的相同之处：

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

原型API中的Ajax.Updater