Tutorial Básico de AJAX

XMLHttpRequest do AJAX

Introdução ao AJAX

AJAX permite atualizar o conteúdo da página web "assincronamente" trocando dados com o servidor web de background.

Isso significa que você pode atualizar partes da página web sem recarregar toda a página.

Usando AJAX, você pode:

Enviar dados para o servidor web (no background)
Ler dados do servidor web (após o carregamento da página)
Atualizar a página web sem recarregá-la

Exemplo AJAX

O seguinte código mostra um exemplo básico de AJAX:

AJAX mudará este texto

Executar código

Explicação do exemplo AJAX

O exemplo acima inclui os seguintes componentes:

Código HTML:

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX mudará este texto</h2>
　　<button onclick="fetchDoc()" type="button">Enviar solicitação</button>
　　</div>
　　
　　</html>

O código HTML contém um<div>parte (<h2>e<button>)

a<DIV>parte usada para exibir informações do servidor.

a<button>Chamar uma função (ao ser clicado).

Esta função solicita dados do servidor web e os exibe (sem recarregar a página):

Função fetchDoc():

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& este.status ===　200) {}}
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

O que é AJAX?

AJAX é “Asynchronous Javascript And XML” (JavaScript e XML Assíncronos).

O AJAX não é uma linguagem de programação, é uma tecnologia usada para acessar servidores web a partir de páginas da web.

O AJAX permite que você envie solicitações para o servidor sem recarregar a página.

O AJAX pode se comunicar com o servidor, trocar dados e atualizar a página sem recarregar a página.

O AJAX pode enviar e receber várias formats de informações, incluindo JSON, XML, HTML e arquivos de texto.

Em resumo, é usar o objeto XMLHttpRequest para se comunicar com o servidor.

As duas principais funcionalidades do AJAX permitem que você execute as seguintes operações:

Enviar solicitações para o servidor sem recarregar a página
Receber e processar dados do servidor

Como o AJAX funciona?

Para executar a comunicação AJAX, o JavaScript usa um objeto XMLHttpRequest para enviar uma solicitação HTTP para o servidor e receber dados como resposta.

Todos os navegadores modernos (Chrome, Firefox, IE)7 +Safari, Opera) todos suportam o objeto XMLHttpRequest.

A figura a seguir ilustra como a comunicação AJAX funciona:

Passos da operação AJAX

Ocorreu um evento na página web (ou seja, a página foi carregada ou um botão foi clicado)
O objeto XMLHttpRequest é criado pelo JavaScript
O objeto XMLHttpRequest envia a solicitação para o servidor web
O servidor processa a solicitação
O servidor envia a resposta de volta para a página web
A resposta é lida pelo JavaScript
O HTML DOM é atualizado pelo JavaScript

O que você vai aprender

No próximo capítulo deste tutorial, você aprenderá:
Como criar o objeto XMLHttpRequest
Como enviar dados para o servidor web (em segundo plano)
Como ler dados do servidor web (em segundo plano)
Como atualizar a página web sem recarregar a página

XMLHttpRequest do AJAX