Primeiro, vamos esclarecer basicamente o que é Ajax.
Ajax é um acrônimo para JavaScript assíncrono + XML segundo o MDN Web Docs. Sendo mais "curto e grosso", o ajax é utilizado para fazer requisições ao servidor em segundo plano, ou seja, sem a necessidade de uma nova renderização (atualização) da página atual.
A artigo que você leu é muito bom mas acredito que seja um pouco exagerado. Não acho que se deve "abominar" o uso do ajax, principalmente quando ele atende as suas necessidades e as do cliente. E nesse artigo, o autor aborda o uso exagerado de requisições ajax que com certeza é uma ponderação válida.
Creio que o ideal para você é aprender como funciona esse tipo de requisição com o javascript "puro" e depois de enteder cada linha, analisar como é a forma usando uma biblioteca, que neste caso é a JQuery.
// Exemplo de requisição GET sem biblioteca
var ajax = new XMLHttpRequest(); // XMLHttpRequest é uma API Javascript para criar requisições AJAX
// Define o tipo de requisição e a URL
ajax.open("GET", "https://api.myjson.com/bins/p3d8t");
// Envia a requisição
ajax.send();
// Cria um evento para receber o retorno.
ajax.onreadystatechange = function() {
// Caso a propriedade readState seja 4 e o status seja 200, requisição foi um sucesso
if (ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText; // Obter o texto da resposta fornecida pelo servidor
// Retorno do Ajax
console.log(data);
}
}
As explicações para cada método e propriedades que foram utilizadas
para a requisição podem ser encontradas na documentação do método XMLHttpRequest.
Agora veja a mesma requisição AJAX feita acima mas utilizando a biblioteca JQuery.
$.get('https://api.myjson.com/bins/p3d8t', function(data) {
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Essa é uma das principais vantagens de utilizar bibliotecas durante o desenvolvimento. Após entender o funcionamento, escolha a melhor opção para resolver o seu problema.