μεταφορα data απο μια σελιδα στην αλλη

[slevinkelevra]

Καλησπερα

 

Ντρεπομαι που το λεω, αλλα εχω κολλησει σε κατι απλο, επειδη ετυχε να μην το χω δουλεψει μεχρι τωρα. 

 

Σεναριο : Εχω μια φωτο ενος τοπιου στην αρχικη σελιδα και ενα κουμπι "Μαθετε Περισοτερα". Αυτο με στελνει απο την index στην details πχ, οπου  βρισκω πιο πολλες φωτο του τοπιου, σχετικα κειμενα κτλ. 

 

Ενα μονταρισμα που εκανα για αυτο ειναι μια hidden φορμα στο index που να φαινετε μονο το κουμπι submit (μετονομασμενο σε "Μαθετε Περισοτερα"). Η φορμα σε παει στην details και ποσταρει και ενα id με php.Οποτε λογω της φορμας και στην αλλη σελιδα πας και δεδομενα περνας. Αν και λιγο ακυρο αφου πρεπει να περασεις δεδομενα απο php σε js και να καλεσεις functions στο onload που τσεκαρουν αν οι μεταβλητες εχουν τιμη κτλ.

 

Θελω να μου εξηγησετε λιγο την πολυφορεμενη εναλακτικη. 

 

Απ οτι εχω καταλαβει , με τη χρηση μονο js, με το που πατησεις το κουμπι κατασκευαζεις ενα url τυπου 

details?id=8

και περνας στη details αλλαζωντας το window location. 

Στη details εχεις function για de-serialize (που χρησιμοποιει reg ex?) με το που γινει onload. Πιανεις τα δεδομενα και κανεις οτι θες μετα

 

ΟΚ. Παμε λιγο :

 

1. Τι ονομα εχει αυτη η μεθοδος?
2. Εχει να κανει με ajax?
3. Εχει να κανει με get requests?
4. Καποιο λεπτομερες tutorial που να εξηγει πως γινετε please
5. Τι περιορισμους εχει και ποσο ασφαλης ειναι? Εννοω μπορεις να μεταφερεις ευαισθητα δεδομενα μεσω αυτης?
6. Υποθετω χρησιμευει μονο στο να αλλαζεις σελιδες, οχι πχ να στελνεις πραγματα στον σερβερ
7. Γιατι ειναι τοσο διασημη? Επειδη χρησιμοποιει μονο js? Εννοω μια εναλλακτικη με τη χρηση φορμας τοσο χαλια ειναι?

Ναι, ειναι φιλοσοφικο το θεμα, αλλα ξεστραβωστε με λιγο. Οποιος εχει υπομονη, ευπροσδεκτος. 

 

Ευχαριστω πολυ

 

 

 

[Noobie]

Για αυτό εδώ μιλάς; id=8

 

Δηλαδή την μέθοδο που δίνουνε δεδομένα; (στην συγκεκριμένη περίπτωση το δεδομένο είναι το 8 που δόθηκε ως id)

[slevinkelevra]

Ναι προφανως, αλλα εχω αποριες σχετικα με ολη τη μεθοδο, οχι μονο οτι το id ειναι 8

[Noobie]

Ναι προφανως, αλλα εχω αποριες σχετικα με ολη τη μεθοδο, οχι μονο οτι το id ειναι 8

Ναι, απλά ρώτησα για να σιγουρευτώ ότι λες για αυτό.

 

1. Ονομάζεται GET request.
2. Χρησιμοποιώντας AJAX μπορείς να δημιουργήσεις GET request.
3. Δες το 1.
4. Τι εννοείς πως γίνεται; Απλά δίνεις τα δεδομένα στο URL όπως το παράδειγμα που έδωσες, και μετά τα διαχειρίζεσαι με κάποια γλώσσα προγραμματισμού όπως PHP. Σου δίνω ένα παράδειγμα στο τέλος σε PHP.
5. Στο πρωτόκολλο HTTP (στο οποίο συμπεριλαμβάνεται η GET request) δεν έχουν οριστεί περιορισμοί για την συγκεκριμένη μέθοδο αλλά το λογισμικό των clients/servers αρκετές φορές έχει περιορισμούς όπως για παράδειγμα στο μέγεθος του URL. Γενικά οι μέθοδοι αποστολής δεδομένων (π.χ GET + POST) δεν μπορούν να θεωρηθούν ασφαλείς, είναι εύκολο κάποιος να δει τα δεδομένα. Αν πρόκειται για ευαίσθητα δεδομένα, χρησιμοποίησε POST αντί GET επειδή στην POST δεν φαίνονται τα δεδομένα στο URL (αν και μπορούν να φανούν αλλού) και χρησιμοποίησε το πρωτόκολλο SSL (HTTPS) για κρυπτογράφηση των δεδομένων.
6. Ναι, η συγκεκριμένη μέθοδος έχει σχεδιαστεί κυρίως έτσι ώστε να ζητάς "πράγματα" (για αυτό λέγεται και GET που σημαίνει παίρνω) και όχι να στέλνεις.
7. Δεν ξέρω τι εννοείς όταν λες ότι χρησιμοποιεί JS, δεν χρησιμοποιεί JS αλλά χρησιμοποιώντας JS μπορείς να διαχειριστείς τα δεδομένα που στάλθηκαν με GET. Στις φόρμες χρησιμοποιείται κυρίως η μέθοδος POST επειδή αυτή είναι η μέθοδος που έχει σχεδιαστεί ώστε να στέλνει δεδομένα.

 

 

Παράδειγμα PHP:

<?php
 
echo $_GET['id']; //εμφανίζει την τιμή του id, δηλαδή το 8
 
?>

[slevinkelevra]

Πολυ καλη απαντηση, ευχαριστω.

 

Βεβαια εστιαζεις σε client /server ενω εγω ρωταω για μεταβαση απο τη μια σελιδα html στην αλλη και ταυτοχρονη μεταφορα δεδομενων μαζι. Ολα client. Χωρις καμια εξαρτηση/αναμειξη σερβερ.

 

Επειδη μαλλον δε διατυπωσα καλα : 

Οταν εψαχνα βρηκα αυτο Site: εδω και βασιστηκα πανω σε αυτο για την ερωτηση μου.

 

Δεν καταλαβα ομως την απαντηση που εδωσε ο τυπος . Λεει απλα οτι χρησιμοποιει js και παιζει με το window location και τελος. Ε, ολο αυτο εκει ειναι ajax get ή απλα ενας τροπος να κανεις serielize/deserialize και μεταβαση? Δηλαδη οταν δεν σχετιζεται με server ειναι ajax ή ονομαζεται αλλιως? Εχεις επεκτασεις κτλ? Εχει επεκτασεις? Ονομαζεται καπως? 

 

Ευχαριστω και παλι

[geomagas]

Δηλαδη οταν δεν σχετιζεται με server ειναι ajax ή ονομαζεται αλλιως?

 

Μα ποιο σημείο ακριβώς δεν σχετίζεται με server;

Όταν "παίζεις με το window.location" τι νομίζεις ότι γίνεται;

[Noobie]

Πολυ καλη απαντηση, ευχαριστω.

 

Βεβαια εστιαζεις σε client /server ενω εγω ρωταω για μεταβαση απο τη μια σελιδα html στην αλλη και ταυτοχρονη μεταφορα δεδομενων μαζι. Ολα client. Χωρις καμια εξαρτηση/αναμειξη σερβερ.

 

Επειδη μαλλον δε διατυπωσα καλα : 

Οταν εψαχνα βρηκα αυτο Site: εδω και βασιστηκα πανω σε αυτο για την ερωτηση μου.

 

Δεν καταλαβα ομως την απαντηση που εδωσε ο τυπος . Λεει απλα οτι χρησιμοποιει js και παιζει με το window location και τελος. Ε, ολο αυτο εκει ειναι ajax get ή απλα ενας τροπος να κανεις serielize/deserialize και μεταβαση? Δηλαδη οταν δεν σχετιζεται με server ειναι ajax ή ονομαζεται αλλιως? Εχεις επεκτασεις κτλ? Εχει επεκτασεις? Ονομαζεται καπως? 

 

Ευχαριστω και παλι

Καταρχήν εκεί δεν χρησιμοποιείται AJAX, χρησιμοποιείται jQuery και απλή Javascript. Αυτό που έκανε εκεί είναι απλά να διαχωρίσει την τιμή του placeID από το υπόλοιπο του URL και να την βάλει ως τιμή της μεταβλητής placeID. Δηλαδή αν έκανες μετά alert(placeID) θα σου εμφάνιζε σε παραθυράκι τον αριθμό που βρίσκεται στο τέλος του URL.

 

Η ajax και η jquery είναι βασισμένες στην Javascript άρα είναι client-side, δεν είναι server-side.

 

Μα ποιο σημείο ακριβώς δεν σχετίζεται με server;

Όταν "παίζεις με το window.location" τι νομίζεις ότι γίνεται;

 

Αυτό είναι Javascript άρα δεν είναι server-side, client-side είναι.

[slevinkelevra]

@Noobie Αχα ΟΚ, ευχαριστω. Μια χαρα. Εχει καποιο ονομα αυτη η τεχνικη?

 

@geomagas Γινεσαι λιγο πιο αναλυτικος? Εγω ηξερα οτι η ajax παιζει με τον σερβερ. Αμα κανεις μια απλη μεταβαση απο client side σε client side δε πιανεται για ajax. Αμα ηταν ajax δε θα γυρναγε κατι πισω η function? Και με το window location απλα αλλαζεις url. Δηλαδη κανει κατι σαν 

 window.location.assign("details.html")

για να αλλαξεις σελιδα. Διορθωσε με αν κανω καπου λαθος. Thanks

[geomagas]

Αυτό είναι Javascript άρα δεν είναι server-side, client-side είναι.

 

Η εντολή ναι, είναι javascript. Το αποτέλεσμά της όμως ποιο είναι;

 

Εγω ηξερα οτι η ajax παιζει με τον σερβερ.

 

Όλα αυτά μέχρι τώρα δεν έχουν καμία μα καμία σχέση με ajax.

 

Αμα κανεις μια απλη μεταβαση απο client side σε client side δε πιανεται για ajax.

 

...Τι σημαίνει "απο client side σε client side";;; Υπάρχει κάτι τέτοιο;

 

Και με το window location απλα αλλαζεις url. Δηλαδη κανει κατι σαν 

 window.location.assign("details.html")

για να αλλαξεις σελιδα. Διορθωσε με αν κανω καπου λαθος. Thanks

 

 

Ναι "απλά" αλλάζεις url. Και ναι, αλλάζεις σελίδα.

Που τη βρίσκει όμως ο browser τη νέα σελίδα;

Πίσω από κάθε url βρίσκεται ένας server. Όταν αλλάζεις το window.location (είτε με javascript είτε γράφοντας μία διεύθυνση στη γραμμή του browser είτε πατώντας ένα link είτε κάνοντας submit μία φόρμα, όλα αυτά είναι πρακτικά το ίδιο πράγμα) προκαλείς ένα request σε ένα server!

 

Αν θέλεις, φτιάξε μία σελίδα που περιέχει μόνο:

<button onclick='window.location.assign("http://www.insomnia.gr")'>Click Me</button>

Φόρτωσέ την στο browser σου, άνοιξε την κονσόλα και πάτα το Click Me. Τι παρατηρείς;

[Noobie]

 

Η εντολή ναι, είναι javascript. Το αποτέλεσμά της όμως ποιο είναι;

Και το αποτέλεσμα client-side είναι, απλά περιέχει την τρέχουσα διεύθυνση, αυτό δεν σημαίνει ότι είναι server-side. Πάντως δεν διαφωνούμε στο ότι σχετίζεται με server αν αλλαχτεί η τιμή του window.location, σχετίζεται έμμεσα με την έννοια ότι θα κάνει αίτηση σε ένα server.

 

window.location.assign("details.html")

για να αλλαξεις σελιδα. Διορθωσε με αν κανω καπου λαθος. Thanks

Ναι, αυτός ένας τρόπος να μεταβείς σε άλλη σελίδα. Επίσης μπορείς και έτσι:

window.location = "http://www.google.com";

[defacer]

1. Τι ονομα εχει αυτη η μεθοδος?
2. Εχει να κανει με ajax?
3. Εχει να κανει με get requests?
4. Καποιο λεπτομερες tutorial που να εξηγει πως γινετε please
5. Τι περιορισμους εχει και ποσο ασφαλης ειναι? Εννοω μπορεις να μεταφερεις ευαισθητα δεδομενα μεσω αυτης?
6. Υποθετω χρησιμευει μονο στο να αλλαζεις σελιδες, οχι πχ να στελνεις πραγματα στον σερβερ
7. Γιατι ειναι τοσο διασημη? Επειδη χρησιμοποιει μονο js? Εννοω μια εναλλακτικη με τη χρηση φορμας τοσο χαλια ειναι?

 

1. Δεν ξέρω να έχει κάποιο ιδιαίτερο όνομα.
2. Όχι. "AJAX" είναι μια γενική ομπρέλα με την οποία εννοούμε "θα κάνω request από το παρασκήνιο χωρίς να φορτώσει άλλη σελίδα" (να αλλάξει, για να το πω μπακάλικα, το url στο address bar). Εσύ εδώ απλά φορτώνεις μια άλλη σελίδα με τον ίδιο ακριβώς τρόπο που θα γινόταν αν έκανες κλικ ένα link. Δεν είναι AJAX με την καμία.
3. Μπορεί. Το GET σαν όρος έχει νόημα μόνο όταν μιλάμε για HTTP. Αν λοιπόν το url το οποίο φορτώνεις ξεκινάει με http:// τότε ναι, είναι GET request. Αν πάλι είναι file:// (και το λέω αυτό γιατί μόνο τότε ισχύει το "χωρίς server μόνο client" που είπες) τότε το HTTP δε μπαίνει καν στο παιχνίδι άρα δε μπορούμε να μιλάμε ούτε για GET ούτε για τίποτα άλλο σχετικό.
4. Φαίνεται πως το έχεις καταλάβει ήδη αυτό... τι σε προβληματίζει;
5. Ευαίσθητα δεδομένα μπορείς να μεταφέρεις αν και μόνο αν είναι κρυπτογραφημένα (καθαρά για ακαδημαϊκούς λόγους το αναφέρω) ή φορτώνεις σελίδες με HTTPS. Δεν έχει να κάνει με τίποτα άλλο.
6. Φυσικά και μπορείς να στείλεις πράγματα στον server, με μόνο περιορισμό ότι αυτά τα πράγματα θα μπούνε στο URL συν ο,τι αυτό συνεπάγεται (π.χ. το πρακτικό όριο για το μήκος ενός url είναι σαφώς μικρότερο απ' ότι θα μπορούσες να στείλεις με άλλου είδους request, ο,τι βάλεις μέσα στο URL τυπικά καταγράφεται στα logs του server, ο χρήστης μπορεί να κάνει copy paste το url αλλού χωρίς να αντιλαμβάνεται πως μέσα σ' αυτό περιέχονται ίσως "ζουμερά" στοιχεία, κλπ).
7. Φυσικά και δεν είναι χάλια και δεν υπάρχει the one true answer σ' αυτή την ερώτηση. Απλά (ιδιαίτερα πριν ~3-4 χρόνια) ήταν πολύ της μόδας το URL που δίνεις να μην αντιστοιχεί στη σελίδα "που θες να δεις" αλλά σε μια "κενή" σελίδα η οποία όπως περιγράφεις με JS διαβάζει το url και φορτώνει σε δεύτερο χρόνο το πραγματικό περιεχόμενο.

Η προσωπική μου (και όχι μόνο δική μου) γνώμη είναι πως αυτή η τεχνική (συγκεκριμένα αυτό που περιγράφω στο #7, αλλά υπογραμμίζω πως υπάρχει μια πολύ σημαντική λεπτομέρεια εκεί, ότι η πληροφορία περνούσε μέσω του url fragment και όχι του query) είναι ένα έκτρωμα το οποίο δημιουργεί μόνο προβλήματα και καλώς έκανε και πέθανε.

 

Further reading.

[slevinkelevra]

@defacer Πολυ καλη η απαντηση σου thanks.

 

Η επομενη ερωτηση μου θα ηταν σχετικη με το further reading link σου. Ας πουμε οτι εγω εχω αυτο πχ. 

 

 

https://www.google.com/maps/place/%CE%92%CE%B1%CF%81%CE%BA%CE%B5%CE%BB%CF%8E%CE%BD%CE%B7/@38.298553,20.520655,9z/data=!4m2!3m1!1s0x12a49816718e30e5:0x44b0fb3d4f47660a

 

αμα το ανοιξεις αυτο θα δεις οτι αρχικα ειχα κανει αναζητηση τη Βαρκελωνη place/%CE%92%CE%B1%CF%81%CE%BA%CE%B5%CE%BB%CF%8E%CE%BD%CE%B7 (θα στο βγαλει και στο search box.) και μετα πεταχτηκα μεχρι τη Κεφαλονια (@38.298553,20.520655,9 lon lat υποθετω). 

 

Ανεξαρτητα απο το ajax crawling (που με μπερδεψε λιγο), αυτο το στιλ links οπως το παραπανω τι ειναι? Που μαζευει δηλαδη data για το που ησουν κ οταν ξαναμπεις σε παει εκει, οχι απλα σε μια σελιδα. Οχι που σε παει σε ενα συγκεκριμενο anchor πχ paragraph3 ή header αλλα που καλει functions. (υποθετω καλει functions κατα το onload αφου ανοιγει τοποθεσιες κτλ)

 

Αυτο το στιλ λοιπον ειναι ajax? Πως λεγεται και που μπορω να μαθω περισσοτερα γ αυτο?

 

Ευχαριστω και παλι ολους

[defacer]

Δύσκολο να σου δώσω μια ξεκάθαρη απάντηση μιας και υπάρχουν αρκετές πιθανές προσεγγίσεις και επιπλέον δεν έχω ψάξει πώς ακριβώς δουλεύουν τα gmaps.

 

Αυτό το link που δίνεις είναι ένα απλά url που περιέχει διάφορες πληροφορίες: το μέρος "στο οποίο βρίσκεσαι" (άσχετα που μετά πήγες αλλού), την περιοχή που είναι ορατή στο χάρτη (lat lon) και το "data" πεδίο το οποίο δεν έχω ιδέα τι είναι. Είναι ένα url "σαν όλα τα άλλα".

 

Το url το ίδιο δε "σε πάει" ακριβώς σε anchor. Εσύ αναφέρεσαι συγκεκριμένα στο λεγόμενο fragment (αυτό που έρχεται μετά το #), το οποίο έχει 2 ιδιαιτερότητες:

1. Σε αντίθεση με όλο το υπόλοιπο τμήμα του url, ποτέ δεν στέλνεται στον server.
2. Αν υπάρχει στο document κάποιο στοιχείο με id το ίδιο που βρίσκεται στο fragment όταν φορτώσει η αρχική σελίδα τότε ο browser μετακινεί το viewport ούτως ώστε το στοιχείο αυτό να είναι άμεσα ορατό.

Το αν υπάρχει κάποιο fragment και ποιός είναι ο τρόπος χρήσης του σε μια σελίδα καθορίζεται πρακτικά αυθαίρετα από αυτόν που γράφει τη σελίδα, οπότε δεν υπάρχει κάποιο ιδιαίτερο όνομα να αναφέρω. Τέλος όπως είπα παραπάνω το AJAX είναι η πρακτική του να κάνεις HTTP requests "στο background" χωρίς να πηγαίνει ο browser σε άλλο url. Αυτό δε συνδέεται καθόλου με το πώς είναι φτιαγμένο το url που βλέπεις ή γενικότερα οποιοδήποτε url.

[geomagas]

Αυτο το στιλ λοιπον ειναι ajax? Πως λεγεται και που μπορω να μαθω περισσοτερα γ αυτο?

 

Αυτο πάλι δεν έχει σχέση με query strings ούτε με fragmets (αν δεις τα urls που φτιάχνει, δεν περιέχουν κανένα από τα δύο).

Χρησιμοποιεί βέβαια ajax, όπως κάνει πάντα το google maps api όταν δουλεύει browser-side.

 

Δεν είδα τον κώδικα που τρέχει, αλλά εκτός αν κάνω τραγικό λάθος, χρησιμοποιεί το history API της HTML5 για να κάνει push ένα ή περισσότερα νέα urls στο browser history. Αλλά όλα αυτά αφότου έχει αποφασίσει το περιεχόμενο που θέλει και το έχει τραβήξει με ajax από τον server διαμορφώνοντας το DOM. Μετά κατασκευάζει το url και το κάνει push, άρα δεν χρειάζεσαι κανένα parsing από την πλευρά του client. Αν έχεις όρεξη για διάβασμα, εδώ.

 

Υπάρχει βέβαια και μία ανάλογη (και λίγο παλιότερη ίσως) τεχνική που χρησιμοποιεί fragments. Αυτό έχει το πλεονέκτημα ότι αλλάζει από μόνο του το history αλλά προκειμένου να δουλέψει πρέπει να στήσεις ξώβεργα για το onhashchange event και να του αλλάξεις την default συμπεριφορά. Αν έχεις όρεξη για πολύ διάβασμα, εδώ.

 

Όλα αυτά γίνονται για να παρακαμφθεί ως ένα βαθμό η stateless φύση του http (αφού ο browser είναι ένα πρόγραμμα που μπορεί να κρατήσει state), και να υλοποιηθεί αυτό που λίγο παλιότερα ήταν στη μόδα και λέγεται single-page web site. Οπότε, αν αναζητάς ένα όνομα για αυτή την τεχνική, there you go!

 

Πρόσεξε όμως, ο server πρέπει να μπορεί να δουλέψει σε συνεργασία με τον browser. Αυτό με λίγα λόγια σημαίνει ότι, αν κάνεις copy/paste το νέο url κάπου (όπως έκανες εδώ) ή το κάνεις bookmark, τα νέα requests που θα γίνουν (αναγκαστικά στον server) θα πρέπει να αναπαράγουν την πληροφορία που απόκτησες κι εσύ χρησιμοποιώντας το client application. Βάσει αυτού του consistency υλοποιείται και αυτό που λέμε ajax crawling.

[defacer]

να υλοποιηθεί αυτό που λίγο παλιότερα ήταν στη μόδα και λέγεται single-page web site. Οπότε, αν αναζητάς ένα όνομα για αυτή την τεχνική, there you go!

 

Thumbs up!