1. As principais razões para usar Ajax
1. Para obter uma melhor experiência do usuário através de aplicativos Ajax apropriados
2. Para transferir parte do trabalho anterior sobrecarregado pelo servidor para o cliente, o que é benéfico para o poder de processamento ocioso do cliente e reduz o servidor; e carga de largura de banda, atingindo assim o objetivo de economizar espaço do ISP e custos de aluguel de largura de banda.
2. Citar
Jesse James Garrett, o primeiro proponente do conceito de Ajax, acredita que Ajax é a abreviatura de JavaScript assíncrono e XML. Ajax não é uma linguagem ou tecnologia nova. Na verdade, são várias tecnologias combinadas de uma certa maneira para desempenhar suas respectivas funções em uma colaboração comum. Inclui:
· Usar XHTML e CSS para padronizar a apresentação;
· Usar DOM Realizar exibição e interação dinâmicas;
·Use XML e XSLT para troca e processamento de dados;
·Use XMLHttpRequest para leitura assíncrona de dados;
·Finalmente, use JavaScript para vincular e processar todos os dados.
O princípio de funcionamento do Ajax é equivalente a adicionar uma camada intermediária para realizar operações do usuário de forma assíncrona; e respostas do servidor assíncronas. Nem todas as solicitações do usuário são enviadas ao servidor. Algumas verificações e processamento de dados são deixados para o próprio mecanismo Ajax. Somente quando for determinado que novos dados precisam ser lidos do servidor, o mecanismo Ajax enviará a solicitação ao servidor. em seu nome.
3. Visão geral
Embora Garrent tenha listado 7 tecnologias constituintes do Ajax, eu pessoalmente acredito que o núcleo do chamado Ajax é apenas JavaScript, XMLHTTPRequest e DOM. Se o formato de dados usado for XML, o XML também pode ser adicionado (o Ajax inicia no lado do servidor) O retornado. os dados podem estar no formato XML ou outros formatos, como texto).
No método de interação antigo, o usuário aciona uma solicitação HTTP ao servidor, e o servidor a processa e então retorna uma nova página HTHL ao cliente. Sempre que o servidor processa uma solicitação enviada pelo cliente, o cliente só pode esperar ocioso. , e mesmo que seja apenas uma pequena interação e precise apenas obter um simples dado do servidor, uma página HTML completa deve ser retornada, e o usuário precisa perder tempo e largura de banda para reler a página inteira todas as vezes .
Depois de usar o Ajax, os usuários sentem que quase todas as operações responderão rapidamente, sem esperar pelo recarregamento da página (tela branca).
1. XMLHTTPRequest
Um dos maiores recursos do Ajax é que ele pode transmitir ou ler e gravar dados no servidor sem atualizar a página (também conhecido como atualizar a página sem atualizar. Esse recurso se beneficia principalmente do objeto XMLHTTPRequest do componente XMLHTTP). Dessa forma, o aplicativo de desktop só pode trocar dados com o servidor sem ter que atualizar a interface todas as vezes ou enviar o trabalho de processamento de dados ao servidor todas as vezes. Isso não apenas reduz a carga no servidor, mas também acelera o tempo de processamento. . Velocidade de resposta e menor tempo de espera do usuário.
A Microsoft foi a primeira a aplicar XMLHTTP. O IE (IE5 e superior) expande suas funções permitindo que os desenvolvedores usem componentes XMLHTTP ActiveX dentro de páginas da Web. Os desenvolvedores podem transferir ou recuperar dados diretamente do servidor sem navegar a partir dos dados atuais. . Esse recurso é importante porque ajuda a reduzir o incômodo das conexões sem estado e também pode aumentar a velocidade do processo, eliminando a necessidade de baixar HTML redundante. A Mozilla (Mozilla 1.0 e superior e NetScape 7 e superior) respondeu criando sua própria classe de proxy XML herdada: a classe XMLHttpRequest. O Konqueror (e o Safari v1.2, também um navegador baseado em KHTML) também suporta o objeto XMLHttpRequest, e o Opera também suporta o objeto XMLHttpRequest em sua v7.6x+ e versões posteriores. Na maior parte, o objeto XMLHttpRequest é muito semelhante ao componente XMLHTTP e os métodos e propriedades são semelhantes, exceto que um pequeno número de propriedades não é suportado.
Aplicação de XMLHttpRequest:
·Aplicação do objeto XMLHttpRequest em JS
var xmlhttp = new XMLHttpRequest()
·Aplicação do componente XMLHTTP da Microsoft em JS
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP =
new ActiveXObject(Msxml2.XMLHTTP) );
Método de objeto XMLHttpRequest
/**
* Instanciação de XMLHttpRequest entre navegadores
*/
if (typeof XMLHttpRequest == 'indefinido') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for ( var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("Nenhum componente XML instalado! ")
}
}
function createXMLHttpRequest() {
try {
// Tentativa de criá-lo "do jeito Mozilla"
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
// Acho que não - agora do jeito do IE
if (window.ActiveXObject ) {;
retornar novo ActiveXObject(
getXMLPrefix() + "
.XmlHttp
"
)
;
Objeto XMLHttpRequest
| método | descrição |
| abort() | anula a solicitação atual |
| getAllResponseHeaders() | retorna os cabeçalhos completos como uma string |
| getResponseHeader("headerLabel") | retorna um único rótulo de cabeçalho como uma string |
| open("method","URL"[,asyncFlag[ , "userName"[, "password"]]]) | Defina o URL de destino, método e outros parâmetros da solicitação pendente |
| send(content) | envie a solicitação |
| setRequestHeader("label", "value") | defina o cabeçalho e envie-o juntos com a solicitação |
XMLHttpRequest objeto atributo
| atributo | descrição |
| readyState | |
| para | mudança de estado |
| Status do objeto (inteiro): 0 = não inicializado 1 = Leitura 2 = Ler 3 = Interagindo 4 = Completa | |
| a versão de texto dos dados retornados pelo processo do servidor | responseText |
| O objeto de documento XML compatível com DOM retornado pelo | processo do servidorresponseXML |
| retornado | pelo servidor, como: 404 = "Arquivo não encontrado", 200 =. |
| de "sucesso" | |
| retornado pelo servidor | statusText | . Informações de texto
2. JavaScript
JavaScript é uma linguagem de programação amplamente usada em navegadores. Ela foi menosprezada como uma linguagem imprópria no passado (é realmente chata de usar) e é frequentemente usada por alguns. gadgets e pegadinhas vistosos ou validação de formulário tediosa. Mas o fato é que se trata de uma verdadeira linguagem de programação, possui padrões próprios e é amplamente suportada em diversos navegadores.
3.
Modelo de objeto de documento DOM.
DOM é um conjunto de APIs para arquivos HTML e XML. Ele fornece uma representação estrutural do arquivo, permitindo alterar seu conteúdo e visibilidade. Sua essência é estabelecer uma ponte de comunicação entre as páginas web e Script ou linguagens de programação.
Todas as propriedades, métodos e eventos que os desenvolvedores WEB podem operar e criar arquivos são representados por objetos (por exemplo, documento representa o objeto "arquivo em si", objeto tabela representa o objeto tabela HTML, etc.). Esses objetos podem ser acessados a partir do Script pela maioria dos navegadores atuais.
Uma página web construída com HTML ou XHTML também pode ser considerada como um conjunto de dados estruturados. Esses dados são incluídos no DOM (Document Object Model).
4. XML
O mecanismo Ajax mencionado por Jesse James Garrett é na verdade um aplicativo JavaScript relativamente complexo usado para processar solicitações de usuários, ler e gravar servidores e alterar o conteúdo do DOM.
O mecanismo Ajax do JavaScript lê as informações e reescreve o DOM interativamente. Isso permite que as páginas da Web sejam reconstruídas de maneira transparente, ou seja, altere o conteúdo da página após o download da página. mas para tornar uma página web verdadeiramente dinâmica, é necessária não apenas interação interna, mas também aquisição de dados externos. No passado, permitíamos que os usuários inserissem dados e alterassem o conteúdo da página web através do DOM, mas agora, XMLHTTPRequest permite. permite-nos ler e gravar dados no servidor sem recarregar a página, minimizando a entrada do usuário.
A comunicação de rede baseada em XML não é nova. Na verdade, tanto o FLASH quanto o JAVA Applet têm um bom desempenho. Agora, esse tipo de interação rica também está disponível em páginas da web. Ele é baseado em tecnologias padronizadas e amplamente suportadas e não requer plug-ins. ou plug-ins.
Ajax é uma transformação dos aplicativos WEB tradicionais. No passado, o servidor gerava uma página HTML a cada vez e a retornava ao cliente (navegador). Na maioria dos sites, pelo menos 90% de muitas páginas são iguais, como: estrutura, formato, cabeçalho, rodapé, anúncios, etc. a página para o cliente é um desperdício invisível, seja o tempo do usuário, largura de banda, consumo de CPU, ou largura de banda e espaço alugado pelo ISP a um preço alto. Se calculado com base em páginas, apenas alguns K ou dezenas de K podem não ser impressionantes, mas para um grande ISP como o SINA, que gera milhões de páginas todos os dias, pode-se dizer que é uma perda enorme. AJAX pode servir como camada intermediária entre o cliente e o servidor para lidar com a solicitação do cliente e enviar a solicitação ao servidor conforme necessário. Você pode obter o que usa e quanto usa, para que não haja redundância e desperdício de dados. ., reduzindo a quantidade total de dados baixados e não há necessidade de recarregar todo o conteúdo ao atualizar a página. Apenas a parte que precisa ser atualizada pode ser atualizada. Em comparação com o método de recarregamento e processamento em segundo plano puro, o usuário espera. o tempo é reduzido e o desperdício de recursos é minimizado, com base em tecnologias padronizadas e amplamente suportadas, e sem necessidade de plug-ins ou miniaplicativos baixados, o Ajax é vantajoso para usuários e ISPs.
Ajax separa a interface e a aplicação na WEB (também pode ser dito que separa dados e apresentação). No passado, não havia uma fronteira clara entre os dois. reduz a necessidade de interação de pessoal não técnico com a página. A modificação causa erros de aplicação WEB, melhora a eficiência e é mais adequada ao sistema de publicação atual. Você também pode transferir parte do trabalho anterior sobrecarregado pelo servidor para o cliente, o que é benéfico para o poder de processamento ocioso do cliente.
4.
O surgimento da aplicação do conceito Ajax abriu o prelúdio para a era da atualização de páginas sem atualização, e tem a tendência de substituir o uso do envio de formulário (formulário) no desenvolvimento web tradicional para atualizar páginas web, o que pode ser considerado como um marco. Mas o Ajax não é aplicável em todos os lugares e seu escopo de aplicação é determinado por suas características.
Um exemplo de aplicação é uma aplicação Ajax para menus em cascata.
Nosso processamento anterior de menus em cascata foi o seguinte:
Para evitar o recarregamento da página causado por cada operação no menu, não utilizamos o método de chamar o background a cada vez, mas lemos todos os dados do menu em cascata de uma vez. e escrito no array, e então usar JavaScript para controlar a apresentação de seu subconjunto de itens com base nas operações do usuário. Isso resolve o problema de velocidade de resposta da operação, não recarregando a página e evitando solicitações frequentes ao servidor, mas se. o usuário não responde ao menu Se você operar ou operar apenas parte do menu, parte dos dados lidos se tornará dados redundantes e desperdiçará os recursos do usuário, especialmente quando a estrutura do menu é complexa e a quantidade de dados é grande ( por exemplo, o menu tem (Existem muitos níveis, e cada nível tem centenas de itens), esta desvantagem é ainda mais proeminente.
Se o Ajax for aplicado neste caso, o resultado será melhorado:
ao inicializar a página, apenas lemos todos os dados do primeiro nível e os exibimos. Quando o usuário opera um dos itens do menu do primeiro nível, o resultado será. ser enviado ao usuário através do Ajax. O background solicita todos os dados do submenu de segundo nível ao qual pertence o item atual de primeiro nível. Se continuar solicitando um item no menu de segundo nível já apresentado, ele então solicita todos. os dados de todos os menus de terceiro nível correspondentes ao item de menu de segundo nível operado, e assim por diante... Desta forma, você pode obter tudo o que usar e quanto precisar. de dados, reduzindo a quantidade total de downloads de dados, e não há necessidade de recarregar todo o conteúdo ao atualizar a página, basta atualizar a parte que precisa ser atualizada Em comparação com o processamento e recarregamento em segundo plano, reduz o tempo de espera do usuário. e minimiza o desperdício de recursos.
Além disso, como o Ajax pode chamar dados externos, ele também pode realizar a função de agregação de dados (com a autorização correspondente, é claro), como a versão BETA do leitor RSS online lançado pela Microsoft em 15 de março, também pode facilitar; o desenvolvimento de alguns dados abertos Alguns de seus próprios aplicativos, como alguns novos aplicativos de busca de livros usando dados da Amazon.
Resumindo, Ajax é adequado para aplicações WEB com muitas interações, leitura frequente de dados e boa classificação de dados.
1. Reduza a carga do servidor. Como o conceito fundamental do Ajax é "obter dados sob demanda", ele pode reduzir ao máximo a carga causada por solicitações redundantes e o impacto no servidor
2. Atualizar a página sem atualizar, reduzindo o tempo de espera real e psicológico do usuário;
primeiro, "pressione O modo" dados necessários "reduz a quantidade real de dados lidos. Para dar uma analogia muito vívida, se o método de sobrecarga retornar à origem de um ponto final e depois para outro ponto final, então o Ajax é baseado em um ponto final. Alcance outro ponto final;
em segundo lugar, mesmo se você quiser ler dados relativamente grandes, não há necessidade de ter uma tela branca como RELOAD, porque o Ajax usa XMLHTTP para enviar solicitações para obter dados de resposta do servidor, sem recarregar os dados. página inteira. Use Javascript para operar o DOM e finalmente atualizar a página, para que durante o processo de leitura dos dados, o usuário não se depare com uma tela branca, mas com o status original da página (ou você pode adicionar uma caixa de prompt LOADING para permitir o usuário entende o status do processo de leitura de dados), somente quando todos os dados são recebidos, a parte correspondente do conteúdo é atualizada, e essa atualização também é instantânea e quase imperceptível para o usuário. Resumindo, os usuários são muito sensíveis. Eles podem sentir sua consideração por eles. Embora seja improvável que tenha resultados imediatos, isso irá acumulando aos poucos sua dependência do site no coração dos usuários.
3. Melhor experiência do usuário
4. Também pode transferir parte do trabalho anterior sobrecarregado pelo servidor para o cliente, que pode ser usado pelo poder de processamento ocioso do cliente, reduzindo a carga no servidor e na largura de banda e economizando espaço e largura de banda; custos de aluguel;
5, Ajax pode chamar dados externos
6. É baseado em tecnologia padronizada e amplamente suportada e não requer plug-ins ou miniaplicativos baixados
7. Ajax separa a interface e a aplicação na WEB (também pode ser; dito separar dados e apresentação);
8. É uma situação ganha-ganha para usuários e ISPs.
6. Problemas com Ajax
1. Alguns dispositivos portáteis (como telefones celulares, PDAs, etc.) ainda não suportam bem o Ajax
2. Motores Ajax feitos com JavaScript, compatibilidade com JavaScript e DeBugs são dores de cabeça
; recarregar, porque as alterações da página não são tão óbvias quanto atualizar e recarregar, por isso é fácil causar problemas aos usuários - os usuários não têm certeza se os dados atuais são novos ou foram atualizados. As soluções existentes incluem: Os prompts de localização relevantes e atualização de dados; as áreas são projetadas para serem mais óbvias e os usuários são avisados após atualizações de dados, etc.
4. O suporte para streaming de mídia não é tão bom quanto FLASH e Java Applet;