O conceito de AJAX básico de uso síncrono e assíncrono

Conceitos básicos de AJAX

Nome completo Ajax : JavaScript assíncrono e XML ( JavaScript assíncrono e XML )

XML é um padrão antigo. O servidor retornará XML antes. Depois de 2010, todos descobriram que JSON é mais conveniente de usar, portanto, os dados JSON são retornados de forma assíncrona em vez de dados XML.

• Ajax não é uma nova linguagem, mas um novo conceito que usa padrões existentes
• Ajax suporta smartphones muito bem

A tecnologia Ajax fará a atualização parcial da página , ou seja, a solicitação HTTP é enviada secretamente, a resposta dada pelo servidor é retornada secretamente e a página é parcialmente atualizada.

Sem atualizar a página, o navegador envia de forma silenciosa e assíncrona solicitações HTTP para o servidor. Depois que o servidor recebe a resposta, ele envia de volta os dados (geralmente dados JSON). Depois que o navegador recebe os dados, ele renderiza a página por meio do DOM

O mecanismo de solicitação AJAX

Uso básico

<script>
    var text = document.getElementById("text");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        // 创建一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        console.log(xhr)
        // 配置这个xhr对象，告诉这个对象要干什么
        xhr.onreadystatechange = function () {
            // 当xhr对象状态为4的时候
            if (xhr.readyState == 4) {
                // 让h1里面的文本为接收到的文本
                text.innerHTML = xhr.responseText
            }
        }
        // 告诉这个对象要用什么请求，请求哪个文件，是否是异步状态
        xhr.open("get", "text.txt", true);
        // 发送请求
        xhr.send(null)
    }
</script>

Objeto XMLHttpRequest

O objeto XMLHttpRequest é um objeto interno do sistema. Com o construtor do sistema interno new XMLHttpRequest (), todas as funções Ajax são encapsuladas no objeto retornado

A primeira etapa de uma solicitação Ajax

var xhr = new XMLHttpRequest();

Este construtor não é compatível com o IE6. O IE6 usa:

var xhr = new ActiveXObject("Microsoft.XMLHTTP")

Método de escrita abrangente para teste de habilidade

// 是能力检测，如果支持XMLHttpRequest就使用XMLHttpRequest否则使用ActiveXObject
if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

Neste ponto, depois que o objeto é criado, todos os serviços Ajax são concluídos pelo objeto xhr

estado pronto

O valor do estado readyState refere-se aos vários estados que AJAX experimentou, não importa se o acesso foi bem-sucedido ou não, ele responderá à etapa, que pode ser entendida como a etapa de execução de AJAX

•  0- (não inicializado) método send () ainda não foi chamado
• 1- (carregando) o método send () foi chamado e a solicitação está sendo enviada
• 2- (Carregamento concluído) O método send () foi executado e todo o conteúdo da resposta foi recebido
• 3- (Interativo) O conteúdo da resposta está sendo analisado
• 4- (Concluído) O conteúdo da resposta é analisado e pode ser chamado no cliente

Quando xhr.readyState envia uma mudança, o evento onreadystatechange é disparado.

Se readyState for 4 , quando toda a análise tiver sido concluída, então nos preocupamos apenas com readyState , é 4 vezes

método aberto

Use xhr.open () para configurar uma solicitação. Existem três parâmetros

• O primeiro parâmetro é o tipo de solicitação, o valor é " get " ou " post ";
• O segundo parâmetro indica o caminho do arquivo da solicitação. Geralmente escrevemos um caminho relativo. Por que é um caminho relativo? Como o Ajax não pode cruzar domínios, o Ajax só pode solicitar arquivos no mesmo servidor (os problemas entre domínios são mencionados separadamente)
• O terceiro parâmetro é um valor booleano, que indica se deve ser usado assincronia. Se verdadeiro , significa que o arquivo é lido de forma assíncrona; falso significa que o arquivo é lido de forma síncrona

método de envio

Use o método send () para fazer uma solicitação

O parâmetro interno de envio é o conteúdo da mensagem upstream. Como a solicitação get não tem mensagem, escreva null

Conceitos síncronos e assíncronos

Ao programar, geralmente há coisas que levam tempo. Por exemplo, nossa E / S de disco, acesso à rede, etc. demoram. Neste momento, existem duas estratégias

O primeiro um é esperar para sempre, espera até que esteja terminado, e esperar até que haja um resultado antes de continuar;    → Sincronizar

O segundo tipo, você pode executar o seguinte programa enquanto espera, se o resultado for retornado, execute a função de retorno de chamada        → assíncrona

As instruções assíncronas devem ter uma função de retorno de chamada , porque é necessário fornecer um ponto de entrada para o programa assíncrono

As instruções assíncronas que foram contatadas até agora são

setInterval(function(){},1000); 		//定时器
setTimeout(funcction(){},2000); 		//延时器
animate({},3000,function(){}) 		// jQuery的动画
xhr.open("get", "text.txt", true); 	//Ajax
xhr.send()

Dê alguns exemplos 

Exemplo simples de sincronização

<script>
    var a = 0;
    while (a != 5) {
        a = parseInt(Math.random() * 10)
        console.log("正在执行，", a)
    }
    console.log("该我执行了")
</script>

Exemplo simples de assincronia

<script>
    var a = 0;
    setInterval(function () {
        a++;
        console.log(a)
    }, 1000)
    console.log("我x先执行了")
</script>