Como fazer uma chamada de Ajax em JavaScript?

JavaScript é uma linguagem de programação de alto nível em que o código é executado linha por linha e é chamado de execução síncrona do código. A desvantagem da execução síncrona é que as próximas linhas de código precisam aguardar a execução completa da linha atual de código. A resposta a esse problema é a execução assíncrona, em uma declaração assíncrona ou uma linha não precisa esperar que o código anterior seja executado completamente. Para alcançar a execução assíncrona de código, o Ajax entra em jogo.

Neste post, veremos o que é Ajax e como fazer uma chamada de Ajax em JavaScript com a ajuda de um exemplo.

O que é Ajax?

O Ajax se tornou popular em 2005, quando o Google o colocou no Google sugerindo e significa JavaScript assíncrono e XML. Xml significa linguagem de marcação extensível usada para criptografar mensagens que podem ser lidas por humanos e máquinas. XML é semelhante ao HTML, mas permite criar e personalizar suas próprias tags. A função do Ajax é transmitir solicitações a um servidor e depois receber dados desse servidor de maneira assíncrona.

A vantagem do Ajax é que ele desempenha sua função sem a necessidade de refrescar a página inteira. Por exemplo, quando você digita algo a procurar na barra de pesquisa do Google, com todas as teclas Pressione a barra de pesquisa faz chamadas de Ajax e o usuário recebe sugestões sem realmente atualizar a página.

Deve -se notar que o Ajax se comunica com o servidor usando o objeto XMLHTTPREQUEST, JavaScript/DOM para fazer solicitações e XML como mecanismo de transmissão de dados.

Ajax é acionado com um evento e depois executa sua funcionalidade, criando primeiro XmlHttPrequest objetar e depois enviar o Httprequest para o servidor onde o Httprequest é processado e é gerada uma resposta que é enviada de volta ao navegador com alguns dados. O navegador processa os dados retornados e atualiza o conteúdo da página usando JavaScript.

Agora que sabemos o que é Ajax e como fazer uma chamada de Ajax usando JavaScript.

Chamada Ajax usando JavaScript

Neste exemplo, primeiro inicializaremos o objeto xmlHttPrequest, que é usado para se comunicar com o servidor ou para simplificar, faça uma chamada de Ajax. O XmlHttPrequest possui muitos métodos internos que podemos usar para manipular ou brincar com o servidor enviando, interrompendo respostas e recebendo dados do servidor. Vamos nos conectar a uma API falsa gratuita para testar nossa chamada de Ajax. O link da API que vamos usar é dado abaixo:

https: // jsonplaceholder.Typicode.coma

O código completo para fazer uma chamada AJAX é dada abaixo:

functionMyfunc ()
// inicializando o objeto xmlhttprequest
varxhttp = newxmlHttPrequest ();
// Estabeleça conexão com API falso
varurl = 'https: // jsonplaceholder.Typicode.com/Todos/1 ';
// Obtenha API do URL
xhttp.aberto ("Get", URL, True);
// Quando a solicitação for bem -sucedida, a função abaixo será executada
xhttp.ONREADESTATECHANGE = function ()
// se a solicitação estiver completa e bem -sucedida
se este.ReadyState == 4 && este.status == 200)
console.log (isso.responseText);


// Enviar pedido
xhttp.enviar();

// Ligue para a função myfunc
myfunc ();

No código acima, primeiro, inicializamos uma função com o nome de myfunc (), E dentro desta função, criamos um XmlHttPrequest objeto. Em seguida, estabelecemos a conexão com uma API usando um URL. Para obter a API, usamos o xhttp.abrir() Método e passe o método HTTP PEGAR e a Url. O método get é usado quando estamos obtendo alguns dados de um servidor e o PUBLICAR O método é usado quando estamos escrevendo ou atualizando dados no servidor.

Agora, quando a solicitação terminará de executar e se for bem -sucedida, o ONREYSTATATECHANGE O evento executará onde estamos usando uma condição de que, se a solicitação estiver concluída e a solicitação foi bem -sucedida, o console registre os dados. O código de status 200 é usado o que significa ok. O 400 Código de status significa erro e o 300 Código de status significa redirecionar para alguma página. O próximo passo é enviar a solicitação usando o método send ().

No final, chamamos a função myfunc () e veremos a seguinte saída no log do console:

O código de status visto nas ferramentas do desenvolvedor é 200, o que significa OK:

Conclusão

Ajax significa JavaScript assíncrono e XML, onde XML é usado para criptografar mensagens que são feitas em formato legível para humanos e máquinas, exceto que o XML permite personalizar suas próprias tags. Ajax permite que você transmita dados para o servidor sem precisar atualizar a página inteira. Ele executa sua operação de forma assíncrona, melhorando a velocidade, pois o código não precisa esperar que o código anterior conclua sua execução. Em JavaScript, o objeto xmlHttPrequest é usado para fazer uma chamada de Ajax.

Neste post, primeiro, discutimos o que é Ajax e depois discutimos como fazer uma chamada de Ajax em JavaScript usando o objeto XmlHttPrequest.