Vamos demonstrar com um exemplo típico de verificação de login.
De modo geral, o uso do objeto XMLHttpRequest para verificação de login requer as seguintes etapas:
1. Use o método DOM para obter o valor na caixa de entrada
Copie o código do código da seguinte forma:
var userName = document.getElementById("userName").value;
2. Crie um objeto XMLHttpRequest Esta etapa é mais complicada. O principal motivo é considerar problemas de compatibilidade do navegador.
Copie o código do código da seguinte forma:
if (window.XMLHttpRequest) {
//Para FireFox, Mozilla, Opera, Safari, IE7, IE8
xmlhttp = novo XMLHttpRequest();
//Correção de bugs em algumas versões específicas do navegador Mozilla
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("texto/xml");
}
} senão if (window.ActiveXObject) {
//Para IE6, IE5.5, IE5
//Dois nomes de controle que podem ser usados para criar objetos XMLHTTPRequest, armazenados em um array js
//A versão classificada em primeiro lugar é a mais recente
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
tentar{
//Pegue um nome de controle e crie-o. Se a criação for bem-sucedida, encerre o loop.
//Se a criação falhar, uma exceção será lançada e então o loop poderá continuar tentando criar
xmlhttp = novo ActiveXObject(activexName[i]);
quebrar;
} pegar(e){
}
}
}
3. Registre a função de retorno de chamada do objeto XMLHttpRequest Ao registrar a função de retorno de chamada, você precisa do nome da função e não adiciona parênteses.
Copie o código do código da seguinte forma:
//Ao registrar a função de retorno de chamada, o nome da função é obrigatório, não adicione parênteses
//Precisamos registrar o nome da função. Se adicionarmos parênteses, o valor de retorno da função será registrado.
xmlhttp.onreadystatechange = retorno de chamada;
4. Definir informações de conexão (GET)
Copie o código do código da seguinte forma:
//O primeiro parâmetro indica o método de solicitação http, suporta todos os métodos de solicitação http, usa principalmente get e post
//O segundo parâmetro representa o endereço URL da solicitação, e os parâmetros solicitados pelo método get também estão na URL.
//O terceiro parâmetro indica se deve usar interação assíncrona ou síncrona, true indica assíncrona
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
5.Envie uma solicitação
Copie o código do código da seguinte forma:
xmlhttp.send(nulo);
6. Método (POST), você mesmo precisa definir o cabeçalho da solicitação http e, como ele precisa ser codificado, você não pode enviar os dados diretamente no segundo parâmetro de XHR.open. Em vez disso, você deve usar o método send(). para enviar os dados.
Copie o código do código da seguinte forma:
//Código para solicitação POST
//xmlhttp.open("POST","AJAXServer",true);
//O método POST requer que você mesmo defina o cabeçalho da solicitação http
xmlhttp.setRequestHeader("Tipo de conteúdo","aplicativo/x-www-form-urlencoded");
//Envia dados em modo POST
xmlhttp.send("nome=" + nome do usuário);
Função de retorno de chamada:
Copie o código do código da seguinte forma:
//função de retorno de chamada
função retorno de chamada() {
//alert(xmlhttp.readyState);
//5. Receber dados de resposta
//Determina se o status do objeto é conclusão interativa
if (xmlhttp.readyState == 4) {
//Determina se a interação http foi bem-sucedida
if (xmlhttp.status == 200) {
//Obtém os dados retornados pelo servidor lacquerware
//Obtém a saída de dados de texto simples pelo segmento do servidor
var respostaText = xmlhttp.responseText;
//Exibir dados na página
//Encontre o nó do elemento correspondente à tag div através do dom
var divNode = document.getElementById("resultado");
//Defina o conteúdo HTML no nó do elemento
divNode.innerHTML = respostaText;
} outro {
alerta("Ocorreu um erro!!!");
}
}
}