Предварительные требования:

Базовое понимание массивов и объектов JavaScript

Независимо от вашего уровня в JavaScript, будь то класс C или Grandmaster, в какой-то момент вы, должно быть, слышали об AJAX, и, возможно, как и я, это очень часто начинало раздражать. Позвольте мне ответить на ваш первый вопрос:

AJAX (сокращение от Asynchronous JavaScript) - это метод загрузки данных в часть страницы без необходимости обновлять всю страницу. Данные часто отправляются в формате, который называется Нотация объектов JavaScript (или JSON). Возможность загружать новый контент в часть страницы улучшает взаимодействие с пользователем, поскольку пользователю не нужно ждать целиком страница для загрузки, если обновляется только ее часть.

AJAX позволяет запрашивать данные с сервера и загружать их без обновления всей страницы. Серверы обычно отправляют обратно HTML, XML или JSON, поэтому вы узнаете об этих форматах. Хотя я предпочитаю использовать JavaScript, jQuery упрощает создание запросов Ajax и обработку данных, возвращаемых сервером. Некоторые места, где использовался AJAX, - это Live Search и добавление товаров в корзину на сайтах электронной коммерции.

Давайте приступим

Как я сказал ранее, вы можете сделать запрос из файла HTML, XML или JSON, но я буду рассматривать только JSON, извините, XML и HTML ничего личного.

JSON: ОБЪЕКТНАЯ НОТАЦИЯ JAVASCRIPT

Он очень похож на синтаксис объекта Javascript, но не является объектом.

Инициализированные фигурными скобками слева, у нас есть ключи, которые всегда должны быть в двойных кавычках, а значения справа, только строки должны быть в двойных кавычках. Я также включил все типы данных, которые он может принимать. Первое - это строка, второе - число, третье - логическое значение, а последнее - массив.
Итак, g0 вперед и создайте файл JSON с этими или подобными данными в нем. Причина, по которой я добавил так много данных, заключается в том, что в большинстве случаев вам придется перебирать данные в цикле.

Вы также можете переписать это как:

{
   "event": [
        {
 "name": "Passenger", "location": "San Francisco, CA" , "capacity": 270, "booking": true
       },
       {
"name": "Stu Larsen", "location": "Minneapolis, Minnesota" , "capacity": 270 , "booking": true
        }
    ]
}

Получение данных JSON

Эти три строки очень важны, поэтому должны быть добавлены в теги JavaScript или сценария в HTML.

var xhr = new XMLHttpRequest(); 
Add code here
xhr . open ( 'GET’, 'filename.json’, true); 
xhr . send ( null);

Номер один создает объект XMLHttpRequest, а в номере 2 мы используем запрос GET для извлечения данных из нашего файла JSON.

Нам нужно проверить, были ли данные успешно собраны, и когда это произойдет, статус нашего xhr переменная будет 200, а если не сработает, будет 404.

Обычно я пишу функцию загрузки для своего DOM, а затем перехожу к оператору if. Вот заявление:

if(xhr.status === 200) { // If server status was ok

XMLHttpRequest поставляется с различными типами свойств, одно из которых мы уже рассмотрели, это свойство status. Другой - это response и responseText. Это необработанная форма JSON при получении, но она не распознается браузером или JavaScript, поэтому нам необходимо ее отформатировать. Для его форматирования мы будем использовать JSON. parse ’. Вот пример того, как это сделать:

const xmlrequest= JSON.parse(xhr.responseText)

После этого большая часть работы сделана, вы можете инициализировать новую переменную:

let newContent = '';

И к этой переменной мы можем выбрать конкретную деталь и добавить ее.
Помните, что наш объект JSON был назван событиями, поэтому для получения конкретных данных мы должны сделать что-то вроде
newContent = xmlrequest.events [0] .name;
это выведет имя «Пассажир» и все. Глубокое понимание циклов for и структуры массивов поможет вам получить все данные сразу. Я надеюсь, что это поможет и ответит на любые вопросы, которые могут остаться без ответа, пожалуйста, оставьте сообщение. Спасибо!