Ajax e como funciona
O Ajax é uma tecnologia que troca dados com servidores sem páginas da Web atualizadas. Foi usado pela primeira vez pelo Google no Google Maps e foi rapidamente popular.
Ajax não pode ser domínio cruzado. Se você precisar de domínio cruzado, pode usar o documento.Domain = 'A.com'; ou use um proxy do servidor para proxy xmlhttprequest.
O Ajax é baseado nos padrões existentes da Internet e os usa em combinação:
XmlHttPrequest Objeto (troca de forma assíncrona com o servidor)
JavaScript/DOM (exibição/interação da informação)
CSS (defina estilos para dados)
XML (como o formato para converter dados)
Crie o objeto xmlHttPrequest
Todos os navegadores modernos (IE7+, Firefox, Chrome, Safari e Opera) têm objetos XMLHTTPREQUEST embutidos.
Crie um objeto Ajax:
// ie6 ou acima
var oajax = novo xmlHttPrequest ();
// ie6
var oajax = new ActiveXObject ("Microsoft.xmlHttp")
Conecte -se ao servidor
oajax.open (método, url, é assíncrono)
Todos sabemos que Ajax, a saber, "JavaScript assíncrono e XML" (JavaScript assíncrono e XML), refere -se a uma tecnologia de desenvolvimento da Web que cria aplicativos da Web interativos. Portanto, o Ajax nasce para trabalhar no modo assíncrono (assíncrono é verdadeiro, síncrono falso)
Síncrono e assíncrono
A sincronização refere -se ao método de comunicação no qual o remetente envia dados e aguarda o receptor enviar uma resposta antes de enviar o próximo pacote de dados.
O assíncrono refere -se ao método de comunicação no qual o remetente envia dados sem esperar que o receptor envie uma resposta e envie o próximo pacote de dados.
(Para simplificar: a sincronização só pode ser feita uma por uma a uma, enquanto ascronsas podem ser feitas várias coisas ao mesmo tempo)
Enviar solicitação send ()
A cópia do código é a seguinte:
<script type = "text/javascript">
função getDoc () {
var xmlhttp;
if (window.xmlhttprequest) {
xmlHttp = new XmlHttPrequest ();
}
outro{
xmlHttp = new ActiveXObject ("Microsoft.xmlHttp"); // para ie6
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById ("myid"). INnerHtml = xmlHttp.RESPONSETEXT;
}
}
xmlhttp.open ("get", index.php, true);
xmlhttp.send ();
}
</script>
</head>
<Body>
<button type = "button" onclick = "getDoc ()"> solicitar dados </butut>
</body>
Obter ou postar?
Comparado ao post, o get é mais simples e rápido e está disponível na maioria dos casos.
No entanto, use a solicitação de postagem nos seguintes casos:
Incapaz de usar arquivos em cache (atualizar arquivos ou bancos de dados no servidor)
Envie grandes quantidades de dados para o servidor (a postagem não tem limite de dados)
A postagem é mais estável e confiável do que o Get ao enviar a entrada do usuário contendo caracteres desconhecidos
Receber informações de devolução
oajax.onReadyStateChange = function () {// Handler de eventos a ser chamado quando o estado de solicitação mudar
alerta (oajax.readyState);
}
Sempre que o valor da propriedade ReadyState muda, um evento ReadyStateChange será acionado. Este evento pode ser usado para detectar o valor do Estado Ready após cada mudança de estado. Geralmente, estamos interessados apenas no estágio em que o valor do ReadyState é 4, porque todos os dados estão prontos no momento, no entanto, o manipulador de eventos ONREADESTATECHANGE deve ser especificado antes de ligar para o Open () para garantir a compatibilidade do navegador cruzado. Vamos dar uma olhada em um exemplo:
A cópia do código é a seguinte:
var xhr = createxhr ();
xhr.onreadyStateChange = function () {
if (xhr.readyState == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
alerta (xhr.statustext);
} outro {
alerta ("a solicitação não foi bem -sucedida:" + xhr.status);
}
}
};
xhr.open ("get", "exemplo.txt", true);
xhr.send (nulo);
Objetos xhr
Quando um objeto XHR envia uma solicitação HTTP para o servidor, ele passa por vários estados até que a solicitação seja processada e depois receba uma resposta. ReadyState é a propriedade do Estado da solicitação XHR, que possui 5 valores de propriedade:
0 (não inicializado) o método aberto () ainda não foi chamado
1 (carga) o método send () foi chamado e a solicitação está sendo enviada
2 (Carregando é concluído) O método send () foi concluído e todo o conteúdo de resposta foi recebido
3 (Análise) O conteúdo da resposta está sendo analisado
4 (completo) A análise de conteúdo de resposta é concluída e pode ser usada pelo cliente.
status
O atributo de status representa o código de status da resposta retornado do servidor. Por exemplo: 200 significa sucesso, 404 significa não encontrado.
Cabeçalho de 1 palavra: mensagem. Esse tipo de código de status significa que a solicitação foi aceita e precisa ser processada.
Cabeça de 2 palavras: sucesso. Esse tipo de código de status significa que a solicitação foi recebida com sucesso, entendida e aceita pelo servidor.
Cabeçalho de 3 palavras: redirecionamento. Esse tipo de código de status significa que outras ações são exigidas pelo cliente para concluir a solicitação.
Cabeçalho de 4 caracteres: erro do cliente. Esse tipo de código de status significa que o cliente pode parecer ter um erro, o que dificulta o processamento do servidor.
Cabeçalho de 5 palavras: erro do servidor. Esse tipo de código de status representa um erro ou estado anormal ocorreu durante o processo de processamento de solicitação do servidor
Também anexado: explicação detalhada do código de status HTTP
Statustext
Statustext é as informações de texto retornadas na resposta e só podem ser usadas se o valor do Estado Ready for 3 ou 4.
Método XHR
| método | descrever |
|---|---|
| abortar() | Faz com que a solicitação atualmente em execução seja cancelada |
| getAllResponseHeaders () | Retorna um único caractere | string contendo os nomes e valores de todos os cabeçalhos de resposta |
| getResponseHeader (nome) | Retorna o nome e o valor especificado no cabeçalho da resposta |
| Open (método, URL, assíncrono, nome de usuário, PWD) | Defina os métodos HTTP (Get ou Post) etc. |
| enviar (conteúdo) | Emitir uma solicitação com o conteúdo do assunto especificado |
| setRequestHeader (nome, valor) | Defina o cabeçalho da solicitação com o nome e o valor especificados |
A cópia do código é a seguinte:
<script type = "text/javascript">
var oajax = oajax ();
alerta (oajax.readyState); // "0" aparece "
oajax.open ("get", "index.html", true);
alerta (oajax.readyState); // "1" aparece
Oajax.send (nulo);
alerta (oajax.readyState); // 4 aparece sob o IE, enquanto o Firefox é 2
// você pode ouvir através do evento ReadyStatechange
oajax = xhr ();
oajax.onreadyStateChange = function () {
alerta (oajax.readyState); // a ordem sob o Firefox é 1, 2, 3, 4, mas no final, haverá outro 1
// sob o IE, é 1, 1, 3, 4
};
oajax.open ("get", "index.txt", true);
Oajax.send (nulo);
</script>