Notas Ajax de uso próprio

Aplicação: quantos comentários de nomes de usuário já existem,
atualização assíncrona parcial

1. A relação entre o ip do nome de domínio e a porta

Insira a descrição da imagem aqui

Para obter o nome de domínio, primeiro leia o arquivo hosts, leia o arquivo da relação de mapeamento entre o ip e o nome de domínio, se não houver relação de mapeamento, vá até o servidor de resolução de nome de domínio DNS, consulte o endereço ip correspondente, retorne o endereço para o computador pessoal, e usar este ip para consultar a rota através da tabela do roteador de telecomunicações, encontrar a porta do servidor QQ, distinção de porta como chat, página web, serviço de e-mail
www.baidu.com: 80 web service

2. Acordo

HTTP, HTTPS Hypertext Transfer Protocol
Protocolo de transferência de arquivos FTP Protocolo de transferência de
correio simples SMTP
No protocolo HTTP, você precisa entender aproximadamente: cabeçalho da solicitação, cabeçalho da resposta, corpo da solicitação e corpo da resposta.
O protocolo de comunicação são as regras acordadas com antecedência quando os computadores se comunicam

3 、 PHP

Tanto a declaração de variáveis ​​quanto o uso de variáveis ​​precisam usar o símbolo $ para a
emenda de strings.
Insira a descrição da imagem aqui

O navegador não pode analisar o php
echo seguido apenas pelas strings
print_r e var_dump para
gerar um echo mais complexo json_ encode ($ arr); // Converter a matriz em uma string no formato json
Insira a descrição da imagem aqui

Mecanismo assíncrono, isto é, thread único mais tempo
limite de espera da fila de eventos faz apenas uma coisa, coloca-o na fila e, em seguida, executa-o para baixo.
A fila de eventos armazena funções de retorno de chamada, incluindo algumas funções

Insira a descrição da imagem aqui

Assíncrono, síncrono, não há etapas a seguir.
XML é muito grande, lento na transmissão, muitos metadados e inconveniente para analisar

4. Entre domínios

Mesmo protocolo, nome de domínio e número de porta, política de mesma origem. O Ajax pode obter dados
, então precisamos lidar com a situação de obtenção de dados de origem não iguais? A resposta é sim. Como o acesso à interface front-end a servidores que não são da mesma origem é muito comum, como a obtenção de dados meteorológicos na interface front-end, os dados meteorológicos devem existir nos servidores de outras pessoas, se não pudermos usar ajax. Para acesso , então o que podemos fazer sobre isso? Aqui você precisa usar vários domínios.
Ajax é para acessar os dados do seu próprio servidor, e cross-domain é para acessar os dados dos servidores de outras pessoas.
O atributo src do script não é restringido pela política de mesma origem
. A essência do domínio cruzado ①Introduzindo js externo②Introduzindo php externo③Criar script dinamicamente
Insira a descrição da imagem aqui
Insira a descrição da imagem aqui
Insira a descrição da imagem aqui
Insira a descrição da imagem aqui

Insira a descrição da imagem aqui
Insira a descrição da imagem aqui

Mais flexível no arquivo de código

5 、 jQuery

https://www.w3school.com.cn/jquery/ajax_ajax.asp A
Insira a descrição da imagem aqui
última linha pode ser omitida

Insira a descrição da imagem aqui

O dataType do método ajax de jQuery usará os dados sob o mesmo endereço de origem no caso de texto xml
json.Se for jsonp, o script será criado dinamicamente.

6. Três situações

1 Quatro etapas do Ajax em seu próprio servidor
2 Formato jsonp de interface de terceiros para criar dinamicamente script de domínio cruzado
3 Formato json de interface de terceiros
Entenda, este é o back-end

Insira a descrição da imagem aqui

JSON é um formato de transmissão de dados (usando objetos como modelo, que é essencialmente um objeto, mas a finalidade é diferente, o objeto é para uso local e json é usado para transmissão) json deve usar aspas duplas. A
Insira a descrição da imagem aqui
transmissão é na verdade uma corda
Insira a descrição da imagem aqui

JSON.parse (str); string -> json
JSON.stringify (str); json -> string

A função eval () pode ser usada para executar um trecho de código JS na forma de uma string e retornar o resultado da execução

Se a string executada usando eval () contém {, ela tratará {como um bloco de código.
Se você não quiser analisá-la como um bloco de código, você precisa adicionar um () antes e depois da string
Insira a descrição da imagem aqui
no caso do usuário passes

Insira a descrição da imagem aqui
Insira a descrição da imagem aqui

Reduza a eficiência em dois casos de
rearranjo de refluxo (mais):
excluir nó dom, adicionar
largura de nó dom e mudança de altura, mudança de posição, exibir nenhum—> bloco
offsetWidth offsetLeft
repaint repaint (menos): como cor da fonte (largura e altura da fonte) É um rearranjo)

Antes de o js ser carregado de forma síncrona,
por que a execução do download de js e HTMLcss não pode ser paralela? js irá modificar html e css.
Por que js é single-threaded? Assumindo multi-threading, um thread adiciona nós e um thread exclui nós. O
telefone celular é deixado em branco e carregado com js

Carregue js de forma assíncrona e baixe htmlcss em paralelo
. Desvantagens do carregamento de js: o método da ferramenta de carregamento não precisa bloquear o documento. Se o carregamento de js afetará a eficiência da página, uma vez que a velocidade da rede não é boa, todo o site irá aguardar o js para carregar sem renderização subsequente e outro trabalho.
Algumas ferramentas e métodos precisam ser carregados sob demanda e, em seguida, carregados quando usados, não há necessidade de carregá-los.

Três esquemas de carregamento assíncrono de javascript
1. Adie o carregamento assíncrono, mas ele não será executado até que todos os documentos dom sejam analisados ​​(a árvore é construída, isso deve acontecer antes que a página seja carregada). Apenas o IE pode ser usado. Adiar tem o significado de adiar. O
nome do atributo é igual ao valor do atributo. Basta escrever o nome do atributo.

2. Async é carregado de forma assíncrona, executado após o carregamento, async só pode carregar scripts externos e não pode gravar js na tag do script. W3C. Asychoronous
1 e 2 não bloqueiam a página quando são executados
3. Crie um script, insira-o no DOM e faça callBack após o carregamento. function asyncLoaded

js loading timeline
1. Crie um objeto Document e comece a analisar a página da Web; neste estágio document.readyState = 'loading';
2. Ao encontrar um link css externo, crie um thread para carregar e continue a analisar o documento;
3. Ao encontrar js externo de script, e não há assíncrono, adiar definido, o navegador carrega e bloqueia, espera que js carregue e executa o script e continua a analisar o documento;
4. Ao encontrar js externo de script e definir assíncrono, adiar, o navegador cria um thread e continua a analisar o Documento;
para scripts de atributo assíncronos, o script é executado imediatamente após o carregamento (proíbe de forma assíncrona o uso de document.write (); além disso, pode eliminar o fluxo do documento após todo o documento é carregado ou até mesmo exclui todos)
5. Encontre img, etc., primeiro analise a estrutura dom normalmente, em seguida, o navegador carrega assincronamente o src e continua a analisar o documento;
6. Quando o documento é analisado, document.readyState = 'interativo';
7. Após o documento ser analisado, todos os scripts com adiamento estarão em Seguir a ordem. (Observe a diferença entre adiar e assíncrono);
8. O objeto de documento aciona o evento DOMContentLoaded, que também marca a transição da execução do programa do estágio de execução de script síncrono para o estágio orientado por evento; ↓ Depois que o evento dom é analisado, o corpo da função
Insira a descrição da imagem aqui
é executado apenas no addlistener.
9. Quando todos os scripts assíncronos são carregados e executados, e após o carregamento de img etc. estar completo, document.readyStste = 'complete', e o objeto de janela aciona o evento de carregamento;
10. A partir de então, processe a entrada do usuário, eventos de rede, etc. em um modo de resposta assíncrona;

①Criar objeto de documento ②Analisar ③Carregar execução
Insira a descrição da imagem aqui

Imprima que o carregamento
interativo é analisado e forma uma árvore dom, mas será interativo somente após o final, e a árvore de renderização estará apenas pela metade
Insira a descrição da imagem aqui
.
Insira a descrição da imagem aqui
Insira a descrição da imagem aqui

As duas ou três linhas do console acontecem
em paralelo . Qual é a vantagem de escrever o código js na parte inferior? https://www.jianshu.com/p/454f63169bff
Insira a descrição da imagem aqui

E window.onload espera até que tudo seja carregado antes de executar

JavaScript assíncrono e XML
não precisam atualizar a página atual
Insira a descrição da imagem aqui

API do tipo de objeto XmlHttpRequest

onload tem apenas 4, onreadyState tem 2, 3, 4
Insira a descrição da imagem aqui

Acho que você gosta

Origin blog.csdn.net/s8806479/article/details/115211333
Recomendado
Clasificación