Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Βρυνιώτης Βασίλης Γκανάτσιος Δημήτρης Εισαγωγή

on

  • 798 views

 

Statistics

Views

Total Views
798
Views on SlideShare
797
Embed Views
1

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Βρυνιώτης Βασίλης Γκανάτσιος Δημήτρης Εισαγωγή Presentation Transcript

  • 1. Βρυνιώτης Βασίλης Γκανάτσιος Δημήτρης
  • 2. Εισαγωγή
    • AJAX σημαίνει Asynchronous JavaScript And XML.
    • Ο όρος εμφανίστηκε πρώτη φορά τον Φεβρουάριο του 2005 από τον Jesse James Garrett.
    • Τεχνική που επιτρέπει την δημιουργία interactive web applications .
    • Δίνει την αίσθηση στο χρήστη ότι βρίσκεται σε Desktop Εφαρμογή.
    • Cross Platform – Cross Browser .
    • Από τις πρώτες πιο γνωστές εφαρμογές είναι το Google Suggest .
  • 3. Τεχνικά Χαρακτηριστικά
    • Δεν είναι νέα τεχνολογία αλλά τεχνική. Κάνει χρήση τεχνολογιών όπως DOM, XHTML, CSS, XML και JavaScript.
    • Αντικατέστησε παλαιότερες τεχνικές που προσπαθούσαν να πετύχουν το ίδιο αποτέλεσμα ( IFRAMES, LAYERS, MSRS ).
    • Κάνει χρήση του XMLHttpRequest objec t και του Document Object Model (DOM).
    • Επικοινωνεί με τον server στέλνοντας XML μηνύματα και ανανεώνει το περιεχόμενο των σελίδων χωρίς Refresh.
  • 4. Non-AJAX Site Scenario
    • Ένας χρήστης επισκέπτεται μια ιστοσελίδα.
    • Επισκέπτεται links , καταχωρεί τα δεδομένα του σε Forms και αρχίζει να αλληλεπιδρά με αυτή .
    • Ο server απαντά σε κάθε του κίνηση επιστρέφοντας μια νέα Ιστοσελίδα.
    • Σε κάθε κίνηση του για να στείλει και να λάβει δεδομένα από τον Server προκαλεί Refresh.
  • 5. Non-AJAX Site Scenario
  • 6. AJAX Site Scenario
    • Ένας χρήστης επισκέπτεται μια ιστοσελίδα που κάνει χρήση της AJAX τεχνικής.
    • Επισκέπτεται links , καταχωρεί τα δεδομένα του σε Forms και αρχίζει να αλληλεπιδρά με αυτή .
    • Αν και παραμένει στην ίδια σελίδα, στέλνει τα δεδομένα του στον server και λαμβάνει απαντήσεις.
    • Το περιεχόμενο της σελίδας που επισκέφθηκε αλλάζει δυναμικά χωρίς Refresh.
  • 7. AJAX Site Scenario
  • 8. Document Object Model (DOM)
    • Κάθε αντικείμενο σε μια HTML σελίδα έχει το δικό τις id.
    • Το DOM βλέπει την σελίδα με δεντρική μορφή.
    • Κάθε αντικείμενο μπορεί να προσπελαστεί εύκολα μέσω του ID του με χρήση Javascript.
    • Το DOM χρησιμοποιείται από την τεχνική AJAX για να ανανεώσει το περιεχόμενο της σελίδας.
  • 9. How it works?
    • Ο χρήστης δεν κάνει απευθείας post στον server τα δεδομένα αλλά καλείται Javascript.
    • Στέλνεται ένα Request με τα Data στον server , με χρήση του XMLHttpRequest object.
    • Ο Server απαντά συνήθως με ένα XML έγγραφο.
    • Η Javascript κάνει Parse το XML της απάντησης.
    • Στη συνέχεια με χρήση του DOM προσπελαύνεται το στοιχείο της σελίδας που πρέπει να αλλαχθεί (πχ μια εικόνα, ένα data grid , ένα DIV κλπ).
  • 10. Πλεονεκτήματα
    • Μειώνει τον όγκο των δεδομένων που μεταφέρονται από τον Server.
    • Διαχωρίζει τα δεδομένα από τα γραφικά.
    • Δίνει την δυνατότητα να αναπτυχθούν πολύ εντυπωσιακές ιστοσελίδες.
    • Βασίζεται σε Open Standards.
  • 11. Μειονεκτήματα
    • Search engine optimization
    • Τα AJAX sites βασίζονται αποκλειστικά στην Javascript στην πλευρά του χρήστη.
    • Παλιές εκδόσεις Browser δεν είναι συμβατές με AJAX.
  • 12. ASP.NET AJAX Framework
    • Έχει αναπτυχθεί ειδικό Framework για δημιουργία AJAX ιστοσελίδων από .NET.
    • Περιέχει πολλά AJAX Components που δίνουν λύση στις ανάγκες του προγραμματιστή.
    • Υποστηρίζονται από όλους τους νέους Browsers.
    • Είναι extension για το Visual Studio 2005.
    • Επιτρέπει την εύκολη μετατροπή των υπαρχόντων ASP.NET sites σε AJAX sites.
  • 13. Εγκατάσταση (1)
    • Η εγκατάσταση του AJAX Extensions είναι πολύ απλή:
      • Κάνουμε Download το AJAX Extensions από το link http://www.asp.net/ajax/downloads/
      • Τρέχουμε το ASPAJAXExtSetup.msi
    • Αμέσως μετά την εγκατάσταση του AJAX Extensions μας δίνεται η δυνατότητα να γράψουμε τα πρώτα AJAX Websites.
  • 14. Screenshots (1)
  • 15. Screenshots ( 2 )
  • 16. Screenshots ( 3 )
  • 17. Εγκατάσταση (2)
    • Το ASP.NET AJAX Control Toolkit μας δίνει ακόμα περισσότερα Controls. Για να το εγκαταστήσουμε:
      • Κάνουμε Download του Toolkit από το link http://www.asp.net/ajax/ajaxcontroltoolkit/
      • Extract το zip file στον κατάλογο
      • C:Program FilesMicrosoft ASP.NETASP.NET 2.0 AJAX Extensions oolkit
      • Τρέχουμε το AjaxControlExtender.vsi
      • Ανοίγουμε το VS δημιουργούμε μια νέα tab στο toolbox και στη συνέχεια φορτώνουμε το αρχείο AjaxControlToolkit.dll
  • 18. Screenshots (1)
  • 19. Screenshots ( 2 )
  • 20. Screenshots ( 3 )
  • 21. Screenshots ( 4 )
  • 22. Screenshots ( 5 )
  • 23. Examples
    • U pdate panel ( ένα ή παραπάνω).
    • Triggers για Updates έξω από το Panel.
    • Confirm Button Extender .
    • Αλλαγή του ASP.NET σε AJAX ASP.NET site.
  • 24. Links
    • http://www.asp.net/ajax/downloads/
    • http://asp.net/learn/ajax-videos/
    • http://en.wikipedia.org/wiki/Ajax_(programming)
  • 25. Τέλος
    • Ερωτήσεις - Συζήτηση