Compartilhamento de tecnologia

O que é AJAX? Formato de sintaxe nativa? Qual é a diferença entre o jQuery fornecer AJAX empacotado?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ajax nome completo JavaScript e XML assíncronos (assíncrono JavaScript e XML) 

AJAXÉ uma tecnologia de desenvolvimento web para a criação de aplicativos web interativos.A dependência mais central é o objeto XMLHttpRequest fornecido pelo navegador. É esse objeto que permite que o navegador emita. HTTP Solicite e receba HTTP resposta. Obtenha interação com o servidor sem atualizar a página.

Formato de sintaxe AJAX nativo:

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('get','js/index.json',true);
  3. xhr.send();
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState == 4 && xhr.status == 200) {
  6. let text = xhr.responseText;
  7. console.log(text);
  8. let data = JSON.parse(text);
  9. console.log(data);
  10. }
  11. };
Como usar o ajax:
1. Crie o objeto XMLHttpRequest
2. Utilize o método aberto para especificar o endereço, tipo e método a ser solicitado.
3. Use o método send para enviar a solicitação. Se precisar passar parâmetros:
O método get requer a emenda dos parâmetros ao final da URL e a divisão dos parâmetros. Exemplo: 'index.php?name=张三&age=18'
O método post pode colocar parâmetros em send(). Exemplo: send('nome=张三&idade=18')
4. Vincule o evento onreadystatechange para determinar o status de readyState e o status.
5. Receba dados e use-os por meio da conversão JSON.

 

jQuery fornece AJAX empacotado que é mais rápido e adequado para uso em projetos de desenvolvimento. O AJAX nativo é mais fácil e fácil de entender.

Formato de sintaxe jQuery:

  1. $.ajax({
  2. type: "GET",
  3. url: 'js/exercise.json',
  4. data: {},
  5. headers:'',
  6. datatype:'',
  7. async:'',
  8. success: function(result) {
  9. console.log(result);
  10. data = result;
  11. },
  12. Error: function(e) {
  13. console.log(e.status);
  14. console.log(e.responseText);
  15. },
  16. });