хайку:
за неделю я
выучил это и подумал, что могу
поделиться с вами, потому что люблю.

Вот на что похож Интернет с точки зрения внешнего вида. Речь идет о системах, в которых работает наш код, и о том, как они его обрабатывают. Обратите внимание на несколько важных моментов:

  • Всякий раз, когда машина подключена к Интернету, она получает IP-адрес.
  • Ваш компьютер / браузер (iphone / safair / chrome и т. Д.) Отправляет запросы серверу, и сервер отвечает.
  • Сервер похож на ящик с IP-адресом. Чтобы пояснить, сервер похож на компьютерную программу, которая принимает и отвечает на запросы, сделанные другой программой, известной как клиент.
  • Причина, по которой ваш компьютер не является сервером, заключается в том, что на нем не запущено серверное программное обеспечение - но, конечно, есть способы, с помощью которых вы можете заставить свой компьютер работать в качестве сервера (я знаю, бары).

Хорошо, поэтому, когда вы ищете веб-сайт или что-то в этом роде, ваш интернет-провайдер выполняет поиск в DNS (поиск службы доменных имен), подключает вас к службе, и вы получаете ответ. Ваш сервер может вернуть вам что угодно. Он может возвращать файл HTML, файл css и т. Д. Но что действительно круто, так это то, что браузер знает, как отображать ваш файл в зависимости от типа файла и типа содержимого. например (text / html), и по этой причине он анализирует ваш HTML, CSS, javascript или файл изображения так, как это понимает компьютер. Звуки горит да?

Как называются эти HTML, CSS и файлы изображений? Они называются активами. Мы можем описать эти ресурсы как файлы, которые улучшают внешний вид и работу вашего интерфейса. См. Блок кода ниже для практического примера:

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="Front-End Lesson" />
<title>An example</title>
<meta name="description" content="Responsive website using AngularJS - demo page">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- add styles -->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!-- add javascripts -->
<script src="js/app.js"></script>
<script src="js/maincontroller.js"></script>
<script src="node_modules/angulargrid/angulargrid.js"></script>
</head>

Ваш браузер сначала видит ‹! DOCTYPE html› и понимает, что это html-файл, а также понимает, какая это версия html. Затем он проходит через ваши теги ‹head› ‹/head›, читая и обрабатывая всю информацию. Обычно мы помещаем наши таблицы стилей (файлы CSS) в заголовок, чтобы не получить FOUC (вспышка нестилизованного контента) - то, что веб-сайт сначала выглядит некрасиво, прежде чем загружает таблицу стилей, а затем выглядит прилично. Обычно мы помещаем наши скрипты внизу, непосредственно перед закрытием тегов ‹body› ‹/body›, потому что это помогает нашему сайту загружаться быстрее.

Рекомендуется объединять файлы - например, поместить все стили CSS в один файл, а затем поместить весь код javascript в один файл. Таким образом, вам нужно будет запросить с сервера только один раз для загрузки всех стилей и один раз для загрузки Javascript. Это связано с тем, что браузер просматривает наш код построчно и всякий раз, когда видит актив, он делает запрос. И чем меньше запросов будет сделано к серверу, тем лучше. Мне кажется, что для разработки мы можем разбить наши стили и сценарии на разные файлы для упрощения навигации и манипуляций, но когда дело доходит до производства, мы должны объединить. Кроме того, если эти файлы минифицированы в процессе производства, они станут меньше и ими станет еще проще манипулировать. Сократите ваши файлы, дети.

Другой способ запроса ресурсов с сервера - использование Javascript. Javascript делает это с помощью запроса XHR или AJAX. AJAX означает «A синхронный J avaScript A и X ML». Он позволяет обновлять веб-страницы, передавая данные с веб-сервера и обратно. В AJAX этот процесс асинхронный. Это означает, что процессы не зависят от времени и никоим образом не должны учитывать друг друга. Один процесс не должен ждать завершения другого, прежде чем он начнется. Это позволяет нам обновлять различные части веб-страницы без необходимости загружать всю страницу. Таким образом, с Ajax, если вы отправляете запрос на сервер, ему не нужно ждать ответа перед выполнением других запросов.

XHR, что означает XMLHttpRequest, в основном делает то же самое, что и AJAX, но в XHR javascript отправляет запрос в HTTP и ждет ответа XML. Это оба API, поэтому запросы к ним можно отправлять и получать так же, как мы обращаемся к API, о которых я уже писал здесь. Но вот пример таких запросов ниже:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);
    }
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);

Наконец, куки. Cookie - это, по сути, гигантская строка всей информации, которую веб-сайт хранит на вашем устройстве.

хайку:
ты пробыл здесь надолго,
вот тебе печенье.