AJAX Communication in Sencha Touch & ExtJS

Transcript

1. Presented by Art Kay
2. Who am I? ž  Arthur Kay —  Solutions Engineer at Sencha, Inc. —  Longtime ExtJS fanatic —  Web developer for 10+ years —  www.akawebdesign.com —  @arthurakay
3. Sencha Chicago User Group ž  Looking for: —  Speakers —  Ideas —  Giveaways —  Sponsors ž  GET INVOLVED!
4. Agenda ž  What does AJAX really mean? ž  Types: —  Stand-alone AJAX requests —  Data Stores —  Form Submissions —  JSONP —  Ext.Direct ž  Example: Creating/Aborting a request ž  Questions
5. What the #$%& is AJAX? ž  A_synchronous ž  J_avaScript ž  A_nd ž  X_ML ž  Circa 1999… now AJASS? (Asynchronous JS and Some Stuff) ž  Really means any asynchronous communication between client/server
6. Stand-alone AJAX Requests ž  Ext.Ajax() —  ExtJS 3 & 4, Sencha Touch ž  Instance of Ext.data.Connection() —  Inherits from Ext.util.Observable() —  ExtJS3 uses Ext.lib.Ajax() (ext-base.js) ž  request() and abort()
7. Data Stores (ExtJS 3 and Touch) ž  Data stores use a DataProxy() —  HttpProxy() defaults to Ext.Ajax(), but can be configured with new Ext.data.Connection() —  ScriptTagProxy() – for use with JSONP ž  Accept a variety of data formats: —  XML —  JSON —  JSONP ž  Great for RESTful APIs
8. Data Stores (ExtJS 4) ž  Ext.data.proxy.Server() —  Sub-classes include Rest(), Ajax(), JsonP() —  Define appropriate reader
9. Form Submissions ž  FormPanel() creates an instance of Ext.form.BasicForm() ž  Ext.form.Action.Load() and Ext.form.Action.Submit() use Ext.Ajax() internally ž  “standardSubmit” config will not use internal AJAX communication! —  Callbacks and debugging are tricky
10. JSONP ž  Use Ext.data.ScriptTagProxy() —  Ext.data.proxy.JsonP() and Ext.data.JsonP in ExtJS 4 ž  Allows cross-domain scripting
11. Ext.Direct
12. Example ž  Creating and Aborting a request using Ext.Ajax()
13. Questions