Resumo das Tecnologias Ajax e Comet

Ajax é uma tecnologia, uma que permite solicitar dados adicionais ao servidor sem descarregar a página, permitindo que os sites tenham uma experiência de usuário melhorada. O núcleo da tecnologia Ajax é o objeto XMLHttpRequest (XHR). Este artigo começa com o XHR, explicando as características da tecnologia Ajax, e depois oferece uma breve compreensão e resumo de tecnologias como CORS e Comet.

Uso básico do XMLHttpRequest

O objeto XMLHttpRequest possui dois métodos comuns: open e send. O método open é usado para iniciar uma solicitação HTTP, mas ele não envia realmente a solicitação HTTP. O método open recebe3parâmetros, que representam o método HTTP da solicitação, a URL da solicitação e se é assíncrono. O segundo método do objeto XHR, send, é usado para enviar a solicitação iniciada pelo open(). O método send recebe1parâmetros, representando os dados do corpo da solicitação HTTP. Se for uma solicitação GET, que não possui dados de corpo, pode ser passada null. Se for uma solicitação POST, deve ser passada os dados a serem POSTados. Abaixo está um exemplo simples, para/api/data para enviar uma solicitação GET, e é enviada de forma assíncrona, ou seja, essa solicitação não bloqueará a execução de outros scripts JS na página.

var xhr = new XMLHttpRequest()
xhr.open("get", "/api/data", true)
xhr.send(null)

Os dados da resposta obtidos são automaticamente preenchidos nas propriedades do objeto XHR, principalmente os seguintes4propriedades:

* responseText: Texto do corpo da resposta
* responseXML: Se o tipo de conteúdo da resposta for "text/xml" ou "application/xml", essa propriedade conterá o documento DOM XML dos dados da resposta
* status: Código de estado HTTP da resposta, geralmente pode ser usado como código de estado HTTP200 é indicador de sucesso
* statusText: Descrição do estado HTTP

XHR objetos têm1propriedades readyState que registram o objeto desde sua criação até a receção dos dados de resposta possíveis5essas condições, os possíveis valores de readyState são os seguintes:

0: Ainda não chama o método open() para inicializar a solicitação

1: Chama o método open() mas ainda não chama o método send()

2: Chama o método send() mas ainda não recebeu a resposta

3: Recebeu parte dos dados da resposta, ainda há dados a serem recebidos

4: Recebeu todos os dados da resposta, ou seja, a resposta terminou e os dados estão completos

ao发生变化时，会触发readystatechange evento, e quando esse evento for acionado, é necessário verificar no manipulador de eventos se o valor de readyState é4seu valor for4aqui, pode-se fazer o processamento subsequente dos dados da resposta. É necessário definir o manipulador de eventos de readystatechange antes de chamar o método open() para garantir a compatibilidade entre navegadores. Abaixo está um exemplo simples.

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
 }
}
xhr.open("get", "/api/data", true)
xhr.send(null)

O objeto XHR fornece o método setRequestHeader() para definir informações de cabeçalho HTTP personalizadas na solicitação, que recebe dois parâmetros, o campo a ser definido e o valor desse campo. Para que a configuração seja bem-sucedida, é necessário chamar setRequestHeader() após invocar open() para iniciar uma solicitação e antes de enviar a solicitação com send(). Após receber a resposta, é possível obter informações de cabeçalho HTTP da resposta através do método getResponseHeader(), que recebe1um parâmetro, nomeadamente o nome do campo a ser obtido. E através de getAllResponseHeaders() você pode obter uma longa string composta por todas as informações de cabeçalho. Abaixo está um exemplo simples.

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
  console.log(xhr.getResponseHeader('SomeKey'))
  console.log(xhr.getAllResponseHeaders())
 }
}
xhr.open("get", "/api/data", true)
xhr.setRequestHeader("SomeKey", "SomeValue")
xhr.send(null)

FormData

XMLHttpRequest 2definiu o tipo FormData como serialização de formulário, cria dados no formato do formulário, facilitando a transmissão via XHR. O método append() do FormData permite adicionar dados diretamente, que recebe dois parâmetros: chave e valor. O construtor do FormData pode não receber parâmetros ou pode receber1um elemento de formulário. Após passar o elemento de formulário, ele utiliza os dados do elemento de formulário para preencher previamente pares de chave-valor no objeto FormData. Abaixo está um exemplo simples.

var form = document.getElementById('myForm')
var data = new FormData(form)
data.append('someKey', 'someValue')
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('post', '/api/upload', true)
xhr.send(data)

Compartilhamento de Recursos entre Domínios

Ao usar XHR para implementar comunicação Ajax, você encontrará um limite, que é a política de segurança de domínio. A política de segurança de domínio limita “mesmo domínio, mesmo porta, mesmo protocolo”, e quando o XHR tenta acessar recursos fora desses limites, ele desencadeia um erro de segurança. CORS (Cross-Resource Sharing de Origem)，compartilhamento de recursos entre domínios, cuja ideia é permitir que o navegador e o servidor se comuniquem usando cabeçalhos HTTP personalizados para determinar o sucesso ou falha da solicitação ou resposta, o que requer que o navegador e o servidor suportem simultaneamente para que o acesso normal seja possível. Atualmente, a maioria dos navegadores já suporta CORS, então a escrita do código é quase igual à de acesso a recursos do mesmo domínio, exceto que a URL é representada como um caminho absoluto. Portanto, a chave para implementar a comunicação entre domínios está no servidor, e como isso é feito não será discutido neste artigo. Abaixo está um exemplo simples de JavaScript no frontend.

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('get', 'http://www.otherserver.com/api/data', true)
xhr.send(null)

JSONP

JSONP (JSON com padding) é um método para aplicar JSON para acesso a recursos a domínios cruzados. JSONP é composto por duas partes: função de callback e dados JSON. Foi dito anteriormente que as solicitações XHR encontram restrições de políticas de segurança de domínio cruzado, mas o script tag em HTML não tem essa restrição, podemos referenciar arquivos js em diferentes domínios através do script tag. JSONP aproveita essa brecha, criando dinamicamente um elemento script, então direcionando o src para URL de outro domínio para carregar recursos de outro domínio, e então processando os dados recebidos através da função de callback. Abaixo está um exemplo simples.

function handler(res) {
 console.log(res)
}
var script = document.createElement('script')
script.src = 'http://www.otherserver.com/api/data/?callback=handler'
document.body.insertBefore(script, document.body.firstChild)

O código acima especifica que o src do elemento script dinamicamente criado é subdomínio de outro domínio./api/data, e especifica a função de callback como handler. Após inserir o script no DOM, ele carregará os dados correspondentes à URL, após o que ele analisará os dados JSON recebidos em um objeto e chamará o handler para processar.

JSONP é um método simples para realizar acesso a domínios cruzados, mas também existem alguns problemas de segurança, como URLs de outros domínios respondendo a solicitações com um código malicioso. JSONP também tem um problema, pois o script tag referencia js, json devido ao suporte do js também pode ser referenciado, então ao solicitar URLs de outros domínios, é necessário confirmar se eles respondem em formato json, não XML.

Comet

Ajax é uma técnica para solicitar dados do servidor a partir de uma página da web, enquanto Comet é o oposto, é uma técnica para empurrar dados do servidor para a página da web, adequada para aplicações com requisitos de tempo real altos. Existem duas maneiras de implementar Comet: polling longo e streaming. Antes de falar sobre o polling longo, vamos falar sobre o polling curto, que é simples, o cliente usa um temporizador para enviar pedidos Ajax ao servidor a cada intervalo de tempo, geralmente pequeno. O polling longo também envolve o cliente enviando pedidos ao servidor continuamente, mas diferentemente do polling curto, o cliente não precisa enviar pedidos conforme intervalos de tempo, mas inicia1um pedido para o servidor após isso, a conexão HTTP entre o cliente e o servidor permanece aberta até que o servidor tenha dados para atualizar, em que caso ele responde os dados através dessa conexão e fecha a conexão HTTP. Após o fechamento, o navegador inicia uma nova conexão para continuar o processo anterior. Em comparação com o polling curto, o polling longo reduz o número de conexões HTTP, no entanto, se a conexão HTTP permanecer aberta por muito tempo, também consome recursos do servidor.

A segunda maneira de implementar Comet é com base no streaming HTTP, onde o cliente envia1um HTTP connection, mantendo essa conexão aberta durante todo o tempo, o cliente obtém periodicamente dados do servidor através dessa conexão para verificar atualizações.

SSE

SSE (Server-Sent Events)-Send Events), eventos enviados pelo servidor, é uma API do navegador para implementar interação Comet, que suporta tanto polling quanto streaming HTTP. A API SSE é usada para criar uma conexão unidirecional com o servidor, onde o servidor pode enviar qualquer quantidade de dados para o cliente. O tipo MIME da resposta do servidor é text/event-stream. Abaixo está um exemplo simples do API JavaScript para SSE.

var source = new EventSource("/api/events")
source.onmessage = function(event) {
 console.log(event.data)
}

Como mostrado no código acima, para reservar um fluxo de eventos no servidor e obter os dados enviados pelo servidor, primeiro crie um objeto EventSource, e em seguida, processe ao acionar o evento message. Os dados enviados pelo servidor são armazenados em formato de string em event.data. O objeto EventSource mantém uma conexão ativa com o servidor, se a conexão for interrompida, ela será reestabelecida automaticamente. Para realmente interromper a conexão, é necessário chamar o método close(). O evento message do EventSource é acionado sempre que receber novos eventos do servidor, além do evento message, ele também tem outros2Os eventos de 'open' e 'error', o evento 'open' é acionado ao estabelecer a conexão, e o evento 'error' é acionado quando não é possível estabelecer a conexão.

Web Sockets

Web Sockets é um canal de comunicação bidirecional e duplamente síncrono com o servidor. Web Sockets não usa o protocolo HTTP, enquanto Ajax e Comet mencionados anteriormente usam o protocolo HTTP. Devido ao espaço, este artigo não discutirá Web Sockets.

Resumo

Ajax realiza a solicitação de dados ao servidor sem carregar a página, melhorando a experiência do usuário na web. A implementação de Ajax com XHR enfrenta restrições de políticas de segurança de domínio, e a solução de problemas de domínio através de CORS requer a colaboração de ambos os lados, browser e servidor. JSONP é uma "pequena técnica" para implementar o acesso transversal, mas também há alguns problemas. Comet expande Ajax, permitindo que o servidor envie dados para o navegador em tempo real, mas, em termos de implementação, seja por polling ou stream HTTP, o navegador envia primeiro a solicitação de conexão ao servidor. A comunicação bidirecional e duplamente síncrona de Web Sockets também tem suas características, e será discutido em outro momento.

Isso é tudo o que há no artigo, esperamos que o conteúdo deste artigo ajude a aprendizagem ou trabalho de alguém, e também esperamos que mais pessoas apoiem o tutorial Yell!

Declaração: O conteúdo deste artigo foi extraído da Internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w.3Aviso: Este conteúdo foi extraído da Internet, pertence ao respectivo proprietário, foi carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w, fornecendo provas relevantes. Acontece que a conteúdo suspeito será imediatamente removido deste site.