Обмен технологиями

Что такое АЯКС? Собственный формат синтаксиса? В чем разница между jQuery, предоставляющим упакованный AJAX?

2024-07-12

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

аякс полное имя Асинхронный JavaScript и XML (асинхронный JavaScript и XML) 

АЯКСЭто технология веб-разработки для создания интерактивных веб-приложений.Основная зависимость — это объект XMLHttpRequest, предоставляемый браузером. Именно этот объект позволяет браузеру выдавать запросы. HTTP Запрос и получение HTTP ответ. Обеспечьте взаимодействие с сервером без обновления страницы.

Собственный формат синтаксиса 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. };
Как использовать аякс:
1. Создайте объект XMLHttpRequest.
2. Используйте открытый метод, чтобы указать запрашиваемый адрес, тип и метод.
3. Используйте метод send для отправки запроса. Если вам нужно передать параметры:
Метод get требует объединения параметров в конец URL-адреса и разделения параметров. Пример: 'index.php?name=张三&age=18'
Метод post может помещать параметры в send(). Пример: send('name=张三&age=18')
4. Свяжите событие onreadystatechange, чтобы определить статус ReadyState и статус.
5. Получите данные и используйте их посредством преобразования json.

 

jQuery предоставляет упакованный AJAX, который быстрее и подходит для использования в проектах разработки. Собственный AJAX проще и понятнее.

Формат синтаксиса 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. });