Η 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 Firefox, το 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]
Ο όρος 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, οι ενημερώσεις της δυναμικής ιστοσελίδας μπορεί να εμποδίσουν τις δράσεις του χρήστη, ιδιαίτερα αν η ταχύτητα του internet είναι αργή ή ασταθής. Για παράδειγμα, γράφοντας σε ενα πεδίο αναζήτησης μπορεί να σταλθεί ενα ερώτημα σε έναν εξυπηρετητή (server) για να ολοκληρωθεί η αναζήτηση, αλλά ο χρήστης μπορεί να μην γνωρίζει ότι η ολοκλήρωση της αναζήτησης σε ένα ξεχωριστό μήνυμα γίνεται, και αν η σύνδεση στο internet είναι αργή, η λίστα που εμφανίζεται σε διαφορετικό μήνυμα μπορεί να εμφανιστεί σε μια ακατάλληλη στιγμή, οπότε χρήστης έχει προχωρήσει στο να κάνει κάτι άλλο.
- Αφαιρώντας το Google,[28] οι περισσότεροι δημοφιλείς Web crawlers δεν εκτελούν JavaScript κώδικα,[29] οπότε για να εμφανίζεται στις διαδικτυακές μηχανές αναζήτησης (Web search engines) μια Web εφαρμογή πρέπει να δώσει έναν εναλλακτικό τρόπο πρόσβασης του περιεχομένου που κανονικά θα το έφερνε η Ajax. Έχει προταθεί ότι ένας headless browser μπορεί να χρησιμοποιηθεί για να φέρει το περιεχόμενο από τις ιστοσελίδες που χρησιμοποιούν Ajax, αν και το Google δεν προτείνει πλέον την Ajax crawling πρόταση την οποία έφτιαξε το 2009.[30]
JavaScript παράδειγμα
Ένα παράδειγμα από μια απλή Ajax αίτηση χρησιμοποιώντας τη μέθοδο GET, γραμμένη στη JavaScript.
pare-ta dedomena-ajax.js:
send-ajax-data.php:
Σε πολλούς προγραμματιστές δεν αρέσει η σύνταξη που χρησιμοποιείται στο XMLHttpRequest αντικείμενο, για αυτό κάποιες από τις παρακάτω λύσεις έχουν δημιουργηθεί.
jQuery παράδειγμα
Η δημοφιλής βιβλιοθήκη της JavaScript, η jQuery έχει εφαρμόσει αφαιρέσεις που επιτρέπουν στους προγραμματιστές να χρησιμοποιούν την Ajax πιο εύκολα. Αν και εξακολουθεί να χρησιμοποιεί την XMLHttpRequest στο παρασκήνιο, ακολουθεί το ίδιο παράδειγμα όπως παραπάνω, με χρήση της "ajax" μεθόδου.
$.ajax({
type: 'GET',
url: 'send-ajax-data.php',
dataType: "JSON", // data type expected from server
success: function (data) {
console.log(data);
},
error: function(error) {
console.log('Error: ' + error);
}
});
Η jQuery υλοποιεί επίσης μια "πάρει" μέθοδο, η οποία επιτρέπει στον ίδιο τον κώδικα να γραφεί πιο συνοπτικά.
$.get('send-ajax-data.php').done(function(data) {
console.log(data);
}).fail(function(data) {
console.log('Error: ' + data);
});
Fetch (φέρε) παράδειγμα
Το Fetch είναι ένα νέο ήδη υπάρχον JavaScript API. Αν και δεν υποστηρίζεται από όλους τους browsers, κερδίζει γρήγορα έδαφος ως πιο δημοφιλής τρόπος για να εκτελέσει κάποιος μια Ajax αίτηση.[εκκρεμεί παραπομπή] Σύμφωνα με την Google Developers Τεκμηρίωση, η "μεθοδος get το καθιστά ευκολότερο να κάνει κάποιος web αιτήσεις και να λάβει απαντήσεις σε σχέση με το παλαιότερο XMLHttpRequest". Όπως είδαμε παραπάνω, η μεθοδος get βασίζεται πάνω στις JavaScript υποσχέσεις.
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
