Compartir tecnología

¿Qué es AJAX? ¿Formato de sintaxis nativa? ¿Cuál es la diferencia entre jQuery que proporciona AJAX empaquetado?

2024-07-12

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

Ájax nombre completo JavaScript asincrónico y XML (asincrónico JavaScript y XML) 

AjaxEs una tecnología de desarrollo web para crear aplicaciones web interactivas.La dependencia principal es el objeto XMLHttpRequest proporcionado por el navegador. Es este objeto el que permite que el navegador emita. HTTP Solicitar y recibir HTTP respuesta. Lograr la interacción con el servidor sin necesidad de actualizar la página.

Formato de sintaxis nativa AJAX:

  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. };
Cómo utilizar ajax:
1. Crear un objeto XMLHttpRequest
2. Utilice el método abierto para especificar la dirección, el tipo y el método a solicitar.
3. Utilice el método de envío para enviar la solicitud si necesita pasar parámetros:
El método get requiere empalmar los parámetros al final de la URL y separarlos. Ejemplo: 'index.php?nombre=张三&age=18'
El método de publicación puede poner parámetros en send(). Ejemplo: enviar('nombre=张三&edad=18')
4. Vincule el evento onreadystatechange para determinar el estado de readyState y el estado.
5. Reciba datos y utilícelos mediante la conversión json.

 

jQuery proporciona AJAX empaquetado, que es más rápido y adecuado para su uso en proyectos de desarrollo. AJAX nativo es más fácil de entender y comprender.

Formato de sintaxis de 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. });