-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAJAX.txt
101 lines (80 loc) · 4.83 KB
/
AJAX.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
AJAX = Asynchronous* Javascript and XML#
Bedeutet:
*Asynchrone Request(Fetch = Vanilla, JQuery Ajax = JQuery, etc) und Responses
#Veraltet, funktioniert eigentlich wie HTML. Durch Json (Textversion von JS) Einführung damals ist
Gebraucht für:
=> Content inserten von einer Database / Server (localhost z.B.), ohne die Webseite jedes mal zu refreshen
=> Inhalt von Zeit zu Zeit in eine Webseite laden. (Beispiel dazu: Chatbots = Refresh geschieht automatisch)
=> Webpage Inhalte bei einem Klick auf einen Button laden (z.B. "Mehr Anzeigen" in einem Webshop)
Wird kombiniert mit:
=> Javascript oder JQuery
Jeder Browser hat seine eigene JS-Engine:
=> Engine: Die Maschine, die Javascript im Browser ausführt, in Chrome z.B "V8"
Stack Functions:
=> Jede Funktion wird step by step gestacked (gestapelt). Javascript geht step by step alle durch von der ersten Funktion
zur nächsten.
JS ist single threaded = Es gibt nur einen Stack /
Never-Blocking = Es wird ständig step by step durchgeloopt /
Asynchronal = Wir müssen warten, bis der Prozess ausgeführt wird. Das ist je nach Inhalt unterschiedlich!
(Mit Ajax können wir nebensächlich TROTZDEM arbeiten, Anfragen machen...)
[Node.JS]
Was bedeutet hier SERVERSEITIG?
- Wir tauschen die Rollen. Wenn wir SERVERSEITIG arbeiten, dann befinden wir uns im Server drin:
- Wir erstellen und starten den Server (server.js file) und Empfangen Anfragen
- Das heisst WIR sind nun die Kellner (server) und nicht der Kunde (client). Wir BEDIENEN den client!
1) Bash öffnen
2) $ node --version
3) Version sollte angezeigt werden
4) $ npm --version
5) Version von NODE PACKAGE MANAGER sollte angezeigt werden
- Node.js hat keinen Zugriff auf den DOM, weil es kein Client gibt (Kein Document, das gebaut wird)
- Node.js ist Javascript, dass eben serverseitig auf dem SERVER ausgeführt wird
=> How to start:
6) Beim passenden Ordner, demfall 01_node-server > Rechtsklick > Open in integrated terminal
7) Pfad MUSS richtig sein. Bitte überprüfen!
7.1) $ pwd zeigt der Pfad an (pwd = path working directory)
8) Falls FALSCH: "$ ls" (Gibt Informationen über den Pfadbaum), dann:
9) "$ cd" TAB (soviel TAB bis zum ENDPFFAD, oder manuell erste Zeichen eingeben, mit TAB abschliessen) > Enter
9.1) Falls KOMPLETT FALSCHER PFAD: $ cd ../bla bla
10) "$ node" und Name des JS-files, z.B server.js und ausführen: "$ node server.js"
=> Warum bei jeder ÄNDERUNG den Server neu starten?
Port immer beenden mit ctrl c im Terminal
WARUM WICHTIG? Wenn wir Änderungen anzeigen wollen, muss der Server immer neu gestartet werden (ist kein Liveserver)
[NODEMON]
=> Warum NODEMON als Lösung? (https://www.npmjs.com/package/nodemon)
1) Nodemon startet den Server bei jeder Änderung automatisch
2) ctrl c ist somit überflüssig
3) Installation im Terminal siehe "BEST OF TERMINAL BEFEHLE"
4) Beim ersten Start NICHT "$ node" schreiben sondern "$ nodemon (*)", um Nodemon anzusprechen
5) Das Aktualieren gilt NUR für das entsprechende (*)-JS File, z.B. 03_ejs_basics.js (wenn in einem zugehörigen .ejs
File Änderungen gemacht werden, dann gilt es im davon ausgehenden JS-File zu speichern mit ctrl s)
6) Server kann dennoch falls gewünscht mit ctrl c gestoppt werden
7) ctrl enter auf den Port um diesen direkt im Google Chrome browser zu öffnen (Wichtig: Port muss vorher eingerichtet sein)
[Express.js]
1) In terminal: Richtiger Pfad wo gewünscht: "$ npm i express" um package reinzuladen
2) Bei erfolgreicher Beendung werden zusätzliche Ordner in diesen Pfad gelegt (Abhängikeitsordner)
[EJS - Die Template Engine]
- Um statt res.text = res.render zu initialisieren, sprich: Wir können so auch HTML rendern statt reiner Text
GET REQ finden in der URL statt FACT
1) .ejs-files (z.B. index.ejs) in einen "views"-Ornder packen. Dieser Name MUSS 1:1 so geschrieben sein
2) inkludierte .ejs-files (wie wir es im PHP kennen) in einen "partials"-Ordner packen (z.B. footer.ejs)
3) Extension "EJS Language Support" herunerladen, damit VSC EJS lesen kann
3) Mit <%= %> ansprechen
BEST OF TERMINAL BEFEHLE (Öffnen in VSC mit ctrl + J):
$ node --version
$ npm --version
$ pwd
$ ls
$ cd /TAB (TAB als Autocomplete)
$ cd ../
$ node
$ nodemon (nach der Installation via => "$ npm install -g nodemon")
$ npm install ejs (Template Engine wie PUG und Mustache)
NEU
$ npm init am ANFANG (Nicht nötig, aber sicher sein, dass es klappt - Nodemoduls müssen gut eingereichtet sein)
Da stellt man alles ein, mit enter akzeptieren (package name, version, Beschreibung, Startdatei und und und)
In der darauffolgenden Erstellung von package.json kann man immer noch was ändbern
$ npm i request (! VERALTET)
Fetch ist CLIENTSEITIG, deshalb um APIs Serverseitig zu laden brauchen wir Pakete wie Acsion / Node fetch
User soll Stzadt eingeben > Send > Server soll Statdt wissen und API Request an API Weather schicken
Public = Statischer Ordner mit Sachen für den Clientseitigen Gebrauch, wie CSS