Verstehe, wie Websites funktionieren, ein Blick in den request/response (Anfängerfreundlich!)

1. Verstehe, wie die Websites funktionieren, ein Einblick in den Anforderung/Beantworten (für Anfänger:: Hallo und herzlich willkommen zu verstehen Websites. In diesem Kurs werden wir einen Blick darauf werfen, wie Websites mit Ihrem Computer sprechen und wie Ihr Computer mit einer Website spricht. Wir werden heute keinen Code schreiben, aber wir werden Anfragen und Antworten untersuchen, was im Grunde die Kommunikation zwischen Ihrem Computer und einer Website ist und wie es Dateien von einem Server herunterlädt und sie dann zusammen und zeigt Ihre Website an. Hallo, mein Name ist Caleb Pauline. Ich bin ein Senior Web Developer. Ich bin ein erstklassiger Beschichtungslehrer. Ich habe mehr als 300 Tausend Studenten beigebracht, wie man kodiert. Und heute werde ich dein Lehrer sein. Am Ende dieses Kurses lernen Sie, wie Sie Ihre Anfragen untersuchen und Ihre Antworten in Ihrem Browser finden. So werden Sie in der Lage sein zu sehen, wie Ihr Computer oder wie Ihr Browser mit einer Website kommuniziert, was eine Website an Ihren Computer zurücksendet. Wenn Sie das interessiert, empfehle ich Ihnen, diesen Kurs zu nehmen. Dies ist sehr, sehr wichtige Informationen für alle, die in der Web-Entwicklung sind, auch wenn Sie brandneu sind, es ist wirklich gut zu verstehen, wie das funktioniert. Wenn Sie also daran interessiert sind, treten Sie bitte ein und wir beginnen sofort. 2. Was ist ein Browser?: Okay, zuerst, werfen wir einen Blick darauf, was ein Browser ist. Also, was ist ein Browser? Ein Browser ist ein Programm, das eine Website nach Informationen fragt. Diese Anfrage wird als Anfrage bezeichnet, und wenn die Anfrage abgeschlossen ist, kehrt die Website zurück und Antwort genannt Antwort. Es ist sehr ähnlich, wenn du das Telefon annimmst und deine Mutter oder deinen Vater oder deinen besten Freund anrufst, sie nehmen ihr Ende des Telefons auf, sie sagen hallo, das ist die Antwort. Jetzt hat die Antwort Daten in Form von HTML, CSS und JavaScript. Sie können auch Dinge wie Bilder und, und andere Formen von Daten einschließen. Aber wir werden nicht wirklich zu viel in das anfassen, was das ist. Aber wirklich müssen Sie nur wissen, dass die Antwort diese Sache hat , die als Payload bezeichnet wird und Dateien zurücksendet. Und dann lädt Ihr Computer all diese kleinen Dateien herunter. Und Ihr Browser ist das Programm, das sie liest, sie ganz zerlegt und Ihre schöne Website macht. Jetzt, wenn es Dinge zusammenfügt, nennt man das Rendern. Also wird es versuchen, die endgültige Ausgabe zu rendern. Jetzt gibt es vier große Browser. Es gibt tatsächlich Tausende und Tausende von Browsern da draußen. Aber es gibt vier große. Google Chrome, Mozilla, Firefox, Apple Safari und Microsoft Edge. Aber wieder, es gibt Hunderte, wenn nicht Tausende von kleineren, weniger bekannten Web-Browsern zur Verfügung. Ihr Telefon könnte sogar mit einem anderen kommen, das nicht eins von diesen vier ist. 3. Was tut dein Browser?: Was macht Ihr Browser? So sammelt Ihr Browser Informationen und seine Aufgabe ist es, sie anzuzeigen. Wissen, wann es Informationen sammelt, ist eigentlich nur die Frage des Servers, hey, kann ich einige Informationen haben? Der Server sagt, ja, Sie können diese Informationen haben, sendet die Dateien auf Ihrem Computer als lädt sie herunter oder Ihr Browser wird sie herunterladen, sie alle zusammen in einer schönen Art und Weise und Kick startet den ganzen Code. Und diese Art von schafft Ihre nette interaktive Website. Nicht alle Browser sind gleich. Das sollte eigentlich nicht sagen, nicht jetzt. Nicht alle Browser sind gleich. Was in einem Browser funktioniert, funktioniert möglicherweise nicht notwendigerweise in einem anderen Browser. Also, wenn Sie jemals auf einer Website stolpern, die gebrochen scheint und sagen wir Google Chrome wird versuchen, es in Firefox zu öffnen oder umgekehrt, oder Apple Safari oder Microsoft Edge, versuchen Sie es einfach in einem anderen Browser, weil einige, manchmal Die Rendering-Engines hinter den Kulissen funktionieren nicht genau so, wie sie sollen, aber sie tun es nicht immer. Die Aufgabe Ihres Browsers besteht auch darin, zu kommunizieren. Es ist verantwortlich für die Kommunikation Slash-Transaktionen zwischen Ihrem Computer und der Website. Und wieder, es ist, als ob Sie das Telefon abholen und Ihren besten Freund wählen. Sie müssen warten, bis sie tatsächlich ans Telefon gehen, hallo sagen, und dann können Sie eine Unterhaltung beginnen. 4. Was sind Webanfragen?: Was sind Webanfragen? Anfragen sind einfach nach Informationen gefragt. Web-Anfragen sind also, wenn Sie Informationen von einer Website anfordern, Sie fragen einfach nach den Dateien, die Sie benötigen, um die Website anzuzeigen. Und oft wird dies als Händedruck bezeichnet. Werfen wir einen Blick darauf, wie das funktioniert. Es beginnt, indem Sie auf eine Website wie Google.com gehen. Ihr Browser fragt Google.com dann nach den Daten, die er benötigt, um die Seite gut anzuzeigen. Jetzt wird dieser ganze Prozess als Anfrage bezeichnet. Und tatsächlich, wenn es Ihnen die Informationen zurücksendet, heißt es Antwort, aber wir werden das in ein wenig berühren. Anfragen können auch Größen haben, so oder eine Anfrage kann buchstäblich jede Größe haben. Google.com ist eine kleine Anfrage. Oder wirklich jede Website. Wir gehen nur auf die Website und sagen: Hey, können wir die Dateien haben und dann bestimmt die Website, was sie zurückschicken soll. Aber dass diese erste Anfrage, erste Handschlag ist in der Regel ziemlich klein. Wenn Sie nun etwas wie Instagram.com laden, wird jedes Bild eine neue Anfrage sein. Wenn Sie also durch Ihren Instant-Feed scrollen, wird es immer mehr Bilder laden und das wird jedes Mal eine neue Anfrage sein. Oder wenn Sie auf Facebook.com gehen, jeder Kommentar, den Sie machen, jeder Link, den Sie klicken, sind alle Anfragen. Das ist eine andere Art von Anfrage. Und wieder kommen wir in ein wenig hinein. Aber all diese werden Requests genannt. Jedes Mal, wenn Sie ein kleines Stück Daten an eine Website senden, um entweder um Informationen zu bitten oder sogar um Löschung von Informationen zu bitten, Informationen zu aktualisieren oder Informationen zu speichern. sind alle Anfragen und diese werden als Anforderungstypen bezeichnet. So kommt unsere Anfrage manchmal in Form von Informationsfragen. Und dies wird als GET-Anfrage bezeichnet, aber es kann auch in Form von Aufforderung zum Speichern von Informationen sein. Technisch gesehen werden diese Post-Anfragen genannt. Es gibt auch eine Löschanforderung zum Löschen von Informationen und eine Put- oder Patch-Anfrage zum Aktualisieren von Informationen. Und wieder einmal ist ein normaler Handshake nur eine GET-Anfrage und das ist die häufigste. Und das kommt tatsächlich in RESTful APIs. Jetzt, wenn Sie an API interessiert sind, habe ich einen Kurs auf RESTful APIs. Fühlen Sie sich frei zu gehen und werfen Sie einen Blick auf das nach diesem Kurs. Jetzt eine Sache zu bemerken, dass alles über das Internet reisen muss. Kleinere Anfragen und Antworten bedeuten weniger Bandbreite. Es bedeutet, dass es durch das Internet reisen kann, durch die Drähte, die auf der ganzen Welt über Ihr WLAN gesendet werden, ein kann , dass viel schneller dienen, weil es viel kleiner ist und es ist eine Menge wie diese. Denken Sie an das letzte Mal, als Sie eine Datei mit einem Gigabyte herunterladen mussten , anstatt eine Datei mit einem Kilobyte herunterzuladen, oder? Die eine Gigabyte Datei dauert eine Weile. Je nach Internetgeschwindigkeit kann es mehrere Stunden dauern. Aber bei einer Kilobyte-Datei, auch wenn Sie ziemlich langsames Internet haben, ist immer noch ein sehr, sehr schneller Download. Anfragen sind genau das Gleiche. 5. Der The: Der Anforderungslebenszyklus. Werfen wir einen Blick darauf, wie dies beginnt, wenn Sie nach Informationen von einer Website fragen, Sie tun tatsächlich viel mehr als das. Wenn Sie fragen, sagen wir, meine Website, Caleb dot IO für Informationen, gibt es die Domain-Mapping dahinter. Caleb dot IO zeigt also tatsächlich auf eine IP-Adresse und diese IP-Adresse verbindet sich mit meinem Server. Sie fordern also nicht tatsächlich Informationen direkt von Caleb dot IO an. Es ist nur eine Art Maskierung, so dass Sie sich keine IP-Adressen merken müssen. Und dann, wie es endet. Der Server wird meine Anfrage oder Ihre Anfrage annehmen. Es wird verstehen, was es ausgeben soll und sendet Dateien wie HTML, CSS, JavaScript-Bilder, all das andere Zeug, das Ihre Website gut aussehen lässt in dieser Sache, die eine Antwort genannt wird. Schließlich lädt der Browser diese Dateien herunter und speichert sie auf Ihrem Computer. Und wenn es mehr als einmal heruntergeladen wurde, wird es manchmal nur die alten, alten, alten Dateien verwenden und das wird als Cache bezeichnet. Es wird dann alle diese Dateien zusammenfassen und Ihren Inhalt rendern. 6. Was sind die server: Was unser Server sowieso antwortet. Eine Antwort tritt also auf, wenn der Server auf Ihre Webanfrage antwortet. Eine Antwort geschieht, nachdem die Anfrage gestellt wurde, so dass es immer Anfrage und dann Antwort geht. Und Antworten können so ziemlich jedes Format haben, aber normalerweise sind es HTML, CSS, JavaScript oder Nur-Text oder JSON für wie eine API. Wenn Sie nicht wissen, was eine API ist, ist das in Ordnung. Du kannst das bisschen einfach ignorieren. Wenn Sie jedoch ein wenig mehr über APIs lernen möchten, gibt es einige Fälle, in denen eine API, auch bekannt als Anwendungsprogrammierschnittstelle, XML- oder JSON-formatierte Daten sendet. Nun ist dies normalerweise, es ist irgendwie wie reiner Text. Text. Es ist nicht wirklich spezialisiert. Markieren Sie zu viel. Es hat einige Regeln, aber nicht zu viele Regeln. Aber das Schöne daran ist, dass es sich um einfache Texte handelt. Das bedeutet, dass es nicht viel zu interpretieren gibt. Und Ihr Browser kann damit viel schneller umgehen. Oder Ihr Server könnte damit sogar viel schneller umgehen und dann HTML, CSS, JavaScript rendern , was auch immer er tun muss. Wissen Sie oft Javascript oder eine Server-Programmiersprache wie Python wird diese API-Antworten behandeln. Auch wenn Sie nicht zu viel über APIs wissen, wenn Sie brandneu in der Webentwicklung sind. Mach dir jetzt keine Sorgen um diesen Teil. Als Beispiel, wenn Sie Instagram.com laden, stellen Sie eine Anfrage an die Website, um die ursprünglichen Daten zu laden. Wenn Sie nach unten scrollen, lädt es mehr und mehr Bilder dynamisch, so dass die erste Anfrage immer klein und schnell bei o sein kann, es zeigt Ihnen wirklich nur oder versucht, wie zwei oder drei Bilder zu bekommen, aber es wird nicht 1000 Bilder speichern oder es ist nach 1000 Bildern fragen, weil das wirklich langsam geladen werden wird. Ihre Anfrage wird eine ziemlich kleine Anforderungsnutzlast sein. Und diese Antwort wird auch eine ziemlich kleine Antwort-Nutzlast sein. Und das bedeutet nur, dass Instagram.com zum Beispiel wirklich, wirklich schnell geladen werden kann. Wenn Sie nun die Seite nach unten scrollen, werden Sie sehen, dass mehr in Bildern angezeigt werden und manchmal ist es so schnell, Sie nicht einmal bemerken, dass zweite Anfrage , dritte Anfrage, vierte Anfragen, wenn Sie mehr auf einem -Website oder Sie scrollen auf Instagram nach unten, normalerweise ein API-Endpunkt, der JSON oder XML zurückgibt. Und der Grund dafür ist, dass beide viel leichter sind als HTML. Dann liest Ihr Browser die JSON-Antwort. Zum Beispiel übernimmt JavaScript und es heißt, oh, ich muss mehr Fotos anzeigen. Und es erstellt dynamisch Ihre HTML-Struktur für Sie und fügt sie der Seite hinzu. Und sobald es auf der Seite hinzugefügt wird, übernimmt Ihr Browser dann für JavaScript und sagt: Oh, ich muss eine weitere Anfrage stellen. Und dann wiederholt sich der Zyklus. Der Server sagt, Oh, es gibt eine Anfrage für dieses bestimmte Bild, dienen diesem Bild. Jetzt zum Thema Bilder und andere Assets wie Bilder, ist jede wahrscheinlich seine eigene Anfrage. Der Browser erstellt eine neue Anforderung für jede Imagedatei, die heruntergeladen werden soll. Der Server sendet eine Anforderung mit den Bilddaten. Und wieder, Ihr Browser zeigt dann dieses Bild an. Obwohl technisch gesehen gibt es Möglichkeiten, Antworten für eine schnellere einmalige Payload-Antwort zusammenzubündeln . Auf diese Weise können Sie den Server einfach einmal fragen und er sendet alle Bilder gleichzeitig. Es muss also nicht eins nach dem anderen gehen. Und wieder, das macht diese Antwort-Nutzlast nur schneller. Und der Grund dafür ist, dass, wenn Sie daran denken, zu und von der Arbeit oder ins Krankenhaus zu und von Ihrem Haus zu fahren . Es gibt eine Menge Reisezeit im Internet. Und wenn Sie also die Reisezeit reduzieren und einfach alle Bilder in einer Last tragen können, dann wird viel schneller sein. 7. HTML, CSS und JavaScript interpretieren: Interpretieren von HTML, CSS und JavaScript. Dies sind also die häufigsten Antwort-Datentypen. Wenn Sie also eine Anfrage stellen und eine Antwort von einem Server erhalten, erhalten Sie wahrscheinlich HTML, CSS und JavaScript. Der Auftrag Ihres Browsers besteht darin, jede dieser Dateien herunterzuladen. Aber der Browser hat auch diese Dinge genannt Engines. Und so haben diese Engines bestimmte Regeln für HTML. Sie haben unterschiedliche Regeln für CSS und sie haben unterschiedliche Regeln für JavaScript. Wenn Ihr Browser denkt, dass er eine JavaScript-Datei öffnet, verwendet er die JavaScript-Engine, um Ihre Websites zu lesen und zu interpretieren und interaktiv zu machen. Ebenso mit CSS und HTML erkennt der, dass es eine CSS-Datei gibt, eine Cascading Stylesheet-Datei. Das heißt, es wird versuchen, das zu interpretieren und Ihre Website gut aussehen zu lassen. Und so haben sie verschiedene Zwecke. Sobald alle Dateien so gut wie möglich heruntergeladen werden, wird es sie alle zusammenfassen. Und wieder wird es versuchen, Ihre Website anzuzeigen oder es wird ein Rendering durchführen. Aber irgendwann wird JavaScript den Browser übernehmen , nur weil der Browser einen bestimmten Zweck hat, aber JavaScript hat auch seinen eigenen Zweck. Also, nachdem die erste Antwort in Ihrem Browser gerendert oder angezeigt wird , wird JavaScript die meiste Zeit übernehmen, nicht die ganze Zeit. Und manchmal gibt es eine Zusammenarbeit zwischen JavaScript und Ihrem Browser. Javascript kann den Browser anweisen, mehr Anfragen im Flyby zu stellen , dynamisch Links, Bilder und andere Assets zu Ihrer Seite hinzuzufügen oder indem direkt mit dem Browser kommunizieren und neue Anfragen erstellen. So kann JavaScript eine eigene Anfrage stellen, aber Ihr Browser kann auch Anfragen an. 8. Deine Anfordernisse und Antworten anzeigen: Anzeigen Ihrer Anfragen und Antworten. Um also jede Art von Anfrage und Antwort anzuzeigen, benötigen Sie einen modernen Browser. Ich empfehle Chrome oder Firefox dafür. Und dann werde ich in nur einer Sekunde zeigen, wie ich alle Antworten von einer Website wie Google.com sehen kann. Du wirst also genau aufpassen wollen , weil du das im nächsten Video ausprobieren wirst. Also werde ich einfach rauskommen und zu Google.com gehen. Und so ist dies nur die normale Google-Website. Und was ich tun kann, ist mit der rechten Maustaste gehen Sie zu Inspect. Und Sie werden diese Optionen hier sehen. Jetzt könnte dein ein heller Farbmodus sein, also habe ich einen dunklen Modus eingeschaltet, und dies könnte tatsächlich auf der rechten oder der linken Seite erscheinen. Aber so oder so werden Sie hier eine Art dieser Optionen sehen. Für uns. Wir wollen zum Netzwerk-Tab gehen und wir werden hier nichts sehen. Und ich habe mein ungefiltertes CSS bereits. Lasst uns weitermachen und das von allen filtern. Und wenn du nichts siehst, ist das völlig in Ordnung. Dies wird alle Anfragen verarbeiten, die jetzt von dem Zeitpunkt an eingehen, an dem Sie dies jederzeit schließen. Also lassen Sie uns voran und klicken Sie einfach auf Aktualisieren. Und wir können sehen, wie all diese Anfragen hereinkamen. Und so gibt es eine Menge verschiedener Dinge hier drin. Wir haben ein Dokument, das HTML ist. Wir müssen P&G, das ist ein Bild. Web P, das ist auch ein Bild. Wir haben hier einen einfachen Text. Wir haben einen Text, HTML, wir hatten auch hier ein Skript. Wir haben alle möglichen Sachen, die wir sehen können , dass ich das vielleicht etwas größer machen werde. Also, wenn wir ein Bild sehen wollten, konnten wir mit der rechten Maustaste klicken und dann in neuer Registerkarte öffnen. Und das ist das Bild, das es geladen hat. So wissen wir jetzt, dass Google eine Anfrage für sein eigenes Logo gestellt hat. Werfen wir einen Blick auf eine andere hier. Klicken Sie mit der rechten Maustaste in einer neuen Registerkarte öffnen. Und das nennt man ein Sprite. Es ist also ein großes Bild mit all diesen kleinen Symbolen. Und dann verwendet es CSS, um die Bilder wie nur ein bestimmter Teil davon anzuzeigen. So wie nur das Benachrichtigungszeichen. Nun ist der Vorteil, dies zu tun, dass es eine Anfrage für das Bild macht. Anstatt 12345678910 zu machen, weiß ich nicht, 2025 Anfragen für all diese verschiedenen Bilder. Es muss nur das eine tun. Und das ist deutlich schneller und so lädt Google so schnell, dass es diese Anforderungsantwort-Lebenszyklen wirklich optimiert. Jetzt können Sie auch nach JavaScript filtern. Also lassen Sie uns sehen, was passiert, wenn ich hier eintippe, k, b. und Sie können hier sehen, dass es eine Suche nach q gleich kx ist. Q ist gleich K, Q ist gleich K, L, und wie es tippt, macht es jedes Mal eine neue Anforderung. Jetzt ist das alles JavaScript. Dies ist nicht Ihr Browser. Dies ist JavaScript, das dies tut. Und das verwendet eine Sache namens Ajax oder die Fetch-JavaScript-API. Wenn Sie nicht wissen, was das sind, ist das ehrlich. Wir können nur JavaScript-Anfragen betrachten. Dies sind also die Dateien, die wir von JavaScript angefordert haben. Wir haben momentan kein CSS angefordert. Ich weiß nicht, warum das nicht richtig erscheint. Ich schätze, da ist kein CSS drin. Das bedeutet wahrscheinlich, wenn wir hier gehen, rechten Maustaste klicken und die Seitenquelle anzeigen, werden wir alle CSS hier sehen. Und da ist es. All diese CSS ist auf der Seite. Es wurde also keine CSS-Dateien geladen, die mit dem HTML-Dokument geliefert wurden. Interessant. Wir können auch all die verschiedenen Bilder sehen, Medien-Schriftarten, Dokumente, Web-Sockets manifestiert all diese anderen Dinge. Jetzt können wir auch sehen, ob ich einfach zu allen zurückgehe , wie lange es gedauert hat, um die Dateigröße zu erhalten. Wir können hier nach der Dateigröße filtern. Wir können sehen, dass die größte Datei hier das Dokument selbst war, das ist die gesamte Seite. Es waren etwa 61 Kilobyte und es dauerte 140 Millisekunden zu bekommen. Und wieder, die Idee hier ist, dass ich auf Google.com ging. Google.com wird auf eine Form von IP-Adresse verweisen , die sich mit einem Server verbinden wird, den sie haben. Dass Server dann sagen, OK, gut, dienen dieses HTML-Dokument und dienen alle diese anderen Assets damit auch. Und so im Wesentlichen, bat ich um eine Menge Informationen. Ich wusste nicht einmal, dass ich nach all dem fragen würde, aber ich bat um eine Reihe von Informationen von Google. Google hat festgestellt, welche Informationen es benötigt, um mir zu geben. Und dann, wie eine Antwort sagte, hier, haben alle diese Dateien hier drin. Und das ist effektiv, wie Sie Ihre Anfragen und Ihre Antworten sehen. Auch hier müssen Sie Google Chrome nicht verwenden. Ich habe nur Chrome verwendet, weil das das Tool ist, das ich gerne benutze, wenn ich solche Dinge mache. Aber Sie können auch Firefox Safari edge verwenden. Wirklich wird jeder Browser dazu in der Lage sein. 9. Dein projekt: Ihr Projekt. Also, hier ist, was ich möchte, dass Sie tun. Ich möchte, dass Sie Ihren Lieblings-Browser öffnen. Könnte Chrome, Firefox, Safari Rand sein. Laden Sie meine Website. Als Beispiel, gehen Sie zu Caleb dot IO, klicken Sie mit der rechten Maustaste auf die Seite und dann überprüfen, und klicken Sie dann auf die Registerkarte Netzwerk und aktualisieren Ihre Seite, wenn Sie nichts sehen, wie wir es im letzten Video getan haben. Und dann möchte ich, dass Sie in der Lage sein, Ihre Antworten nach Dokumenten zu filtern. So wie HTML, CSS, Bilder oder JavaScript und einfach sehen was für Dinge meine Website wird versuchen, Ihnen zu dienen. Suchen Sie ein Bild und öffnen Sie dieses Bild in einer neuen Registerkarte und machen Sie dann einen Screenshot Ihres Netzwerk-Panels, nur das gesamte Panel, nicht das Bild selbst, sondern machen Sie einen Screenshot Ihres Netzwerk-Panels, während es mit allen die verschiedenen Anfragen und Antworten dort und teilen Sie sie in Ihrem Projektabschnitt. Jetzt keine Sorge, alles, was Sie hier tun, ist, dass es Ihren Browser nicht brechen wird. Es wird nicht Ihren Computer verletzen, wird nichts tun, was Sie nicht rückgängig machen können, indem Sie einfach auf die Schaltfläche Aktualisieren in Ihrem Browser klicken. Also fühlen Sie sich frei zu experimentieren. Es ist absolut sicher, dies zu tun. Geh weiter und gib dem eine Chance. Machen Sie einen Screenshot Ihres Netzwerk-Panels, während es geöffnet ist in Ihrem Projektbereich freigegeben wird. Und wenn Sie das getan haben, haben Sie diesen Kurs abgeschlossen. Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Kurs anzuschauen. Ich hoffe, Sie lernen etwas Neues und Spannendes. Auch hier ist das wirklich wichtig, wenn es um die Webentwicklung geht. Und wenn Sie mehr über HTML, CSS, JavaScript-APIs erfahren möchten , alles, was, so etwas. Immer fühlen Sie sich frei, mein Profil zu sehen. Ich habe bereits Kurse zu all diesen Themen. Nochmals vielen Dank, und ich hoffe, Sie in einem anderen Kurs zu sehen.