Ajax (programação) - Ajax (programming)

"AJAX" redireciona aqui. Para outros usos, veja Ajax (desambiguação) .

JavaScript assíncrono e XML
Apareceu pela primeira vez Março de 1999
Extensões de nome de arquivo .js
Formatos de arquivo JavaScript
Influenciado por
JavaScript e XML

Ajax (também AJAX / eɪ dʒ æ k s / ; abreviação de " Asynchronous JavaScript e XML ") é um conjunto de desenvolvimento web técnicas que utiliza várias tecnologias web no lado do cliente para criar assíncronos aplicações web . Com o Ajax, os aplicativos da web podem enviar e recuperar dados de um servidor de forma assíncrona (em segundo plano), sem interferir na exibição e no comportamento da página existente. Ao desacoplar a camada de intercâmbio de dados da camada de apresentação, o Ajax permite que as páginas da web e, por extensão, os aplicativos da web, alterem o conteúdo dinamicamente sem a necessidade de recarregar a página inteira. Na prática, as implementações modernas geralmente utilizam JSON em vez de XML.

Ajax não é uma tecnologia, mas sim um conceito de programação. HTML e CSS podem ser usados ​​em combinação para marcar e estilizar informações. A página da web pode ser modificada por JavaScript para ser exibida dinamicamente - e permitir que o usuário interaja com as novas informações. O objeto XMLHttpRequest integrado é usado para executar Ajax em páginas da web, permitindo que sites carreguem conteúdo na tela sem atualizar a página. Ajax não é uma nova tecnologia, nem é uma nova linguagem. Em vez disso, são as tecnologias existentes usadas de uma nova maneira.

História

Do início a meados da década de 1990, a maioria dos sites era baseada em páginas HTML completas. Cada ação do usuário exigia que uma nova página completa fosse carregada do servidor. Esse processo era ineficiente, conforme refletido pela experiência do usuário: todo o conteúdo da página desaparecia e, em seguida, a nova página aparecia. Cada vez que o navegador recarregava uma página devido a uma alteração parcial, todo o conteúdo precisava ser reenviado, embora apenas algumas das informações tivessem sido alteradas. Isso colocou uma carga adicional no servidor e tornou a largura de banda um fator limitante do desempenho.

Em 1996, a tag iframe foi introduzida pelo Internet Explorer ; como o elemento de objeto , ele pode carregar ou buscar conteúdo de forma assíncrona. Em 1998, a equipe do Microsoft Outlook Web Access desenvolveu o conceito por trás do objeto de script XMLHttpRequest . Ele apareceu como XMLHTTP na segunda versão da biblioteca MSXML , fornecida com o Internet Explorer 5.0 em março de 1999.

A funcionalidade do controle Windows XMLHTTP ActiveX no IE 5 foi posteriormente implementada pelo Mozilla Firefox , Safari , Opera , Google Chrome e outros navegadores como o objeto XMLHttpRequest JavaScript. A Microsoft adotou o modelo XMLHttpRequest nativo a partir do Internet Explorer 7 . A versão ActiveX ainda é compatível com o Internet Explorer, mas não com o Microsoft Edge . A utilidade dessas solicitações HTTP de fundo e tecnologias assíncronas da Web permaneceu bastante obscura até que começou a aparecer em aplicativos online de grande escala, como Outlook Web Access (2000) e Oddpost (2002).

O Google fez uma ampla implantação de Ajax compatível com os padrões para vários navegadores com Gmail (2004) e Google Maps (2005). Em outubro de 2004 Kayak.com 's versão beta pública foi um dos primeiros em larga escala usos de e-commerce do que seus desenvolvedores na época chamado de 'o xml http coisa'. Isso aumentou o interesse no Ajax entre os desenvolvedores de programas da web.

O termo AJAX foi usado publicamente em 18 de fevereiro de 2005 por Jesse James Garrett em um artigo intitulado Ajax: Uma Nova Abordagem para Aplicativos da Web , com base em técnicas usadas nas páginas do Google.

Em 5 de abril de 2006, o World Wide Web Consortium (W3C) lançou o primeiro rascunho de especificação para o objeto XMLHttpRequest em uma tentativa de criar um padrão Web oficial . O último rascunho do objeto XMLHttpRequest foi publicado em 6 de outubro de 2016, e a especificação XMLHttpRequest agora é um padrão vivo .

Tecnologias

O modelo convencional para um aplicativo da Web versus um aplicativo que usa Ajax

O termo Ajax passou a representar um amplo grupo de tecnologias da Web que podem ser usadas para implementar um aplicativo da Web que se comunica com um servidor em segundo plano, sem interferir no estado atual da página. No artigo que cunhou o termo Ajax, Jesse James Garrett explicou que as seguintes tecnologias são incorporadas:

Desde então, entretanto, houve uma série de desenvolvimentos nas tecnologias usadas em um aplicativo Ajax e na definição do próprio termo Ajax. XML não é mais necessário para troca de dados e, portanto, XSLT não é mais necessário para manipulação de dados. JavaScript Object Notation (JSON) é frequentemente usado como um formato alternativo para intercâmbio de dados, embora outros formatos, como HTML pré-formatado ou texto simples, também possam ser usados. Uma variedade de bibliotecas JavaScript populares, incluindo JQuery, incluem abstrações para auxiliar na execução de solicitações Ajax.

Exemplos

Exemplo de JavaScript

Um exemplo de uma solicitação Ajax simples usando o método GET , escrito em JavaScript .

get-ajax-data.js: 

// This is the client-side script.

// Initialize the HTTP request.
var xhr = new XMLHttpRequest();
// define the request
xhr.open('GET', 'send-ajax-data.php');

// Track the state changes of the request.
xhr.onreadystatechange = function () {
	var DONE = 4; // readyState 4 means the request is done.
	var OK = 200; // status 200 is a successful return.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // 'This is the output.'
		} else {
			console.log('Error: ' + xhr.status); // An error occurred during the request.
		}
	}
};

// Send the request to send-ajax-data.php
xhr.send(null);

send-ajax-data.php: 

<?php
// This is the server-side script.

// Set the content type.
header('Content-Type: text/plain');

// Send the data back.
echo "This is the output.";
?>

Obter exemplo

Fetch é uma nova API JavaScript nativa. De acordo com a documentação do Google Developers , "Fetch torna mais fácil fazer solicitações da web e lidar com respostas do que com o XMLHttpRequest mais antigo." 

fetch('send-ajax-data.php')
    .then(data => console.log(data))
    .catch (error => console.log('Error:' + error));

ES7 assíncrono / exemplo de espera 

async function doAjax() {
    try {
        const res = await fetch('send-ajax-data.php');
        const data = await res.text();
        console.log(data);
    } catch (error) {
        console.log('Error:' + error);
    }
}

doAjax();

Fetch depende de promessas de JavaScript .

A fetchespecificação difere Ajaxnas seguintes maneiras significativas:

  • A promessa retornada de fetch() não rejeitará no status de erro HTTP, mesmo se a resposta for um HTTP 404 ou 500. Em vez disso, assim que o servidor responder com cabeçalhos, a promessa será resolvida normalmente (com a okpropriedade da resposta definida como falsa se a resposta não está no intervalo 200–299) e será rejeitada apenas em caso de falha de rede ou se algo impediu a conclusão da solicitação.
  • fetch() não enviará cookies de origem cruzada a menos que você defina a opção de inicialização de credenciais . (Desde abril de 2018. A especificação mudou a política de credenciais padrão para same-origin. O Firefox mudou desde 61.0b13.)

Veja também

Referências

links externos