SlideShare ist ein Scribd-Unternehmen logo
1 von 64
Downloaden Sie, um offline zu lesen
Charlie Perrins
          Lead Developer

 WEB APPLICATIONS DEVELOPMENT
AJAX & jQuery - Fri 18th March 2011
Introduction
Introduction

• Aims
• What is AJAX?
• Who uses it?
• Benefits
• Considerations
• When to use
• Lab Session Overview
Aims




       flickr.com/photos/ebolasmallpox/
Aims
Aims


•   Understand the term AJAX
Aims


•   Understand the term AJAX

•   Discuss why AJAX is useful
Aims


•   Understand the term AJAX

•   Discuss why AJAX is useful

•   Share examples of current use
Aims


•   Understand the term AJAX

•   Discuss why AJAX is useful

•   Share examples of current use

•   Lab Session: simple implementation
What is AJAX?




                flickr.com/photos/ebolasmallpox/
What is AJAX?
What is AJAX?

•   Asynchronous JavaScript and XML
What is AJAX?

•   Asynchronous JavaScript and XML

•   Mix of technologies
What is AJAX?

•   Asynchronous JavaScript and XML

•   Mix of technologies

•   XMLHttpRequest object
What is AJAX?

•   Asynchronous JavaScript and XML

•   Mix of technologies

•   XMLHttpRequest object

•   DON’T need jQuery, but it makes our lives easier
What is AJAX?

•   Asynchronous JavaScript and XML

•   Mix of technologies

•   XMLHttpRequest object

•   DON’T need jQuery, but it makes our lives easier

•   Web 2.0, darling...
What is AJAX?

•   Asynchronous JavaScript and XML

•   Mix of technologies

•   XMLHttpRequest object

•   DON’T need jQuery, but it makes our lives easier

•   Web 2.0, darling...

•   http://en.wikipedia.org/wiki/Ajax_(programming)
Principles




HTML FILE                SERVER
Principles



HTML PAGE         my-script.php



                                  SERVER
Principles



HTML PAGE               my-script.php



                                         SERVER

   HTML                 new-script.php
  BLOCK



            AJAX call
Who is using AJAX?




                     flickr.com/photos/ebolasmallpox/
EVERYONE!




            flickr.com/photos/ebolasmallpox/
Real-World Examples
Real-World Examples


•   Twitter
Real-World Examples


•   Twitter

•   Facebook
Real-World Examples


•   Twitter

•   Facebook

•   Apple
Real-World Examples


•   Twitter

•   Facebook

•   Apple

•   Google
Real-World Examples


•   Twitter

•   Facebook

•   Apple

•   Google

•   ...
Twitter - load new posts




                           flickr.com/photos/ebolasmallpox/
Facebook - chat, messages, ‘likes’



                                     flickr.com/photos/ebolasmallpox/
Apple - dynamic search bar

                             flickr.com/photos/ebolasmallpox/
Google Instant


                 flickr.com/photos/ebolasmallpox/
What are the Benefits?




                        flickr.com/photos/ebolasmallpox/
Benefits
Benefits


•   Client-side and Server-side scripting are blended
Benefits


•   Client-side and Server-side scripting are blended

•   Fast & responsive - don’t have to reload page for new info
Benefits


•   Client-side and Server-side scripting are blended

•   Fast & responsive - don’t have to reload page for new info

•   Saves server - not loading whole page just the specific parts
    that are changing
Benefits


•   Client-side and Server-side scripting are blended

•   Fast & responsive - don’t have to reload page for new info

•   Saves server - not loading whole page just the specific parts
    that are changing

•   Allows great complexity in web applications
    (Gmail - disable JS and see how it changes)
Gmail - normal
                 flickr.com/photos/ebolasmallpox/
Gmail - no JS
                flickr.com/photos/ebolasmallpox/
Considerations




                 flickr.com/photos/ebolasmallpox/
Some Considerations
Some Considerations



•   Reliant on JavaScript
Some Considerations



•   Reliant on JavaScript

•   Potential barrier for SEO
Some Considerations



•   Reliant on JavaScript

•   Potential barrier for SEO

•   URLs and the ‘Back’ button
Twitter - no JS
Facebook - no JS
Disabling JavaScript
JavaScript Reliance




•   What do we think of this?

•   Cater for the 2%?

•   Progressive enhancement / graceful degradation
SEO and AJAX
SEO and AJAX


•   Treat bots like no-js users - what content will they see?
SEO and AJAX


•   Treat bots like no-js users - what content will they see?

•   Is your app even indexable?
SEO and AJAX


•   Treat bots like no-js users - what content will they see?

•   Is your app even indexable?

•   Ensure you have solid IA & link structure
SEO and AJAX


•   Treat bots like no-js users - what content will they see?

•   Is your app even indexable?

•   Ensure you have solid IA & link structure

•   Remember ‘drop-down menus’?
SEO and AJAX


•   Treat bots like no-js users - what content will they see?

•   Is your app even indexable?

•   Ensure you have solid IA & link structure

•   Remember ‘drop-down menus’?

•   No excuses for bad HTML!
URLs & the ‘Back’ Button




•   AJAX-powered apps often not URL-hackable

•   Pagination - is this an issue?

•   Back button won’t change state
With great power...
When should we use AJAX?




                           flickr.com/photos/ebolasmallpox/
When to use AJAX




•   Unobtrusive database input/output

•   APIs

•   Unfamiliar scripting environments
Other Options




•   Show/Hide content

•   JavaScript tabs

•   Hyperlinks!
Lab Session




              flickr.com/photos/ebolasmallpox/
AJAX & jQuery - City University WAD Module
Basic Implementation




•   Simple HTML link

•   jQuery ‘click’ event

•   PHP - $_POST data

•   $.ajax() function
Charlie Perrins
          Lead Developer

 WEB APPLICATIONS DEVELOPMENT
AJAX & jQuery - Fri 18th March 2011

Weitere ähnliche Inhalte

Was ist angesagt?

Widening your JavaScript Application
Widening your JavaScript ApplicationWidening your JavaScript Application
Widening your JavaScript ApplicationAlex McPherson
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web DesignKoji Ishimoto
 
Rails Performance Tricks and Treats
Rails Performance Tricks and TreatsRails Performance Tricks and Treats
Rails Performance Tricks and TreatsMarshall Yount
 
Untangling - fall2017 - week5
Untangling - fall2017 - week5Untangling - fall2017 - week5
Untangling - fall2017 - week5Derek Jacoby
 
WordPress APIs
WordPress APIsWordPress APIs
WordPress APIsmdawaffe
 
Ember,js: Hipster Hamster Framework
Ember,js: Hipster Hamster FrameworkEmber,js: Hipster Hamster Framework
Ember,js: Hipster Hamster FrameworkBilly Shih
 
Modern websites in 2020 and Joomla
Modern websites in 2020 and JoomlaModern websites in 2020 and Joomla
Modern websites in 2020 and JoomlaGeorge Wilson
 
Untangling - fall2017 - week6
Untangling - fall2017 - week6Untangling - fall2017 - week6
Untangling - fall2017 - week6Derek Jacoby
 
Migration from Django to Ember
Migration from Django to EmberMigration from Django to Ember
Migration from Django to EmberLaura Berk
 
Untangling the web week 2 - SEO
Untangling the web week 2 - SEOUntangling the web week 2 - SEO
Untangling the web week 2 - SEODerek Jacoby
 
eMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseeMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseScott Taylor
 
REST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York TimesREST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York TimesScott Taylor
 
Different ways of integrating React into Rails - Mikhail Bortnyk
Different ways of integrating React into Rails - Mikhail BortnykDifferent ways of integrating React into Rails - Mikhail Bortnyk
Different ways of integrating React into Rails - Mikhail BortnykRuby Meditation
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflixmicahr
 
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & YouMykl Roventine
 
WordPress Rest API
WordPress Rest APIWordPress Rest API
WordPress Rest APIBrian Layman
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundationsean_todd
 

Was ist angesagt? (20)

A Day of REST
A Day of RESTA Day of REST
A Day of REST
 
Widening your JavaScript Application
Widening your JavaScript ApplicationWidening your JavaScript Application
Widening your JavaScript Application
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web Design
 
Rails Performance Tricks and Treats
Rails Performance Tricks and TreatsRails Performance Tricks and Treats
Rails Performance Tricks and Treats
 
Cloud tools
Cloud toolsCloud tools
Cloud tools
 
Untangling - fall2017 - week5
Untangling - fall2017 - week5Untangling - fall2017 - week5
Untangling - fall2017 - week5
 
Wwcode2
Wwcode2Wwcode2
Wwcode2
 
WordPress APIs
WordPress APIsWordPress APIs
WordPress APIs
 
Ember,js: Hipster Hamster Framework
Ember,js: Hipster Hamster FrameworkEmber,js: Hipster Hamster Framework
Ember,js: Hipster Hamster Framework
 
Modern websites in 2020 and Joomla
Modern websites in 2020 and JoomlaModern websites in 2020 and Joomla
Modern websites in 2020 and Joomla
 
Untangling - fall2017 - week6
Untangling - fall2017 - week6Untangling - fall2017 - week6
Untangling - fall2017 - week6
 
Migration from Django to Ember
Migration from Django to EmberMigration from Django to Ember
Migration from Django to Ember
 
Untangling the web week 2 - SEO
Untangling the web week 2 - SEOUntangling the web week 2 - SEO
Untangling the web week 2 - SEO
 
eMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseeMusic: WordPress in the Enterprise
eMusic: WordPress in the Enterprise
 
REST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York TimesREST In Action: The Live Coverage Platform at the New York Times
REST In Action: The Live Coverage Platform at the New York Times
 
Different ways of integrating React into Rails - Mikhail Bortnyk
Different ways of integrating React into Rails - Mikhail BortnykDifferent ways of integrating React into Rails - Mikhail Bortnyk
Different ways of integrating React into Rails - Mikhail Bortnyk
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflix
 
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You
 
WordPress Rest API
WordPress Rest APIWordPress Rest API
WordPress Rest API
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
 

Andere mochten auch

03 Web Events and jQuery
03 Web Events and jQuery03 Web Events and jQuery
03 Web Events and jQuerycrgwbr
 
jQuery Events
jQuery EventsjQuery Events
jQuery Eventsnek4life
 
Secrets of Awesome JavaScript API Design
Secrets of Awesome JavaScript API DesignSecrets of Awesome JavaScript API Design
Secrets of Awesome JavaScript API DesignBrandon Satrom
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!Wildan Maulana
 

Andere mochten auch (6)

03 Web Events and jQuery
03 Web Events and jQuery03 Web Events and jQuery
03 Web Events and jQuery
 
Jquery
JqueryJquery
Jquery
 
jQuery Events
jQuery EventsjQuery Events
jQuery Events
 
Secrets of Awesome JavaScript API Design
Secrets of Awesome JavaScript API DesignSecrets of Awesome JavaScript API Design
Secrets of Awesome JavaScript API Design
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 

Ähnlich wie AJAX & jQuery - City University WAD Module

Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Jeremy Likness
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
 
jQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new featuresjQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new featuresRyan Blunden
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebChris Canal
 
Introduction to Ember.js and how we used it at FlowPro.io
Introduction to Ember.js and how we used it at FlowPro.ioIntroduction to Ember.js and how we used it at FlowPro.io
Introduction to Ember.js and how we used it at FlowPro.ioPaul Knittel
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angularBasarat Syed
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Restful风格ž„web服务架构
Restful风格ž„web服务架构Restful风格ž„web服务架构
Restful风格ž„web服务架构Benjamin Tan
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadRuss Fustino
 
The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your websitehernanibf
 
Intro to jQuery for Drupal
Intro to jQuery for DrupalIntro to jQuery for Drupal
Intro to jQuery for Drupaljhamiltoorion
 
Riding the Edge with Ember.js
Riding the Edge with Ember.jsRiding the Edge with Ember.js
Riding the Edge with Ember.jsaortbals
 
WebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsWebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsPop Apps
 

Ähnlich wie AJAX & jQuery - City University WAD Module (20)

Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
ITT Flisol 2013
ITT Flisol 2013ITT Flisol 2013
ITT Flisol 2013
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
Frontend as a first class citizen
Frontend as a first class citizenFrontend as a first class citizen
Frontend as a first class citizen
 
jQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new featuresjQuery 1.4-1.6 Best new features
jQuery 1.4-1.6 Best new features
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Presentation
PresentationPresentation
Presentation
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
Introduction to Ember.js and how we used it at FlowPro.io
Introduction to Ember.js and how we used it at FlowPro.ioIntroduction to Ember.js and how we used it at FlowPro.io
Introduction to Ember.js and how we used it at FlowPro.io
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
Single page App
Single page AppSingle page App
Single page App
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Restful风格ž„web服务架构
Restful风格ž„web服务架构Restful风格ž„web服务架构
Restful风格ž„web服务架构
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
 
Titanium Alloy Tutorial
Titanium Alloy TutorialTitanium Alloy Tutorial
Titanium Alloy Tutorial
 
Intro to jQuery for Drupal
Intro to jQuery for DrupalIntro to jQuery for Drupal
Intro to jQuery for Drupal
 
Riding the Edge with Ember.js
Riding the Edge with Ember.jsRiding the Edge with Ember.js
Riding the Edge with Ember.js
 
WebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsWebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page Apps
 

AJAX & jQuery - City University WAD Module

  • 1. Charlie Perrins Lead Developer WEB APPLICATIONS DEVELOPMENT AJAX & jQuery - Fri 18th March 2011
  • 3. Introduction • Aims • What is AJAX? • Who uses it? • Benefits • Considerations • When to use • Lab Session Overview
  • 4. Aims flickr.com/photos/ebolasmallpox/
  • 6. Aims • Understand the term AJAX
  • 7. Aims • Understand the term AJAX • Discuss why AJAX is useful
  • 8. Aims • Understand the term AJAX • Discuss why AJAX is useful • Share examples of current use
  • 9. Aims • Understand the term AJAX • Discuss why AJAX is useful • Share examples of current use • Lab Session: simple implementation
  • 10. What is AJAX? flickr.com/photos/ebolasmallpox/
  • 12. What is AJAX? • Asynchronous JavaScript and XML
  • 13. What is AJAX? • Asynchronous JavaScript and XML • Mix of technologies
  • 14. What is AJAX? • Asynchronous JavaScript and XML • Mix of technologies • XMLHttpRequest object
  • 15. What is AJAX? • Asynchronous JavaScript and XML • Mix of technologies • XMLHttpRequest object • DON’T need jQuery, but it makes our lives easier
  • 16. What is AJAX? • Asynchronous JavaScript and XML • Mix of technologies • XMLHttpRequest object • DON’T need jQuery, but it makes our lives easier • Web 2.0, darling...
  • 17. What is AJAX? • Asynchronous JavaScript and XML • Mix of technologies • XMLHttpRequest object • DON’T need jQuery, but it makes our lives easier • Web 2.0, darling... • http://en.wikipedia.org/wiki/Ajax_(programming)
  • 19. Principles HTML PAGE my-script.php SERVER
  • 20. Principles HTML PAGE my-script.php SERVER HTML new-script.php BLOCK AJAX call
  • 21. Who is using AJAX? flickr.com/photos/ebolasmallpox/
  • 22. EVERYONE! flickr.com/photos/ebolasmallpox/
  • 25. Real-World Examples • Twitter • Facebook
  • 26. Real-World Examples • Twitter • Facebook • Apple
  • 27. Real-World Examples • Twitter • Facebook • Apple • Google
  • 28. Real-World Examples • Twitter • Facebook • Apple • Google • ...
  • 29. Twitter - load new posts flickr.com/photos/ebolasmallpox/
  • 30. Facebook - chat, messages, ‘likes’ flickr.com/photos/ebolasmallpox/
  • 31. Apple - dynamic search bar flickr.com/photos/ebolasmallpox/
  • 32. Google Instant flickr.com/photos/ebolasmallpox/
  • 33. What are the Benefits? flickr.com/photos/ebolasmallpox/
  • 35. Benefits • Client-side and Server-side scripting are blended
  • 36. Benefits • Client-side and Server-side scripting are blended • Fast & responsive - don’t have to reload page for new info
  • 37. Benefits • Client-side and Server-side scripting are blended • Fast & responsive - don’t have to reload page for new info • Saves server - not loading whole page just the specific parts that are changing
  • 38. Benefits • Client-side and Server-side scripting are blended • Fast & responsive - don’t have to reload page for new info • Saves server - not loading whole page just the specific parts that are changing • Allows great complexity in web applications (Gmail - disable JS and see how it changes)
  • 39. Gmail - normal flickr.com/photos/ebolasmallpox/
  • 40. Gmail - no JS flickr.com/photos/ebolasmallpox/
  • 41. Considerations flickr.com/photos/ebolasmallpox/
  • 43. Some Considerations • Reliant on JavaScript
  • 44. Some Considerations • Reliant on JavaScript • Potential barrier for SEO
  • 45. Some Considerations • Reliant on JavaScript • Potential barrier for SEO • URLs and the ‘Back’ button
  • 49. JavaScript Reliance • What do we think of this? • Cater for the 2%? • Progressive enhancement / graceful degradation
  • 51. SEO and AJAX • Treat bots like no-js users - what content will they see?
  • 52. SEO and AJAX • Treat bots like no-js users - what content will they see? • Is your app even indexable?
  • 53. SEO and AJAX • Treat bots like no-js users - what content will they see? • Is your app even indexable? • Ensure you have solid IA & link structure
  • 54. SEO and AJAX • Treat bots like no-js users - what content will they see? • Is your app even indexable? • Ensure you have solid IA & link structure • Remember ‘drop-down menus’?
  • 55. SEO and AJAX • Treat bots like no-js users - what content will they see? • Is your app even indexable? • Ensure you have solid IA & link structure • Remember ‘drop-down menus’? • No excuses for bad HTML!
  • 56. URLs & the ‘Back’ Button • AJAX-powered apps often not URL-hackable • Pagination - is this an issue? • Back button won’t change state
  • 58. When should we use AJAX? flickr.com/photos/ebolasmallpox/
  • 59. When to use AJAX • Unobtrusive database input/output • APIs • Unfamiliar scripting environments
  • 60. Other Options • Show/Hide content • JavaScript tabs • Hyperlinks!
  • 61. Lab Session flickr.com/photos/ebolasmallpox/
  • 63. Basic Implementation • Simple HTML link • jQuery ‘click’ event • PHP - $_POST data • $.ajax() function
  • 64. Charlie Perrins Lead Developer WEB APPLICATIONS DEVELOPMENT AJAX & jQuery - Fri 18th March 2011

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. It’s all the in-page events - star ratings, drag-n-drop, that we can’t access\n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n