Prefácio

Este artigo refere-se e cita "Sharp JQuery" para fornecer uma explicação detalhada do jQuery-Ajax e seus principais métodos.

1. Vantagens e Desvantagens do Ajax

1. Vantagens do Ajax

a. Não requer nenhum plug-in de navegador
Não requer nenhum plug-in de navegador e pode ser suportado pela maioria dos navegadores. Os usuários só precisam permitir JavaScript no. navegador Basta executar.

b. Excelente experiência do usuário.
A maior vantagem é que os dados podem ser atualizados sem atualizar a página inteira, o que permite que a aplicação Web responda rapidamente às operações do usuário.

c. Melhorar o desempenho dos programas Web
Em comparação com o modo tradicional, a maior diferença no desempenho do modo Ajax é a forma de transmissão dos dados. No modo tradicional, o envio dos dados é realizado através do formulário (de), e os dados O que se obtém é obter o conteúdo de toda a página atualizando totalmente a página web. O modo Ajax envia apenas os dados que precisam ser enviados ao servidor por meio do objeto XMLHttpRequest, ou seja, são enviados sob demanda. .

d. Reduzir a carga sobre servidores e banda larga
O princípio de funcionamento do Ajax é equivalente a adicionar uma camada intermediária entre o usuário e o servidor, que assíncroniza as operações do usuário e as respostas do servidor. Ele cria um mecanismo Ajax no cliente e transfere parte do trabalho sobrecarregado pelo servidor da maneira tradicional. o cliente, o que facilita o processamento dos recursos do cliente e reduz a carga nos servidores e na banda larga.

2. Deficiências do Ajax

a. Suporte insuficiente do navegador para o objeto XMLHttpRequest.
Uma das deficiências do Ajax vem primeiro do navegador. Somente o IE5.0 e versões posteriores suportam o objeto XMLHttpRequest (a maioria dos clientes neste estágio são Mozilla, Netscape e outros navegadores que suportam XMLHttpRequest posteriormente). normalmente em vários navegadores, os programadores devem despender muito esforço de codificação para levar em conta as diferenças entre os navegadores, para que os aplicativos Aajx possam ser melhor compatíveis com vários navegadores.

b. Destruir as funções normais dos botões avançar e voltar do navegador
No Ajax, as funções dos botões avançar e voltar serão inválidas embora certos métodos (adicionar pontos de ancoragem) possam ser usados ​​para permitir que os usuários usem o avanço. e voltar, mas comparado ao método tradicional, é muito mais problemático. Para os usuários, eles geralmente se deparam com essa situação quando clicam em um botão para acionar uma interação Ajax. e então eles habitualmente clicam no botão Voltar, o resultado mais indesejável ocorreu. O navegador retornou à página anterior e o conteúdo obtido através da interação do Ajax desapareceu completamente.

c. Suporte insuficiente para mecanismos de pesquisa
Geralmente, os mecanismos de pesquisa usam rastreadores para pesquisar e organizar bilhões de dados massivos na Internet. No entanto, os rastreadores ainda não conseguem entender esses códigos JavaScript estranhos e, portanto, as alterações no conteúdo da página causadas pelo Ajax tornam os sites. usar Ajax em desvantagem em comparação com sites tradicionais na promoção de rede.

d. Falta de ferramentas de desenvolvimento e depuração
JavaScript é uma parte importante do Ajax. Atualmente, devido à falta de boas ferramentas de desenvolvimento e depuração de JavaScript, muitos desenvolvedores web têm medo de JavaScript. Isso torna a escrita de código Ajax ainda mais difícil, muitos desenvolvedores web agora estão acostumados. Ela tem medo de usar ferramentas visuais e escrever código sozinha, o que afetou até certo ponto a aplicação do Ajax por todos.

2. Instale o ambiente Web ---

O método AppServ Ajax precisa interagir com o servidor Web, portanto requer um ambiente AppServe é um kit de ferramentas para instalar o ambiente.

Endereço de download: https://www.appserv.org/en/download/Installation

: Pressione o botão Avançar continuamente em uma única máquina e insira informações comuns, como endereço do site, endereço de e-mail, senha, etc. A porta padrão é 80.

Digite "http://localhost:80" no navegador e a seguinte interface aparecerá, indicando que a instalação foi bem-sucedida.

Uso: Copie o programa escrito para a pasta AppServwww instalada e digite "http://loaclhost:80/nome do arquivo do programa" na barra de endereço para acessá-lo.

3. Função de operação jQuery Ajax

A biblioteca jQuery possui um conjunto completo compatível com Ajax. As funções e métodos internos nos permitem carregar dados do servidor sem atualizar o navegador.

https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

Na foto acima,

O método .Ajax() é o método de nível mais baixo em jQuery, e o segundo nível é .load().

$Ométodo.Ajax()éométododenívelmaisbaixoemjQueryeosegundoníveléload(),.$

Método .post(), camada 3 é

$.post(),aterceiracamadasãoosmétodos.getScript\left(\right)$ e $.getJSON().

1. O método $.ajax()

publicou anteriormente um artigo "Explicação detalhada do método jquery ajax-ajax()

Para obter detalhes, clique em: https://juejin.cn/post/7019188063704350756

2. O load()". O método

é diferente de outros métodos O método, o mais simples e comumente usado, pode carregar código HTML remoto e inseri-lo no DOM.

Parâmetros de

da estrutura

(url, [dados], [retorno de chamada])

Aplicação

1) Carregando documentos HTML

Primeiro construa um arquivo HTML (test.html) que é carregado pelo método load() e anexado à página. O código HTML é o seguinte:

.


	
	Teste


	

		
Olá, mundo!
		

			
C
			
C#
			
C++
			
Java
			
.Net
			
JSP
			
ASP
			
PHP
			
Python
			
ios
			
Android
			
Javascript
			
CSS
			
HTML
			
XML
			
VUE
			
Reagir
			
Angular
			
SQL
		
	

Em seguida, crie uma nova página em branco (main.html), incluindo o botão que aciona o evento Ajax e o id "content"

	
	
	


	
	Clique para carregar
	
Conteúdo carregado:
	

Em seguida, escreva o código jQuery. Após o carregamento do DOM, chame o método load clicando no botão para carregar o conteúdo em test.html no elemento com o id "content"

.
	$(função(){
		// método de carregamento (url) $("#btn1").click(function(){
    		$("#content1").load("test.html")//Carrega o conteúdo de test.html na página atual quando clicado })
	})

os resultados da execução

:

Depois de carregar:

2) Filtre os documentos HTML carregados.

O exemplo acima é carregar todo o conteúdo em test.html no elemento com o id "content" em main.html. seletor) para alcançar.

Nota: Há um espaço entre o URL e o seletor.

Por exemplo, para carregar apenas o conteúdo da tag p em test.html, o código é o seguinte:

Executar resultados

3) Modo de transferência

O modo de transferência do método load() é especificado automaticamente com base nos dados dos parâmetros. Se nenhum parâmetro for passado, o método GET será utilizado, caso contrário, será automaticamente convertido para o método POST;

// método load(url,fn), sem transferência de parâmetros, método GET $("#btn1").click(function(){
    $("#content1").load("test.html", function(){
    	//código
    })
})

// método load(url,fn), existem parâmetros para passar, método POST $("#btn1").click(function(){
    $("#content1").load("test.html", {nome: "peiqi", idade: "18"}, function(){
    	//código
    })
})

4) Parâmetros de retorno de chamada

Para operações que devem ser continuadas após a conclusão do carregamento, o método load() fornece uma função de retorno de chamada (callback). Esta função possui 3 parâmetros, representando "conteúdo retornado da solicitação" e "status da solicitação". object", o código é o seguinte:

$("#content1").load("test.html p", function(responseText, textStates, XMLHttpRequest) {
   //responseText: Conteúdo retornado pela solicitação //textStates: Status da solicitação: erro de sucesso notmodified timeout 4 types //XMLHttpRequest: objeto XMLHttpRequest})

; contanto que a solicitação seja concluída (completa), a função de retorno de chamada (retorno de chamada) será acionada.

3.

Método .get() e

O método .get ( ) e o método .post ()

load() geralmente obtêm arquivos de dados estáticos do servidor web. Se precisar passar alguns parâmetros para a página no servidor, você pode usar.

Método .get() e

Método .get ( ) e método .post ( ) (ou método $.ajax()).

Perceber:

Método .get() e

O método .get ( ) e o método .post () são funções globais em jQuery.

1) Método $.get()

O método $.get() usa o método GET para fazer solicitações assíncronas.

Estrutura

$.get(url, [data], [callback], [type])

parâmetros

O aplicativo

abaixo é um trecho de código HTML para uma página de comentários, que apresenta o uso do método $.get(). O código é o seguinte:

métodos 
Comentários
Nome:
Conteúdo:
Deixe uma mensagem

A página gerada por este código é mostrada na figura:

Após preencher seu nome e conteúdo, você poderá enviar seu comentário.

a. Primeiro, você precisa determinar o endereço URL solicitado.

$("#btn2").click(função(){
    $.get("test.php", parâmetro de dados, função de retorno de chamada)
})

b. Antes de enviar, passe o nome e os valores do conteúdo para o plano de fundo como dados de parâmetro.

$("#btn2").click(função(){
    $.get("test.php", {"nomedeusuário":$("#nome").val(), "content":$("#content2").val()}, função de retorno de chamada)
})

c. Se o servidor receber os dados passados ​​e retornar com sucesso, os dados retornados poderão ser exibidos na página por meio da função de retorno de chamada.

A função de retorno de chamada do método $.get() possui apenas dois parâmetros

function(){
  //dados: O conteúdo retornado pode ser documentos XML, arquivos json, fragmentos XHML, etc. //textStatus: Status da solicitação: erro de sucesso notmodified timeout 4 types}

d. O parâmetro representa o status da solicitação. E a função de retorno de chamada só pode ser chamada quando os dados são bem-sucedidos (load() é chamado independentemente do sucesso ou da falha).

// $.get() método$("#btn2").click(function(){
    $.get("test.php", {"nomedeusuário":$("#nome").val(),"content":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus=="sucesso"){ //sucesso
    		//código
    		$(dados).appendTo("#msg")
    	}
    },
    "html")//tipo
})

e. Resultados da operação

2) O método $.post()

tem a mesma estrutura e uso do método $.get(), mas ainda existem as seguintes diferenças:

a. O método GET passará os parâmetros após a URL e os dados serão navegados. O servidor o armazena em cache, enquanto o método POST é enviado ao servidor como o conteúdo da entidade da mensagem HTTP (ou seja, encapsulado no corpo da solicitação). Pode-se observar que a segurança do método POST é maior que a do método POST. Método GET.

b. O método GET tem um limite de tamanho para os dados transmitidos (geralmente não maior que 2 KB), enquanto o método POST não tem limite de tamanho em teoria.

c. Os dados transferidos pelo método GET e pelo método POST são obtidos de forma diferente no lado do servidor. No PHP, os dados no modo GET podem ser obtidos com "_GET[]", enquanto os dados no modo POST podem ser obtidos com " _POST[]". Ambos os métodos podem ser obtidos usando "$_REQUEST[]".

d. A velocidade de transmissão do método GET é maior que a do método POST.

Como todos os dados enviados pelos métodos POST e GET podem ser obtidos por meio de $_REQUEST[], desde que a função jQuery seja alterada, o programa pode ser alternado entre solicitações GET e solicitações POST. O código é o seguinte:

// $. método post() $("#btn2").click(function(){
	$.post("test.php", {"nomedeusuário":$("#nome").val(),"content":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus=="sucesso"){ //sucesso
    		//código
    		$(dados).appendTo("#msg")
    	}
    },
    "html")//tipo
})

Além disso, quando o método load() for passado com parâmetros, o método POST será utilizado para enviar a solicitação. Portanto, você também pode usar o método load() para completar a mesma função. O código é o seguinte:

$("#btn2").click(function(){.
	$("#msg").load("teste.php", {
    	"nome de usuário":$("#nome").val(),
        "conteúdo":$("#content2").val()
    });
})

4.

Método .getScript() e

$Método.getScript()emétodo.getJson\left(\right)1)Método\$.getScript$

)

Às vezes, é completamente desnecessário obter todos os arquivos JavaScript necessários quando a página é carregada pela primeira vez. Embora você possa criar dinamicamente

$(document.createElement("script")).attr("src", "test.js").appendTo("head");
//Ou $("