Objeto XMLHttpRequest - JavaScript
O código JavaScript pode interagir com recursos na internet, como sites ou serviços web, basicamente, com servidores. Para a interação do código JavaScript com o servidor, é geralmente utilizada a tecnologia AJAX. Ajax é uma tecnologia para enviar requisições ao servidor a partir do código cliente JavaScript sem recarregar a página. O termo significa Asynchronous JavaScript And XML. Inicialmente, o AJAX foi concebido para interações assíncronas entre cliente e servidor usando dados em formato XML, embora atualmente o formato JSON tenha substituído amplamente o XML.
Um dos métodos para enviar requisições Ajax é utilizando o objeto XMLHttpRequest
const xhr = new XMLHttpRequest(); Para configurar e enviar requisições Ajax, o objeto XMLHttpRequest
abort()getAllResponseHeaders()getResponseHeader(header)open(method, url[, async[, user[, password]]])Essa função aceita cinco parâmetros, dos quais os dois primeiros são obrigatórios:
methodurlasyncusernullpasswordnull
overrideMimeType(mime)send(data)datanullsetRequestHeader(header, value)
Propriedades do XMLHttpRequest
Além dos métodos, o objeto XMLHttpRequest
responseArrayBufferBlobDocumentJSONstringnullresponseType""arraybufferblobdocumentjsontext
responseTextnullresponseXMLDocumentreadyState0XMLHttpRequestopen()1open()234
Verificando essa propriedade, é possível entender em que estágio a requisição está.
statusstatusTexttimeoutwithCredentials
Eventos e Manipuladores de Eventos do XMLHttpRequest
Para acompanhar o estado da requisição, podemos utilizar eventos do XMLHttpRequest
abortonabortprogressonprogressloadonloadloadendonloadenderroronerrorloadstartonloadstarttimeoutontimeoutreadystatechangereadyStateonreadystatechange
Para definir os manipuladores de eventos, podemos usar as seguintes propriedades do XMLHttpRequest
onabortonerroronloadonloadendonloadstartonprogressonreadystatechangeontimeoutupload
Processo de Execução da Requisição Ajax
De modo geral, o processo de execução de uma requisição Ajax com o XMLHttpRequest
Cria-se um objeto XMLHttpRequest:
const request = new XMLHttpRequest();Define-se um manipulador de eventos para o carregamento (por exemplo, através da propriedade
onloadrequest.onload = (event) => { console.log("requisição concluída"); }Inicia-se a requisição HTTP com o método
open()request.open("GET", "http://localhost/hello");Se necessário, configura-se adicionalmente a requisição HTTP. Por exemplo, com o método
setRequestHeader()open()send()request.setRequestHeader("Accept", "text/plain"); // define o cabeçalho para aceitar dados em texto planoEnvia-se a requisição HTTP com a chamada do método
send()request.send();
A seguir, vamos ver um exemplo simples de como realizar uma requisição ao servidor utilizando XMLHttpRequest:
Definindo o Recurso no Servidor
Como o Ajax envolve a interação entre cliente e servidor, precisamos de um recurso de rede ao qual faremos solicitações. Para simular um recurso de rede, usaremos um servidor web local. O servidor web pode ser qualquer um, mas neste caso, utilizaremos a opção mais simples: Node.js. Esta tecnologia é bastante simples, disponível para todos os sistemas operacionais principais e permite usar JavaScript para criar aplicações. No entanto, antes de criar a aplicação, é necessário instalar o Node.js. Não é necessário ter conhecimentos prévios de Node.js, pois todo o código utilizado será explicado detalhadamente. Contudo, ao invés do Node.js, poderia ser utilizada qualquer outra tecnologia de servidor, como PHP, ASP.NET, Python, entre outras, ou um servidor web específico como Apache ou IIS.
Primeiramente, crie uma pasta no disco rígido para os arquivos do servidor web. Por exemplo, no meu caso, a pasta é C:\app. Em seguida, dentro dessa pasta, crie um arquivo para o servidor. Vamos chamá-lo de server.js, com o seguinte código:
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response) {
if (request.url == "/hello") {
response.end("Hello Programício");
} else {
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));
Este é o servidor mais básico, suficiente para a nossa tarefa. Vamos passar rapidamente pelo código:
Primeiro, conectamos os pacotes com a funcionalidade que vamos usar:
const http = require("http"); // para processar solicitações recebidas
const fs = require("fs"); // para ler o arquivo index.html do disco rígido
Para criar o servidor, usamos a função http.createServer()requestresponse
Na função de callback, usamos a propriedade request.urlresponse.end()
if (request.url == "/hello") {
response.end("Hello Programício");
}
Se a solicitação for para outro recurso, enviamos o arquivo index.html
else {
fs.readFile("index.html", (error, data) => response.end(data));
}
Para ler arquivos, usamos a função embutida fs.readFile()index.htmlserver.jsdataresponse.end(data)
Por fim, com a função listen(),http://localhost:3000/
Executando a Requisição Ajax
Agora, na pasta do servidor, definiremos um arquivo simples chamado index.html com o seguinte conteúdo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Programício</title>
</head>
<body>
<script>
const xhr = new XMLHttpRequest();
// Requisição GET para o recurso /hello
xhr.open("GET", "/hello");
// Manipulador de resposta do servidor
xhr.onload = () => {
if (xhr.status == 200) { // se o código de resposta for 200
console.log(xhr.responseText); // exibimos a resposta no console do navegador
} else { // caso contrário, exibimos o texto do status
console.log("Resposta do servidor: ", xhr.statusText);
}
};
xhr.send(); // enviamos a requisição
</script>
</body>
</html> No método xhr.open()
xhr.open("GET", "/hello"); Para acompanhar a conclusão da requisição, definimos um manipulador para o evento loadxhr.onload
xhr.onload = () => {
if (xhr.status == 200) { // se o código de resposta for 200
console.log(xhr.responseText); // exibimos a resposta no console do navegador
} else { // caso contrário, exibimos o texto do status
console.log("Resposta do servidor: ", xhr.statusText);
}
};
Neste caso, o manipulador de eventos é uma expressão lambda. Quando a requisição é concluída, este manipulador é executado. Se a requisição foi processada com sucesso, o servidor envia o código de status 200 por padrão. Como lembramos do código do servidor, ao acessar o endereço "/hello", o servidor envia ao cliente uma string. Para obter essa string, acessamos a propriedade xhr.responseTextxhr.statusText
Finalmente, enviamos a requisição:
xhr.send(); // enviamos a requisiçãoDessa forma, ao carregar esta página web, uma requisição Ajax será feita ao servidor.
Agora, na linha de comando, navegue até a pasta do servidor usando o comando cdnode server.js
C:\app>node server.js Servidor iniciado em http://localhost:3000
Após iniciar o servidor, podemos acessar o endereço http://localhost:3000
Ao acessar o recurso "/hello", o servidor enviará a string "Hello Programício", que poderemos receber na página web.
No exemplo acima, usamos um caminho relativo, mas também poderíamos usar um caminho absoluto especificando o protocolo, endereço do servidor e porta:
xhr.open("GET", "http://localhost:3000/hello"); Em vez de usar o evento loadreadystatechangeXMLHttpRequestreadyState
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Programício</title>
</head>
<body>
<script>
const xhr = new XMLHttpRequest();
// Requisição GET para o recurso /hello
xhr.open("GET", "/hello");
// Manipulador de resposta do servidor
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) { // se a requisição estiver concluída
if (xhr.status == 200) { // se o código de resposta for 200
console.log(xhr.responseText); // exibimos a resposta no console do navegador
} else { // caso contrário, exibimos o texto do status
console.log("Resposta do servidor: ", xhr.statusText);
}
}
};
xhr.send(); // enviamos a requisição
</script>
</body>
</html>Aqui, no manipulador de eventos, primeiro verificamos o estado da requisição. Se o código de estado for 4, processamos a resposta do servidor. A lógica restante é a mesma do exemplo anterior.