O que vou falar é muito básico, então especialistas não deveriam ler. Se você ler, por favor, me dê sua opinião. Iniciantes ou pessoas que não sabem muito sobre conhecimentos de baixo nível podem lê-lo para ajudar na compreensão e na memória.
O objeto XMLHttpRequest é o núcleo da função AJAX. Para desenvolver um programa AJAX, você deve começar entendendo o objeto XMLHttpRequest.
Para entender o objeto XMLHttpRequest, comece criando o objeto XMLHttpRequest A criação de objetos XMLHttpRequest em diferentes navegadores usa métodos diferentes:
primeiro observe o método do IE de criação do objeto XMLHttpRequest (Método 1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //Use uma versão mais recente do IE para criar um objeto compatível com o IE (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Use uma versão mais antiga do IE para criar um objeto compatível com o IE (Microsoft.XMLHTTP)
Mozilla, Opera, Safari e a maioria dos navegadores não-IE usam o seguinte método (Método 2) para criar objetos XMLHttpRequest:
var xmlhttp = new XMLHttpRequest();
Na verdade, o Internet Explorer usa um objeto chamado XMLHttp em vez do objeto XMLHttpRequest, que Mozilla, Opera, Safari e a maioria dos navegadores que não são da Microsoft usam (doravante denominados coletivamente como objeto XMLHttpRequest). O IE7 também passou a usar o objeto XMLHttpRequest.
Se navegadores diferentes usarem métodos incorretos ao criar o objeto XMLHttpRequest, o navegador reportará um erro e o objeto não poderá ser usado. Portanto, precisamos de um método para criar um objeto XMLHttpRequest que seja compatível com diferentes navegadores:
Crie um método de objeto XMLHttpRequest que seja compatível com vários navegadores
var xmlhttp = false; //Crie uma nova solicitação de variável e atribua a ela um valor falso. Use false como condição de julgamento, o que significa que o objeto XMLHttpRequest ainda não foi criado.
função CreateXMLHttp(){
tentar{
xmlhttp = new XMLHttpRequest(); //Tente criar um objeto XMLHttpRequest. Os navegadores, exceto o IE, suportam este método.
}
pegar (e){
tentar{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Use uma versão mais recente do IE para criar um objeto compatível com o IE (Msxml2.XMLHTTP)
}
pegar (e){
tentar{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Use uma versão mais antiga do IE para criar um objeto compatível com o IE (Microsoft.XMLHTTP).
}
pegar (falhou){
xmlhttp = false; //Se falhar, certifique-se de que o valor da solicitação ainda seja falso.
}
}
}
retornar xmlhttp;
}
É muito simples avaliar se a criação foi bem-sucedida
se (!xmlhttp){
//Falha ao criar o objeto XMLHttpRequest!
}
outro{
//Criado com sucesso!
}
Depois de criar o objeto XMLHttpRequest, vamos dar uma olhada nos métodos, propriedades e no manipulador de eventos onreadystatechange mais importante deste objeto.
Método:
open() Descrição: inicializa os parâmetros da solicitação HTTP, como URL e método HTTP, mas não envia a solicitação.
abort() Descrição: Cancela a resposta atual, fecha a conexão e encerra qualquer atividade de rede pendente.
getAllResponseHeaders() Descrição: retorna cabeçalhos de resposta HTTP como strings não analisadas.
getResponseHeader() Descrição: Retorna o valor do cabeçalho de resposta HTTP especificado.
send() Descrição: Envia uma solicitação HTTP, usando os parâmetros passados para o método open() e o corpo da solicitação opcional passado para o método.
setRequestHeader() Descrição: Define ou adiciona uma solicitação HTTP a uma solicitação aberta, mas não enviada.
Atributos:
readyState Descrição: O status da solicitação HTTP.
responseText Descrição: o corpo da resposta (excluindo cabeçalhos) recebido pelo servidor até o momento ou uma string vazia se nenhum dado tiver sido recebido.
responseXML Descrição: A resposta à solicitação, analisada em XML e retornada como um objeto Document.
status Descrição: Código de status HTTP retornado pelo servidor.
statusText Descrição: este atributo especifica o código de status HTTP da solicitação usando um nome em vez de um número.
onreadystatechange é a função do manipulador de eventos chamada sempre que a propriedade readyState é alterada.
Vamos entender o objeto XMLHttpRequest desde o processo de envio de uma solicitação e processamento dos resultados da solicitação.
Naturalmente, um objeto XMLHttpRequest é gerado antes de enviar a solicitação. Não há necessidade de escrever mais código se ele já estiver lá.
Gere um objeto XMLHttpRequest
var xmlhttp = CreateXMLHttp();
Após criar o objeto XMLHttpRequest, para qual site queremos enviar a solicitação. Vamos escolher o RSS na página inicial do blog park? Então, como defino o endereço do site que desejo solicitar? Use o método open().
open(método, url, assíncrono, nome de usuário, senha)
Este método possui 5 parâmetros. Você pode ver o significado específico aqui: http://www.w3school.com.cn/xmldom/dom_http.asp.
Isto é o que usamos.
xmlHttp.open("get"," http://www.cnblogs.com",true );
O parâmetro get significa usar o método get. O segundo é naturalmente o endereço de destino, a página inicial do blog park. O terceiro significa se é assíncrono. Descrições de parâmetros específicos também podem ser encontradas em http://www.w3school.com.cn .
Ok, o objetivo está definido, como enviá-lo. Use o método send().
send(body), o método send() possui apenas um parâmetro, que representa o objeto DOM. Esse objeto DOM precisa explicar muito. Da próxima vez, hoje só precisamos escrever.
xmlhttp.send(nulo);
É isso. Ok, foi enviado, então como lidar com os resultados retornados. Neste momento, é usada a coisa mais importante do objeto XMLHttpRequest, que é o identificador do evento onreadystatechange. O que isso significa? Então precisamos explicar o readyState do objeto XMLHttpRequest. Existem 5 estados de readyState, representados por números de 0 a 4, respectivamente.
Descrição do nome do status
0 Não inicializado Estado de inicialização. O objeto XMLHttpRequest foi criado (antes de open() ser chamado) ou redefinido pelo método abort().
1 Open O método open() foi chamado, mas o método send() não foi chamado. A solicitação ainda não foi enviada.
2 O método Sent Send() foi chamado e a solicitação HTTP foi enviada ao servidor Web. Nenhuma resposta recebida.
3 Recebendo Todos os cabeçalhos de resposta foram recebidos. O corpo da resposta começou a ser recebido, mas não foi concluído.
4 A resposta HTTP carregada foi totalmente recebida.
No entanto, deve-se notar que os estados que diferentes navegadores podem manipular no identificador de evento onreadystatechange não são consistentes. O IE e o FireFox podem lidar com os estados 1 a 4, enquanto o Safari pode lidar com os estados 2 a 4 e o Opera pode lidar com os estados 3 e 4. . O status 0 é basicamente inútil, porque o método open() será chamado imediatamente após a criação do objeto XMLHttpRequest, e o status se tornará 1 neste momento, a menos, é claro, que você queira determinar se o objeto foi cancelado por abort (), mas esta situação ainda é muito comum. Na maioria dos casos, basta determinar se o status é 4 (aceito e concluído).
Ok, entendo que readyState tem 5 estados. Então o resultado do retorno do processamento é para ver se o estado muda para estados diferentes e podemos fazer um processamento diferente. Como informar ao objeto XMLHttpRequest quem deve lidar com a mudança quando o estado mudar. Existem duas maneiras de escrever, uma é usar o método anônimo, a outra é especificar o método. Na verdade, são apenas métodos de escrita diferentes com o mesmo efeito:
xmlhttp.onReadyStateChange = function (){.
//Código para lidar com mudanças de status
}
//ou
xmlhttp.onReadyStateChange = getResult;
função getResult(){
///Código para lidar com mudanças de status
}
//A propósito, o nome do identificador é relativamente longo. Você pode lembrá-lo assim. On ReadyState Change significa que a solicitação foi enviada quando o estado de leitura foi alterado e o método de processamento também é especificado. content? Existem dois atributos: ResponseText e ResponseXML Para uso, ResponseXML é o objeto de retorno e precisa ser analisado aqui, use ResponseText primeiro para ver o que é retornado.
alert(xmlhttp.responseText); //Ver se o código HTML da página inicial é retornado. É você quem consegue.
Todo o processo é: criar o objeto XMLHttpRequest -> especificar o endereço de envio e o método de envio -> enviar a solicitação -> especificar o método de processamento e processar o resultado de retorno. Mas deve-se notar que nosso entendimento normal é este, mas o método de processamento especificado do identificador de evento onreadystatechange precisa ser especificado antes do envio, caso contrário, o evento de mudança de estado não poderá ser processado.
Portanto, devemos lembrá-lo de acordo com o seguinte processo: criar objeto XMLHttpRequest -> especificar o endereço de envio e o método de envio -> especificar o método de processamento de alteração de status -> enviar a solicitação após o envio da solicitação, o método de processamento especificado será automaticamente. chamado quando o status muda.
Ok, vamos dar uma olhada no código completo.
código concluído
var xmlhttp = false; //Crie uma nova solicitação de variável e atribua a ela um valor falso. Use false como condição de julgamento, o que significa que o objeto XMLHttpRequest ainda não foi criado.
função CreateXMLHttp(){
tentar{
xmlhttp = new XMLHttpRequest(); //Tente criar um objeto XMLHttpRequest. Os navegadores, exceto o IE, suportam este método.
}
pegar (e){
tentar{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Use uma versão mais recente do IE para criar um objeto compatível com o IE (Msxml2.XMLHTTP)
}
pegar (e){
tentar{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Use uma versão mais antiga do IE para criar um objeto compatível com o IE (Microsoft.XMLHTTP).
}
pegar (falhou){
xmlhttp = false; //Se falhar, certifique-se de que o valor da solicitação ainda seja falso.
}
}
}
retornar xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get"," http://www.cnblogs.com",true );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(nulo);
função getResult(){
if(xmlhttp.readyState == 4){
alerta(xmlhttp.responseText);
}
}
Tudo parece estar bem, mas você já pensou no que aconteceria se o código HTML desse errado durante a transmissão pela rede ou se o endereço que especificamos se tornasse inválido. Neste momento, você precisa usar o atributo status, que é o código de status HTTP retornado pelo servidor. Quando xmlhttp.status for igual a 200, significa que o processo de transmissão está completo e sem erros. Para obter o significado específico do código de status HTTP, você pode acessar o site da organização W3C para ver o endereço http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 .
Acho que não há problema em escrever o método getResult() da seguinte maneira.
função getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alerta(xmlhttp.responseText);
}
}
Ok, algo que originalmente era bastante simples parece muito prolixo depois de ter escrito tanto sobre isso. Porém, acho muito importante entender o conteúdo básico da programação. Hoje em dia, muitas bibliotecas JS são usadas para desenvolver programas AJAX e não há necessidade de escrever esse código básico diretamente. Por exemplo, se usarmos o famoso jQuery, mas se tivermos um bom entendimento das coisas básicas, então essas bibliotecas reportam erros, ou se houver algum problema, podemos saber onde está o erro muito rapidamente, e fazer alterações mais rapidamente para fazer o programa funcionar normalmente.