ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Asynchronize with jQueryKevin Griffin
Developer for Antech SystemsChesapeake, VAMicrosoft MVP ¨C Client App DevASPInsiderLeader of Hampton Roads .NET Users GroupAbout Me
What is AJAX?Basic AJAX ImplementationAJAX ShortcutsGlobal HandlersDesign ConsiderationsAgenda
BuzzwordAsynchronous JavaScript and XmlAllows us to load or post data from the server without having to do post back.AJAX?
Asynchronous Don¡¯t block the current threadNo defined execution timeStart a call, and designate a callback method for when the call returns.Designing AJAX Applications
FireBughttp://getfirebug.com/Fiddlerhttp://www.fiddler2.com/AJAX ToolkitPsych!Tools for an AJAX Developer
Low level interface for making AJAX calls.Prototype:$.ajax(settings)jQuery.ajax()
urlUrl that jQuery should use for making the request.dataTypeThe type of data we¡¯re expecting from the response.Xml, JSON, Script, HtmlsuccessFunction to call if the AJAX call succeeds.errorFunction to call if the AJAX call fails.completeFunction to call when the AJAX call returns.  Success or Failure.Basic Settings
DemoBasic use of $.ajax()
Because developers are lazy.$.get()$.getJSON()$.getScript()$.post()$.load()FAILS SILENTLY!Shortcuts
DemoLet¡¯s take a shortcut
Keep track of AJAX events globally in your applications.$(element).ajaxComplete()$(element).ajaxError()$(element).ajaxSend()$(element).ajaxStart()$(element).ajaxStop()$(element).ajaxSuccess()Global Handlers
Demo	Implementing Global Event Handlers
Let the user know something is happeningProgress indicatorsLoading dialogsHandle errors gracefullyEither local or global handlersPlan for worst case scenariosDial up, hotel wirelessSEOBack ButtonDesign Considerations
DemoPutting It All Together
Email: kevin@kevgriffin.comTwitter: 1kevgriffhttp://www.kevgriffin.comContact Me

More Related Content

What's hot (20)

Better End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using ProtractorBetter End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using Protractor
Kasun Kodagoda
?
Sharing the pain using Protractor
Sharing the pain using ProtractorSharing the pain using Protractor
Sharing the pain using Protractor
Anand Bagmar
?
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
codeandyou forums
?
Heuristics to scale your framework
Heuristics to scale your frameworkHeuristics to scale your framework
Heuristics to scale your framework
vodQA
?
Integration and Acceptance Testing
Integration and Acceptance TestingIntegration and Acceptance Testing
Integration and Acceptance Testing
Alan Hecht
?
Testing nightwatch, by David Torroija
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David Torroija
David Torroija
?
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
?
Protractor training
Protractor trainingProtractor training
Protractor training
Sergiy Stotskiy
?
Cypress - Best Practices
Cypress - Best PracticesCypress - Best Practices
Cypress - Best Practices
Brian Mann
?
Mock Server Using WireMock
Mock Server Using WireMockMock Server Using WireMock
Mock Server Using WireMock
Globant
?
Front-End Testing: Demystified
Front-End Testing: DemystifiedFront-End Testing: Demystified
Front-End Testing: Demystified
Seth McLaughlin
?
Nightwatch at Tilt
Nightwatch at TiltNightwatch at Tilt
Nightwatch at Tilt
Dave King
?
ºÝºÝߣshare - Magento Imagine - Do You Queue
ºÝºÝߣshare - Magento Imagine - Do You QueueºÝºÝߣshare - Magento Imagine - Do You Queue
ºÝºÝߣshare - Magento Imagine - Do You Queue
10n Software, LLC
?
Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)
Hong Tat Yew
?
Making Watir and Cucumber an efficient tool for Web UI Automation
Making Watir and Cucumber an efficient tool for Web UI AutomationMaking Watir and Cucumber an efficient tool for Web UI Automation
Making Watir and Cucumber an efficient tool for Web UI Automation
Ruslan Strazhnyk
?
Cucumber ppt
Cucumber pptCucumber ppt
Cucumber ppt
Qwinix Technologies
?
Better Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component PatternBetter Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component Pattern
Sargis Sargsyan
?
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
Sriram Angajala
?
Behavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberBehavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using Cucumber
KMS Technology
?
Advanced Jasmine
Advanced JasmineAdvanced Jasmine
Advanced Jasmine
jbellsey
?
Better End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using ProtractorBetter End-to-End Testing with Page Objects Model using Protractor
Better End-to-End Testing with Page Objects Model using Protractor
Kasun Kodagoda
?
Sharing the pain using Protractor
Sharing the pain using ProtractorSharing the pain using Protractor
Sharing the pain using Protractor
Anand Bagmar
?
Protractor end-to-end testing framework for angular js
Protractor   end-to-end testing framework for angular jsProtractor   end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
codeandyou forums
?
Heuristics to scale your framework
Heuristics to scale your frameworkHeuristics to scale your framework
Heuristics to scale your framework
vodQA
?
Integration and Acceptance Testing
Integration and Acceptance TestingIntegration and Acceptance Testing
Integration and Acceptance Testing
Alan Hecht
?
Testing nightwatch, by David Torroija
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David Torroija
David Torroija
?
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
?
Cypress - Best Practices
Cypress - Best PracticesCypress - Best Practices
Cypress - Best Practices
Brian Mann
?
Mock Server Using WireMock
Mock Server Using WireMockMock Server Using WireMock
Mock Server Using WireMock
Globant
?
Front-End Testing: Demystified
Front-End Testing: DemystifiedFront-End Testing: Demystified
Front-End Testing: Demystified
Seth McLaughlin
?
Nightwatch at Tilt
Nightwatch at TiltNightwatch at Tilt
Nightwatch at Tilt
Dave King
?
ºÝºÝߣshare - Magento Imagine - Do You Queue
ºÝºÝߣshare - Magento Imagine - Do You QueueºÝºÝߣshare - Magento Imagine - Do You Queue
ºÝºÝߣshare - Magento Imagine - Do You Queue
10n Software, LLC
?
Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)Introduction to cypress in Angular (Chinese)
Introduction to cypress in Angular (Chinese)
Hong Tat Yew
?
Making Watir and Cucumber an efficient tool for Web UI Automation
Making Watir and Cucumber an efficient tool for Web UI AutomationMaking Watir and Cucumber an efficient tool for Web UI Automation
Making Watir and Cucumber an efficient tool for Web UI Automation
Ruslan Strazhnyk
?
Better Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component PatternBetter Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component Pattern
Sargis Sargsyan
?
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
Sriram Angajala
?
Behavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberBehavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using Cucumber
KMS Technology
?
Advanced Jasmine
Advanced JasmineAdvanced Jasmine
Advanced Jasmine
jbellsey
?

Viewers also liked (20)

raytheon annual reports 2005
raytheon annual reports 2005raytheon annual reports 2005
raytheon annual reports 2005
finance12
?
international paper Q3 2003 10-Q
international paper 	 Q3 2003 10-Qinternational paper 	 Q3 2003 10-Q
international paper Q3 2003 10-Q
finance12
?
Jenpowerpointetec442
Jenpowerpointetec442Jenpowerpointetec442
Jenpowerpointetec442
asatojen
?
Dream Works
Dream WorksDream Works
Dream Works
guest88bc551
?
emerson electricl Q1 2009 Earnings Presentation
emerson electricl Q1 2009 Earnings Presentationemerson electricl Q1 2009 Earnings Presentation
emerson electricl Q1 2009 Earnings Presentation
finance12
?
Social Commerce - Innovate 11
Social Commerce - Innovate 11Social Commerce - Innovate 11
Social Commerce - Innovate 11
Mark Logan
?
Converting trial users to paying customers
Converting trial users to paying customersConverting trial users to paying customers
Converting trial users to paying customers
Edward Masson
?
Linked In
Linked InLinked In
Linked In
mwoodring
?
How to make money from paid social
How to make money from paid socialHow to make money from paid social
How to make money from paid social
iCrossing
?
emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting
emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting  emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting
emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting
finance12
?
Portsurf - Web Content Management Experts
Portsurf - Web Content Management ExpertsPortsurf - Web Content Management Experts
Portsurf - Web Content Management Experts
G4S Conference
?
Crocodiles
CrocodilesCrocodiles
Crocodiles
G4S Conference
?
A Safe Environment
A Safe Environment A Safe Environment
A Safe Environment
Ianharrison
?
Using Numbers
Using NumbersUsing Numbers
Using Numbers
Morgan State University
?
Social Media Workshop Stichting Infix Uden
Social Media Workshop Stichting Infix UdenSocial Media Workshop Stichting Infix Uden
Social Media Workshop Stichting Infix Uden
Kees Romkes
?
Ideatoons
IdeatoonsIdeatoons
Ideatoons
vsimpelo
?
Staying Competitive in 2010
Staying Competitive in 2010Staying Competitive in 2010
Staying Competitive in 2010
iCrossing
?
raytheon annual reports 2005
raytheon annual reports 2005raytheon annual reports 2005
raytheon annual reports 2005
finance12
?
international paper Q3 2003 10-Q
international paper 	 Q3 2003 10-Qinternational paper 	 Q3 2003 10-Q
international paper Q3 2003 10-Q
finance12
?
Jenpowerpointetec442
Jenpowerpointetec442Jenpowerpointetec442
Jenpowerpointetec442
asatojen
?
emerson electricl Q1 2009 Earnings Presentation
emerson electricl Q1 2009 Earnings Presentationemerson electricl Q1 2009 Earnings Presentation
emerson electricl Q1 2009 Earnings Presentation
finance12
?
Social Commerce - Innovate 11
Social Commerce - Innovate 11Social Commerce - Innovate 11
Social Commerce - Innovate 11
Mark Logan
?
Converting trial users to paying customers
Converting trial users to paying customersConverting trial users to paying customers
Converting trial users to paying customers
Edward Masson
?
How to make money from paid social
How to make money from paid socialHow to make money from paid social
How to make money from paid social
iCrossing
?
emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting
emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting  emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting
emerson electricl Proxy Statement for 2009 Annual Shareholders Meeting
finance12
?
Portsurf - Web Content Management Experts
Portsurf - Web Content Management ExpertsPortsurf - Web Content Management Experts
Portsurf - Web Content Management Experts
G4S Conference
?
A Safe Environment
A Safe Environment A Safe Environment
A Safe Environment
Ianharrison
?
Social Media Workshop Stichting Infix Uden
Social Media Workshop Stichting Infix UdenSocial Media Workshop Stichting Infix Uden
Social Media Workshop Stichting Infix Uden
Kees Romkes
?
Staying Competitive in 2010
Staying Competitive in 2010Staying Competitive in 2010
Staying Competitive in 2010
iCrossing
?

Similar to Async (20)

Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
dominion
?
Ajax
AjaxAjax
Ajax
Bharath Palaksha
?
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
Venkat Pinagadi
?
Asp.Net Ajax Component Development
Asp.Net Ajax Component DevelopmentAsp.Net Ajax Component Development
Asp.Net Ajax Component Development
Chui-Wen Chiu
?
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
s_pradeep
?
Test strategy for web development
Test strategy for web developmentTest strategy for web development
Test strategy for web development
alice yang
?
Java EE 7 (Hamed Hatami)
Java EE 7 (Hamed Hatami)Java EE 7 (Hamed Hatami)
Java EE 7 (Hamed Hatami)
Hamed Hatami
?
"Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native ""Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native "
FDConf
?
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
alaa.moustafa
?
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
Praveen kumar
?
AJppt.pptx
AJppt.pptxAJppt.pptx
AJppt.pptx
SachinSingh217687
?
Javascript-heavy Salesforce Applications
Javascript-heavy Salesforce ApplicationsJavascript-heavy Salesforce Applications
Javascript-heavy Salesforce Applications
Salesforce Developers
?
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Matt Raible
?
Walther Ajax4
Walther Ajax4Walther Ajax4
Walther Ajax4
rsnarayanan
?
Scaling asp.net websites to millions of users
Scaling asp.net websites to millions of usersScaling asp.net websites to millions of users
Scaling asp.net websites to millions of users
oazabir
?
TY.BSc.IT Java QB U4
TY.BSc.IT Java QB U4TY.BSc.IT Java QB U4
TY.BSc.IT Java QB U4
Lokesh Singrol
?
Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
davejohnson
?
JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
Christian Johansen
?
Ajax
AjaxAjax
Ajax
Anaghabalakrishnan
?
mukesh
mukeshmukesh
mukesh
guest06dc4b2
?
Using Ajax In Domino Web Applications
Using Ajax In Domino Web ApplicationsUsing Ajax In Domino Web Applications
Using Ajax In Domino Web Applications
dominion
?
Asp.Net Ajax Component Development
Asp.Net Ajax Component DevelopmentAsp.Net Ajax Component Development
Asp.Net Ajax Component Development
Chui-Wen Chiu
?
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
s_pradeep
?
Test strategy for web development
Test strategy for web developmentTest strategy for web development
Test strategy for web development
alice yang
?
Java EE 7 (Hamed Hatami)
Java EE 7 (Hamed Hatami)Java EE 7 (Hamed Hatami)
Java EE 7 (Hamed Hatami)
Hamed Hatami
?
"Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native ""Service Worker: Let Your Web App Feel Like a Native "
"Service Worker: Let Your Web App Feel Like a Native "
FDConf
?
Javascript-heavy Salesforce Applications
Javascript-heavy Salesforce ApplicationsJavascript-heavy Salesforce Applications
Javascript-heavy Salesforce Applications
Salesforce Developers
?
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Matt Raible
?
Scaling asp.net websites to millions of users
Scaling asp.net websites to millions of usersScaling asp.net websites to millions of users
Scaling asp.net websites to millions of users
oazabir
?
Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
davejohnson
?

More from Kevin Griffin (7)

Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Kevin Griffin
?
Codemash - Building Custom node.js Modules
Codemash - Building Custom node.js ModulesCodemash - Building Custom node.js Modules
Codemash - Building Custom node.js Modules
Kevin Griffin
?
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High GearASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
Kevin Griffin
?
Robust Web APIs with node.js and Express
Robust Web APIs with node.js and ExpressRobust Web APIs with node.js and Express
Robust Web APIs with node.js and Express
Kevin Griffin
?
Building node.js Modules
Building node.js ModulesBuilding node.js Modules
Building node.js Modules
Kevin Griffin
?
ASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground UpASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground Up
Kevin Griffin
?
jQuery From the Ground Up
jQuery From the Ground UpjQuery From the Ground Up
jQuery From the Ground Up
Kevin Griffin
?
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Building Real Time Web Applications with SignalR (NoVA Code Camp 2015)
Kevin Griffin
?
Codemash - Building Custom node.js Modules
Codemash - Building Custom node.js ModulesCodemash - Building Custom node.js Modules
Codemash - Building Custom node.js Modules
Kevin Griffin
?
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High GearASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
Kevin Griffin
?
Robust Web APIs with node.js and Express
Robust Web APIs with node.js and ExpressRobust Web APIs with node.js and Express
Robust Web APIs with node.js and Express
Kevin Griffin
?
Building node.js Modules
Building node.js ModulesBuilding node.js Modules
Building node.js Modules
Kevin Griffin
?
ASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground UpASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground Up
Kevin Griffin
?
jQuery From the Ground Up
jQuery From the Ground UpjQuery From the Ground Up
jQuery From the Ground Up
Kevin Griffin
?

Async