Como enviar solicitação de postagem usando xmlhttprequest em javascript

O XmlHttPrequest é uma API na forma de objetos que são usados ​​para enviar ou receber dados de servidores. O método send () de XmlHttPrequest faz uma solicitação ao servidor. O pedido é assíncrono por padrão, mas também pode ser síncrono. Se a solicitação for síncrona, o método retornará somente quando a resposta chegar de outra forma a resposta é entregue usando eventos.

HMLHTTPREQUEST faz parte do AJAX, que são técnicas de desenvolvimento da web que podem ser usadas para desenvolver aplicativos da web assíncronos. Em páginas da web assíncronas, podemos enviar e receber dados de servidores e atualizar páginas da web sem recarregar as páginas da web.

A solicitação enviada por xmlhttprequest pode ser uma solicitação de get ou postagem. Podemos entrar na maioria dos casos, mas a postagem é mais segura e deve ser usada sempre que tivermos grandes quantidades de dados ou entrada de usuário desconhecida.

Enviando uma solicitação de postagem usando xmlhttprequest

Para enviar uma solicitação através do XMLHTTPREQUEST, precisamos primeiro fazer um novo objeto XmlHttPrequest:

const request = novo xmlHttPrequest ();

Para enviar uma solicitação, precisamos usar os métodos abertos () e send (). O método open () leva três parâmetros que são o método (get/post), URL (localização do arquivo no servidor) e um valor booleano para natureza assíncrona ou síncrona da solicitação:

solicitar.aberto ("post", "file_path", true);

Para uma solicitação síncrona:

solicitar.aberto ("post", "file_path", false);

Com solicitações assíncronas, o JavaScript não aguarda a conclusão da solicitação e pode executar outros scripts enquanto a solicitação estiver sendo concluída. Não é recomendável usar solicitações síncronas, pois o aplicativo da web pode parar completo se o servidor estiver ocupado.

Antes de enviar os dados pelo método send (), também podemos usar o setRequestHeader () para enviar os dados como um formulário HTML com um nome de cabeçalho e um valor de cabeçalho:

solicitar.setRequestHeader (cabeçalho, valor);

Agora podemos enviar dados com um parâmetro opcional que especifica o corpo da solicitação:

solicitar.enviar (corpo);

A propriedade ONREADESTATECHANGE pode ser usada no objeto XMLHTTPREQUEST para executar uma função depois que uma resposta for recebida do servidor:

solicitar.ONREADESTATECHANGE =>
se este.ReadyState == xmlHttPrequest.Feito && isto.status == 200)
// código a ser executado assim que a solicitação é concluída

;

Em suma, uma simples solicitação de postagem assíncrona usando xmlhttprequest será algo assim:

const request = novo xmlHttPrequest ();
solicitar.aberto ("post", "file_path", true);
solicitar.setRequestHeader (cabeçalho, valor);
solicitar.ONREADESTATECHANGE =>
se este.ReadyState == xmlHttPrequest.Feito && isto.status == 200)
// código a ser executado assim que a solicitação é concluída

;
solicitar.enviar (corpo);

Conclusão

O XMLHTTPrequest do Ajax pode ser usado para enviar e receber dados do servidor e atualizar a página da web de acordo com ele. Esta técnica é de ouro puro para os desenvolvedores, pois eles podem fazer tudo isso sem precisar recarregar a página.