3.9 KiB
| title | localeTitle |
|---|---|
| AJAX | AJAX |
AJAX
AJAX significa asynchronous JavaScript And XML . Não é uma linguagem de programação. É uma tecnologia para desenvolver aplicativos da Web melhores, mais rápidos e interativos usando HTML, CSS, JavaScript e XML.
- HTML: Hypertext Markup Language (HTML) é usado para definir a estrutura de um aplicativo da Web.
- CSS: CSS (Cascading Style Sheet) é usado para fornecer aparência e estilo a um aplicativo da Web.
- JavaScript: JavaScript é usado para tornar um aplicativo da Web interativo, interessante e amigável.
- XML: Extensible Markup Language (XML) é um formato para armazenar e transportar dados do servidor da Web.
Qual é o significado de assíncrono no AJAX?
Assíncrono significa que o aplicativo da Web pode enviar e receber dados do servidor da Web sem atualizar a página. Esse processo em segundo plano de envio e recebimento de dados do servidor, juntamente com a atualização de diferentes seções de uma página da Web, define a propriedade / recurso Assíncrono do AJAX.
Como o AJAX funciona?
AJAX faz uso de um objeto XMLHttpRequest interno do navegador para solicitar dados de um servidor Web e HTML DOM para exibir ou usar os dados.
Objeto XMLHttpRequest : É uma API na forma de um objeto cujos métodos ajudam na transferência de dados entre um navegador da web e um servidor da web.
DOM HTML : Quando uma página da Web é carregada, o navegador cria um Modelo de Objeto de Documento da página.
Crie um objeto XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Propriedades do objeto XMLHttpRequest:
readystate é uma propriedade do objeto XMLHttpRequest que contém o status do XMLHttpRequest.
- 0: pedido não inicializado
- 1: conexão do servidor estabelecida
- 2: pedido recebido
- 3: solicitação de processamento
- 4: pedido finalizado e resposta pronta
onreadystatechange é uma propriedade do objeto XMLHttpRequest que define uma função a ser chamada quando a propriedade readyState é alterada.
status é uma propriedade do objeto XMLHttpRequest que retorna o número de status de uma solicitação
- 200: "OK"
- 403: "Proibido"
- 404 não encontrado"
Métodos de objeto XMLHttpRequest: Para enviar uma solicitação para um servidor da Web, usamos os métodos open () e send () do objeto XMLHttpRequest.
xhttp.open("GET", "content.txt", true);
xhttp.send();
Crie uma função changeContent () usando JavaScript:
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("foo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
}
Exemplo de AJAX para alterar o conteúdo de uma página da web:
<!DOCTYPE html>
<html>
<body>
<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>
<script>
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("foo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
}
</script>
</body>
</html>
O arquivo content.txt deve estar presente no diretório raiz do aplicativo da Web.