Ajax (προγραμματισμός)

Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια
Πήδηση στην πλοήγηση Πήδηση στην αναζήτηση

Η Ajax (επίσης AJAX σύντομογραφία για "Ασύγχρονη JavaScript και XML")[1] είναι ένα σύνολο από Web development τεχνικές που χρησιμοποιούν πολλές τεχνολογίες του διαδικτύου απο την πλευρά του πελάτη για να δημιουργήσουν ασύγχρονες Web εφαρμογές. Με Ajax, οι Web εφαρμογές μπορούν να στέλνουν και να ανακτούν δεδομένα από έναν διακομιστή(server) ασύγχρονα (τρεχοντας στο παρασκήνιο), χωρίς να παρεμβαίνουν με την εμφάνιση και τη συμπεριφορά της υπάρχουσας σελίδας. Με την αποσύνδεση του επιπεδου των δεδομενων που εχουν την δυνατοτητα αλλαγης από το επιπεδο παρουσίασης της σελιδας, η Ajax επιτρέπει σε Web σελίδες, και κατ ' επέκταση σε Web εφαρμογές, να αλλάζουν το περιεχόμενο τους δυναμικά, χωρίς να χρειάζεται να φορτωθεί εκ νέου ολόκληρη τη σελίδα.[2] Στην πράξη,οι σύγχρονες εφαρμογές συνήθως χρησιμοποιούν JSON , αντί για XML, λόγω των  πλεονεκτήματων του JSON που υπαρχουν εκ φυσικου στην JavaScript.[3]

Η Ajax δεν είναι μια ενιαία τεχνολογία, αλλά μάλλον μια ομάδα τεχνολογιών. Η HTML και η CSS μπορεί να χρησιμοποιηθούν σε συνδυασμό για να επισημάνουν και να δωσουν ειδικό στυλ στις πληροφορίες. Η ιστοσελίδα μπορεί στη συνέχεια να τροποποιηθεί με την JavaScript για εμφανίζει δυναμικά – και να επιτρέπει στο χρήστη να αλληλεπιδρά με τα νέα στοιχεία. Το ενσωματωμένο XMLHttpRequest αντικείμενο εντός της JavaScript χρησιμοποιείται συνήθως για να εκτελέσει την Ajax στις ιστοσελίδες επιτρέποντας σε ιστοσελίδες να φορτώσουν το περιεχόμενο τους πάνω στην οθόνη, χωρίς να ανανεώσουν τη σελίδα. Η Ajax δεν είναι μια νέα τεχνολογία, ή καποια διαφορετική γλώσσα, αλλά υπάρχουσες τεχνολογίες που χρησιμοποιούνται με νέους τρόπους.

Ιστορία[Επεξεργασία | επεξεργασία κώδικα]

Στις αρχές με τα μέσα της δεκαετίας του 1990, οι περισσότερες Web ιστοσελίδες βασίζονται σε πλήρεις HTML κωδικα σελίδες. Κάθε ενέργεια του χρήστη απαιτεί μια εντελώς νέα σελίδα να φορτωθεί από τον διακομιστή. Αυτή η διαδικασία ήταν αναποτελεσματική, όπως φαίνεται και από την εμπειρία του χρήστη: όλο το περιεχόμενο της σελίδας που εξαφανίστηκε και, στη συνέχεια, η νέα σελίδα που εμφανίστηκε ξανα. Κάθε φορά που το πρόγραμμα περιήγησης φορτωνε ξανα μια σελίδα, επειδή υπηρχε μια μικρή αλλαγή, όλο το περιεχόμενο έπρεπε να σταλεί εκ νέου, παρόλο που μόνο μερικές από τις πληροφορίες είχαν αλλάξει. Αυτό τοποθετούσε επιπλέον φορτο στον server και έκανε το εύρος ζώνης να είναι ένας περιοριστικός παράγοντας στις επιδόσεις.

Το 1996, το iframe tag εισήχθη από τον Internet Explorer, ως το αντικείμενο στοιχείο, που μπορεί να φορτώσει ή να φέρει το περιεχόμενο της σελίδας ασύγχρονα. Το 1998, το Microsoft Outlook Web App, και η ομάδα του ανέπτυξε το concept πίσω από το XMLHttpRequest scripting αντικείμενο.[4] Το οποιο εμφανίστηκε ως XMLHTTP στη δεύτερη έκδοση της MSXML βιβλιοθήκης,[5] η οποία συνοδεύε τον Internet Explorer 5.0 , τον Μάρτιο του 1999.[6]

Η λειτουργικότητα του XMLHTTP ActiveX ελέγχου στον IE 5 αργότερα υλοποιήθηκε από τον Mozilla, το Safari, το Opera και άλλα προγράμματα περιήγησης, ως το XMLHttpRequest JavaScript αντικείμενο.[7] Η Microsoft υιοθέτησε το μοντελο του XMLHttpRequest απο τον Internet Explorer 7. Η ActiveX έκδοση υποστηρίζεται ακομα στον Internet Explorer, αλλά δεν οχι στον Microsoft Edge. Η χρησιμότητα αυτών των HTTP αιτήσεων που γινονται στο προσκηνιο και των ασύγχρονων τεχνολογιών Web παρέμεινε αρκετά ασαφής, μέχρι που άρχισαν να εμφανίζονται σε μεγάλη κλίμακα διαδικτυακές εφαρμογές, όπως το Outlook Web App (2000)[8] και το Oddpost (2002).

Η Google έκανε μια μεγάλη ανάπτυξη των προτύπων-που χρησιμοποιουνταν, οπως η cross browser Ajax με το Gmail (2004) και το Google Maps (2005).[9] τον Οκτώβριο του 2004 το Kayak.coms ειχε μια δημόσια beta έκδοση από τις πρώτες μεγάλης κλίμακας e-commerce χρησεις που εκεινη την εποχη απο αυτο που οι προγραμματιστές ονομάζαν "το xml http πράγμα".[10] Αυτό αύξησε το ενδιαφέρον για την AJAX μεταξύ των προγραμματιστων του διαδικτυου (web developers).

Ο όρος Ajax δημοσίως χρησιμοποιήθηκε στις 18 φεβρουαρίου 2005, από τον Jesse James Garrett σε ένα άρθρο με τίτλο Ajax: Μια Νέα Προσέγγιση για Web Εφαρμογές, που βασίζεται στις τεχνικές που χρησιμοποιούνται στις σελίδες του Google.[11]

Στις 5 απριλίου 2006, το World Wide Web Consortium (W3C) κυκλοφόρησε το πρώτο σχέδιο προδιαγραφής για το XMLHttpRequest αντικείμενο, σε μια προσπάθεια να δημιουργήσει ένα επίσημο πρότυπο Web.[12][13] Το πιο πρόσφατο προσχέδιο του XMLHttpRequest αντικειμένου δημοσιεύθηκε στις 30 ιανουαρίου 2014.[14]

Τεχνολογίες[Επεξεργασία | επεξεργασία κώδικα]

Το συμβατικό μοντέλο για μια Web Εφαρμογή σε σχέση με μια εφαρμογή που χρησιμοποιεί Ajax

Ο όρος Ajax έχει έρθει να αντιπροσωπεύσει μια ευρεία ομάδα των τεχνολογιών Web που μπορεί να χρησιμοποιηθούν για να φτιάξουν μια Web εφαρμογή που επικοινωνεί με ένα διακομιστή στο παρασκήνιο, χωρίς να παρεμβαίνει με την τρέχουσα κατάσταση της σελίδας. Στο άρθρο που επινόηθηκε ο όρος Ajax, ο Jesse James Garrett εξήγησε ότι οι ακόλουθες τεχνολογίες ενσωματώνονται:

  • HTML (ή XHTML) και CSS για την παρουσίαση
  • Το Μοντέλο Αντικειμένου Εγγράφου (DOM) για τη δυναμική επίδειξη της και την αλληλεπίδραση της με τα δεδομένα
  • JSON ή XML για την ανταλλαγή των δεδομένων, και XSLT για τη χειραγώγηση τους
  • Το XMLHttpRequest αντικείμενο για την ασύγχρονη επικοινωνία
  • Η JavaScript για να φέρει αυτές τις τεχνολογίες μαζί

Από τότε, ωστόσο, υπάρχουν μια σειρά από εξελίξεις στις τεχνολογίες που χρησιμοποιούνται σε μια Ajax εφαρμογή, και στον ορισμό του όρου Ajax τον ίδιο. Η XML είναι πλέον απαραίτητη για την ανταλλαγή δεδομένων και, ως εκ τούτου, το XSLT δεν είναι πλέον απαραίτητα για το χειρισμό των δεδομένων. Η JavaScript Object Notation (JSON) χρησιμοποιείται συχνά ως εναλλακτική μορφή για την ανταλλαγή δεδομένων,[15] αν και άλλες μορφές, όπως είναι ήδη διαμορφωμένες HTML ή απλού κειμένο μπορούν επίσης να χρησιμοποιηθούν.[16] Μια ποικιλία από δημοφιλή JavaScript βιβλιοθήκες, συμπεριλαμβανομένων και της JQuery, περιλαμβάνουν αφηρημένες έννοιες για να βοηθήσουν στην εκτέλεση αιτήσεων Ajax.

Οι Ασύγχρονες HTML και HTTP (AHAH) περιλαμβάνουν τη χρήση XMLHTTPRequest για να ανακτήσουν (X)HTML θραύσματα, τα οποία στη συνέχεια εισάγονται απευθείας στην Web σελίδα.

Μειονεκτήματα[Επεξεργασία | επεξεργασία κώδικα]

  • Οποιοσδηποτε χρηστης του οποίου ο φυλλομετρητης (browser) δεν υποστηριζει την JavaScript ή την XMLHttpRequest, ή που έχει αυτη την λειτοργία ανενεργή, δεν θα μπορει να χρησιμοποιησει ιστοσελίδες οι οποίες βασίζονται πανω στην Ajax. Απλές συσκευές (όπως τα  smartphones και τα PDAs) μπορει να μην υποστηριζουν τις απαιτουμενες τεχνολογίες. Ο μονος τρόπος για να μπορει ο χρηστης να εχει λειτουργικότητα είναι να χρησιμοποιησει μεθοδους που δεν περιλαμβανουν την JavaScript. Αυτο μπορει να κατορθωθει σιγουρευοντας οτι τα links και οι φορμες μπορουν να δουλεψουν αυτονομα και δεν βασιζονται πανω στην Ajax[17]
  • Παρομοιως, καποιες Web εφαρμογες που χρησιμοποιουν Ajax ειναι χτισμενες με τετοιο τροπο που δεν μπορουν να διαβαστουν απο τεχνολογίες οι οποιες διαβαζουν οθονες οπως η  JAWS. Τα WAI-ARIA standards προτυπα μας δινουν εναν τροπο να δωσουμε στοιχεια σε μια τετοια περιπτωση.[18]
  • Τα προγραμματα διαβασματος οθονης που ειναι ικανα να χρησιμοποιησουν την Ajax μπορει επισης να μην μπορουν να διαβασουν κανονινα το δυναμικα δημιουργομενο περιεχομενο.[19]
  • Οι  same-origin policies καθιστα αδυνατο να χρησιμοποιηθουν καποιες Ajax τεχνικες σε πολλες ιστοσελίδες, αν και το W3C εχει ενα σχεδιο πανω στο XMLHttpRequest αντικειμενο το οποιο θα ενεργοποιουσε την λειτουργια του.[20] Αυτοι οι μεθοδοι υπαρχουν για να παρακαμψουν αυτο το χαρακτηριστηκο ασφαλείας χρησιμοποιώντας ενα ειδικο Cross Domain Communications καναλι τοποθετημενο ως ενα iframe μεσα στη σελίδα,[21] ή με την χρηση του JSONP.
  • Ο ασύγχρονος τροπος προγραμματισμού callback-style of programming ο οποιος απαιτειται μπορει να οδηγησει σε περιπλοκο κωδικα ο οποιος ειναι δυσκολο να συντηρηθει , να διορθωθεί [22] και να δοκιμαστεί.[23]
  • Εξαιτίας αυτης της ασύγχρονης φύσης της Ajax, καθε κομμάτι δεδομένων που στέλνεται ή λαμβάνεται απο τον πελάτη υπαρχει σε μια σύνδεση εγκαταστειμένη μονο για αυτόν τον λόγο. Αυτό δημιουργεί μια προυπόθεση οτι για καθε δράση, ο πελάτης πρεπει να πολώσει τον διακομιστή (σέρβερ) , αντί να ακούσει, το οποιο συμβαίνει πολύ πιο πριν. Αυτή το φαινόμενο οδηγεί σε πολλές φορες μεγαλύτερη καθυστέρηση με την Ajax απο οτι μπορει να κατορθωθεί με άλλες τεχνολογιές οπως τα websockets.[24]
  • Στους φυλλομετρητες πριν την HTML5 ,οι σελίδες δυναμικά δημιουργημένες χρησιμοποιώντας διαδοχικές Ajax αιτήσεις δεν καταχωρούσαν αυτόματα τον ευατό τους στο ιστορικό του φυλλομετρητή, οπότε πατώντας το κουμπί "πίσω" του φυλλομετρητη δεν γυρνουσε την σελίδα στην προηγουμενη κατασταση της Ajax σελίδας, αλλα μπορει να οδηγούσε στην προηγουμενη πληρης σελίδα που επισκεφτηκε καποιος πριν απο αυτην. Αυτή η συμπεριφορά  — η πλοήγηση αναμεσα σε σελίδες αντί για δυναμικές καταστάσεις σελίδων — μπορεί να είναι επιθυμητη, αλλά αν η λεπτομερής καταγραφή της δυναμικής καταστασης της σελίδας ειναι απαραίτητη, τοτε ενας τροπος πριν την HTML5 επρεπε να βρεθει για να χρησιμοποιηθουν αόρατα iframes τα οποία εμφάνιζαν αλλαγές στο ιστορικό του φυλλομετρητή. Μια τετοια παρακαμψη χρησιμοποιησαν οι Ajax τεχνικές για να αλλάξουν το URL fragment identifier (το κομμάτι του URL μετά τη "#") οταν μια ιστοσελίδα που χρησιμοποιεί Ajax καταχωρείται και παρακουλουθείται για αλλαγές.[25][26] ΗHTML5 παρέχει ενα εκτενές API πρότυπο για να δουλεψει καποιος με τη μηχανή του ιστορικού ενος φυλλομετρητή .[27]
  • Οι Dynamic Web page ενημερωσεις το καθιστουν δυσκολο να καθιερώσεις  bookmark μια κατασταση σε μια εφαρμογή και μετά να επιστρέψεις στην ίδια κατάσταση στην εφαρμογή. Λύσεις για αυτο το προβλημα υπάρχουν, πολλές απο τις οποίες χρησιμοποιουν τον URL fragment identifier. Απο την αλλη πλευρά, οι ιστοσελίδες που χρησιμοποιουν την AJAX εκτενως τεινουν να λειτουργουν κυριως ως εφαρμογες παρά ως περιεχόμενο, μιας και σημειώνοντας τις ενδιαμεσες δυναμικες καταστάσεις συνηθως δεν βγαζει νοημα. Ωστόσο, η λύση που παρεχει η HTML5 για το παραπάνω προβλημα χρησιμοποιείται και για αυτό το προβλημα.
  • Ανάλογα με την φύση της εφαρμογής Ajax, οι ενημερώσεις της δυναμικης ιστοσελίδας μπορει να εμποδίσουν τις δρασεις του χρηστη, ιδιαίτερα αν η ταχύτητα του ιντερνετ είναι αργή ή ασταθής. Για παράδειγμα, γραφοντας σε ενα πεδίο αναζήτησης μπορεί να σταλθεί ενα ερώτημα σε εναν σερβερ για να ολοκληρωθεί η αναζήτηση, αλλα ο χρήστης μπορει να μην γνωρίζει οτι η ολοκληρωση της αναζητησης σε ενα ξεχωριστο μήνυμα γίνεται, και αν το ιντερνετ ειναι αργο, η λίστα που εμφανίζεται σε διαφορετικό μήνυμα μπορεί να εμφανιστεί σε μια ακατάλληλη στιγμή, οπου ο χρήστης εχει προχωρήσει στο να κανει κάτι άλλο.
  • Αφαιρώντας το Google,[28] οι περισσότεροι δημοφιλείς Web crawlers δεν εκτελούν JavaScript κώδικα,[29] οπότε για να εμφανίζεται στις διαδικτυακες μηχανες αναζήτησης (Web search engines) μια Web εφαρμογή πρέπει να δώσει εναν εναλλακτικό τρόπο πρόσβασης του περιεχομένου που κανονικά θα το εφερνε η Ajax. Εχει προταθεί οτι ενας headless browser μπορεί να χρησιμοποιηθει για να φέρει το περιεχόμενο απο τις ιστοσελίδες που χρησιμοποιουν Ajax, αν και το Google δεν προτεινει πλεον την Ajax crawling πρόταση την οποία έφτιαξε το 2009.[30]

Παραδείγματα[Επεξεργασία | επεξεργασία κώδικα]

JavaScript παράδειγμα[Επεξεργασία | επεξεργασία κώδικα]

Ένα παράδειγμα από μια απλή Ajax αίτηση χρησιμοποιώντας τη μεθοδο ΠΆΡΕ, γραμμένη στη JavaScript.

pare-ta dedomena-ajax.js:

send-ajax-data.php:

Σε πολλούς προγραμματιστές δεν τους αρέσει η σύνταξη που χρησιμοποιείται στο XMLHttpRequest αντικείμενο, για αυτό κάποιες από τις παρακάτω λύσεις έχουν δημιουργηθεί.

jQuery παράδειγμα[Επεξεργασία | επεξεργασία κώδικα]

Η δημοφιλής βιβλιοθήκη της JavaScript, η jQuery έχει εφαρμόσει αφαιρέσεις που επιτρέπουν στους προγραμματιστές να χρησιμοποιούν την Ajax πιο εύκολα. Αν και εξακολουθεί να χρησιμοποιεί την XMLHttpRequest πίσω από τις σκηνές, ακολουθεί το ίδιο παράδειγμα όπως παραπάνω, με χρήση της "ajax" μέθοδου.

Η jQuery υλοποιεί επίσης μια "πάρει" μέθοδο, η οποία επιτρέπει στον ίδιο τον κώδικα να γραφεί πιο συνοπτικά.

Fetch (φερε) παράδειγμα[Επεξεργασία | επεξεργασία κώδικα]

Το Fetch είναι ένα νέο ήδη υπάρχον JavaScript API. Αν και δεν υποστηρίζεται από όλους τους browsers, κερδίζει γρηγορα έδαφος ως πιο δημοφιλής τρόπος για να εκτελέσει καποιος μια Ajax αιτηση.[εκκρεμεί παραπομπή] Σύμφωνα με την Google Developers Τεκμηρίωση, Η "Φέρε μεθοδος το καθιστά ευκολότερο να κάνει καποιος web αιτήσεις και να λαβει απαντήσεις σε σχέση με το παλαιότερο XMLHttpRequest."

Όπως είδαμε παραπάνω, η φέρε μεθοδος βασίζεται πανω στις JavaScript υποσχέσεις.

Δείτε επίσης[Επεξεργασία | επεξεργασία κώδικα]

Αναφορές[Επεξεργασία | επεξεργασία κώδικα]

  1. «Ajax - Web developer guides». MDN Web Docs. Ανακτήθηκε στις 2018-02-27. 
  2. Ullman, Chris (March 2007). Beginning Ajax. wrox. ISBN 978-0-470-10675-4. http://www.wrox.com/WileyCDA/Section/id-303217.html. Ανακτήθηκε στις 24 June 2008. 
  3. «JSON: The Fat-Free Alternative to XML». www.json.org. Ανακτήθηκε στις 2017-02-17. 
  4. «Article on the history of XMLHTTP by an original developer». Alexhopmann.com. 2007-01-31. Αρχειοθετήθηκε από το πρωτότυπο στις 23 June 2007. Ανακτήθηκε στις 2009-07-14. 
  5. «Specification of the IXMLHTTPRequest interface from the Microsoft Developer Network». Msdn.microsoft.com. Ανακτήθηκε στις 2009-07-14. 
  6. Dutta, Sunava (2006-01-23). «Native XMLHTTPRequest object». IEBlog. Microsoft. Ανακτήθηκε στις 2006-11-30. 
  7. «Dynamic HTML and XML: The XMLHttpRequest Object». Apple Inc. Ανακτήθηκε στις 25 June 2008. 
  8. Hopmann, Alex. «Story of XMLHTTP». Alex Hopmann’s Blog. Αρχειοθετήθηκε από το πρωτότυπο στις 30 March 2010. Ανακτήθηκε στις 17 May 2010. 
  9. «A Brief History of Ajax». Aaron Swartz. 22 December 2005. Ανακτήθηκε στις 4 August 2009. 
  10. English, Paul. «Kayak User Interface». OFFICIAL KAYAK.COM TECHNOBLOG. Ανακτήθηκε στις 22 May 2014. 
  11. Jesse James Garrett (18 February 2005). «Ajax: A New Approach to Web Applications». AdaptivePath.com. Ανακτήθηκε στις 19 June 2008. 
  12. «The XMLHttpRequest Object». World Wide Web Consortium. 5 April 2006. Αρχειοθετήθηκε από το πρωτότυπο στις 16 May 2008. Ανακτήθηκε στις 25 June 2008. 
  13. van Kesteren, Anne; Jackson, Dean. «The XMLHttpRequest Object». W3.org. W3C. Ανακτήθηκε στις 2015-11-14. 
  14. Kesteren, Anne; Aubourg, Julian; Song, Jungkee; Steen, Hallvord R. M. «XMLHttpRequest Level 1». W3.org. W3C. Ανακτήθηκε στις 2015-11-14. 
  15. «JavaScript Object Notation». Apache.org. Αρχειοθετήθηκε από το πρωτότυπο στις 16 June 2008. Ανακτήθηκε στις 4 July 2008. 
  16. «Speed Up Your Ajax-based Apps with JSON». DevX.com. Αρχειοθετήθηκε από το πρωτότυπο στις 4 July 2008. Ανακτήθηκε στις 4 July 2008. 
  17. Quinsey, Peter. «User-proofing Ajax». 
  18. «WAI-ARIA Overview». W3C. Αρχειοθετήθηκε από το πρωτότυπο στις 26 October 2010. Ανακτήθηκε στις 21 October 2010. 
  19. Edwards, James (5 May 2006). «Ajax and Screenreaders: When Can it Work?». sitepoint.com. Ανακτήθηκε στις 27 June 2008. 
  20. «Access Control for Cross-Site Requests». World Wide Web Consortium. Αρχειοθετήθηκε από το πρωτότυπο στις 14 May 2008. Ανακτήθηκε στις 27 June 2008. 
  21. «Secure Cross-Domain Communication in the Browser». The Architecture Journal (MSDN). Αρχειοθετήθηκε από το πρωτότυπο στις 29 March 2010. Ανακτήθηκε στις 27 April 2010. 
  22. Cuthbertson, Tim. «What is asynchronous programming, and why is it so damn awkward?». GFX Monk. Ανακτήθηκε στις 19 October 2010. 
  23. «Selenium documentation: Fetching a Page». Selenium. Ανακτήθηκε στις 6 October 2011. 
    It is worth noting that if your page uses a lot of Ajax on load then WebDriver may not know when it has completely loaded. If you need to ensure such pages are fully loaded, then you can use Explicit and Implicit Waits.
  24. Pimentel, Victoria; Nickerson, Bradford G. (2012-05-08). «Communicating and Displaying Real-Time Data with WebSocket». Internet Computing, IEEE 16 (4): 45–53. doi:10.1109/MIC.2012.64. 
  25. «Why use Ajax?». InterAKT. 10 November 2005. Αρχειοθετήθηκε από το πρωτότυπο στις 29 May 2008. Ανακτήθηκε στις 26 June 2008. 
  26. «Deep Linking for AJAX». 
  27. «HTML5 specification». Ανακτήθηκε στις 21 October 2011. 
  28. Hendriks, Erik (23 May 2014). «Official news on crawling and indexing sites for the Google index». Google. Ανακτήθηκε στις 24 May 2015. 
  29. Prokoph, Andreas (8 May 2007). «Help Web crawlers efficiently crawl your portal sites and Web sites». IBM. Ανακτήθηκε στις 22 April 2009. 
  30. «Deprecating our AJAX crawling scheme». Google Webmaster Central Blog. October 14, 2015.