AJAX - Resposta do Servidor

Cursos optativos

readyState Recomendações de cursos:

onreadystatechange Atributo onreadystatechange

status O atributo mantém o estado do XMLHttpRequest. Manual de mensagens HTTP O atributo define a função executada quando o readyState muda.

propriedades de resposta do servidor método
onreadystatechange O atributo contém o estado do XMLHttpRequest.
readyState

Define a função chamada quando o atributo readyState muda.

  • Salva o estado do XMLHttpRequest.
  • 0: Solicitação não inicializada
  • 1: Conexão do servidor estabelecida
  • 2: Solicitação recebida
  • 3: Tratando a solicitação
status
  • 4: A solicitação foi concluída e a resposta está pronta
  • 200: "OK"
  • 403: "Proibido"

404: "Página não encontrada" Para uma lista completa, acesse
Manual de mensagens HTTP statusText

retorna o texto de status (por exemplo "OK" ou "Not Found") cada vez que

quando o readyState mudar, a função onreadystatechange é chamada. readyState para 4,status para 200 quando a resposta estiver pronta:

Exemplo

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

Experimente Sozinho

Notas:onreadystatechange é acionado cinco vezes (0-4), a cada vez readyState tudo muda.

Uso de função de callback

Uma função de callback é uma função que é passada como parâmetro para outra função.

Se seu site tiver várias tarefas AJAX, você deve criar uma função para executar o objeto XMLHttpRequest e uma função de callback para cada tarefa AJAX.

该函数应当包含 URL 以及当响应就绪时调用的函数。

Exemplo

Essa função deve conter a URL e a função chamada quando a resposta estiver pronta.
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
  function loadDoc(url, cFunction) {
  var xhttp;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      xhttp = new XMLHttpRequest();
    }
  };
  cFunction(this);
  xhttp.send();
}
xhttp.open("GET", url, true);
  function myFunction2(xhttp) {
 } 
function myFunction1(xhttp) {
  function myFunction2(xhttp) {
 }

Experimente Sozinho

// Ação aqui

propriedades de resposta do servidor método
propriedade responseText propriedade
responseXML obter dados de resposta em formato de string

obter dados de resposta em formato XML

métodos de resposta do servidor método
getResponseHeader() descrição
getAllResponseHeaders() retorna informações de cabeçalho específicas retornadas pelo servidor

retorna todas as informações de cabeçalho retornadas pelo servidor

propriedade responseText A propriedade responseText retorna a resposta do servidor na forma de uma string JavaScript, portanto, você pode usá-la assim:

Exemplo

document.getElementById("demo").innerHTML = xhttp.responseText;

Experimente Sozinho

propriedade responseXML

O objeto XML HttpRequest possui um analisador XML integrado.

ResponseXML como um objeto XML DOM retornado pelo servidor.

Usando essa propriedade, você pode obter a respostaanálisepara o objeto XML DOM:

Exemplo

arquivo solicitado music_list.xmle analise a resposta:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

Experimente Sozinho

Você aprenderá mais sobre o XML DOM no capítulo DOM deste tutorial.

Método getAllResponseHeaders()

getAllResponseHeaders() O método retorna todas as informações de cabeçalho da resposta do servidor.

Exemplo

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

Experimente Sozinho

Método getResponseHeader()

getResponseHeader() O método retorna informações específicas do cabeçalho da resposta do servidor.

Exemplo

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Experimente Sozinho