O que mais é necessário para Ajax que esta função

Question

Eu tenho um pequeno JS função que faz Ajax para mim e outra, como é que se adiciona no POST de dados para o pedido.Com o Ajax, sendo um grande tema com tantas bibliotecas sobre isso, o que estou ausente da minha função, que é inseguro, ou algo preocupante?

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

Eu recomendo fortemente que você não rolar o seu próprio código Ajax.Em vez disso, use um quadro como o Prototype, Dojo, ou qualquer um dos outros.Eles tomaram o cuidado de observar todos os ReadyStates você não está de processamento (2 significa que ele foi enviado, 3 significa que está em processo, etc.), e eles devem escapar a resposta que você está recebendo para que você não insira potencialmente inseguros javascript ou algo em sua página.

Outra coisa um mais robusto quadro vai dar é a capacidade de fazer mais do que apenas usar innerHTML para substituir itens no DOM.Sua função aqui só pode ser usado para substituir um elemento com a resposta da chamada ajax.Há muito mais que você pode fazer com o Ajax.

Answer 2

Eu iria remover esta linha.

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

Gritar com o usuário em uma língua que ele provavelmente não entende é pior do que o fracasso.:-)

Answer 3

Eu nunca fui um fã de aninhados blocos try/catch, portanto, gostaria de fazer algo como:

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.
}

Eu acho que vai funcionar.Mas, como já foi mencionado antes - por que reinventar a roda, use uma biblioteca.Ainda melhor - descobrir como fazê-lo.

Answer 4

jQuery é provavelmente um dos mais leves bibliotecas populares lá fora.

Answer 5

A mesma coisa no protótipo:

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

O Ajax.Atualizador no Protótipo API

Answer 6

Se você realmente quer ver o que está faltando, ler o de jQuery ou Prototype código-fonte para suas ajax rotinas.Se houver números de bug nos comentários, olhar aqueles bem.