SlideShare a Scribd company logo
AJAX, JSON, AND
CLIENT SIDE TEMPLATES
AJAX
• Asynchronous Javascript And XML
  • HTML and CSS
  • Document Object Model
  • XML and XSLT
  • XMLHttpRequest
  • JavaScript
Web 1.0




          Example: www.ebay.ca
Web 2.0!




           Example: dhtmlxScheduler
JSON
• JavaScript Object Notation
   • Lightweight data-interchange format
   • Easy for humans to read and write
   • Easy for machines to parse and generate
JSON
• Built on two structures:
  • Name value pairs (aka object)
       { Name: “Value”, Name2: 2, Name3: true }


  • Ordered list of values (aka array)
       [ “value”, 2, true ]


  • Combination thereof
       [ { Name: “Object 1”, Numbers: [1,2,3] },
         { Name: “Object 2”, Numbers: [4,5,6] } ]

  • Virtually all languages support these structures
JSON vs XML
JSON vs XML
Old HTML Way
               Page,
               ViewPerPage, ID
               Search,
               Name Search,
               SKU Search, Price
               From,
               Price To, Position
               From, Position To
AJAX Partial Rendering Way

                ID Search,
                Name Search,
                SKU Search,
                Price From,
                Price To, Position
                From, Position To
Client Side Templates


                                         GET /Products?Page=2




   [ {Product}, {Product}, {Product} ]
Client Side Templates
• Pros
  • Separation of data and layout
  • Faster page load
    • No wait time on server, simply serving up a HTML document
    • Less content
  • Less network traffic
    • Smaller requests and responses
  • Server doesn’t have to worry about generating HTML
  • Able to maintain page state in JavaScript if needed
  • Lots of opportunities to cache
Client Side Templates
• Cons
  • Initial page load is essentially empty
     • Bad idea for pages you want indexed by a search engine
  • JavaScript heavy
  • No canned controls
  • Async can be tough on groups of objects or sequential operations
Example!



           http://localhost:8080/Playlists
Questions!?
Ad

More Related Content

What's hot (18)

Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
alaa.moustafa
 
Css3 Presetation
Css3 PresetationCss3 Presetation
Css3 Presetation
Nicole Glasgow
 
Ajax
AjaxAjax
Ajax
AdamGyohannes
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
OECLIB Odisha Electronics Control Library
 
Comparisons of web languages
Comparisons of web languagesComparisons of web languages
Comparisons of web languages
Evelyn Loh
 
Web Scraping Technologies
Web Scraping TechnologiesWeb Scraping Technologies
Web Scraping Technologies
Krishna Sunuwar
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programming
hchen1
 
Ajax Presentation
Ajax PresentationAjax Presentation
Ajax Presentation
jrdoane
 
Ajax
AjaxAjax
Ajax
Shivam Jaiswal
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
MAGNA COLLEGE OF ENGINEERING
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
Bharat_Kumawat
 
MongoDB at CodeMash 2.0.1.0
MongoDB at CodeMash 2.0.1.0MongoDB at CodeMash 2.0.1.0
MongoDB at CodeMash 2.0.1.0
Mike Dirolf
 
AJAX
AJAXAJAX
AJAX
Matthew Monroe
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
JayaPrakash.m
 
Ajax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web ApplicationsAjax:From Desktop Applications towards Ajax Web Applications
Ajax:From Desktop Applications towards Ajax Web Applications
Siva Kumar
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
engcs2008
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
thinkphp
 
Introduction to ajax
Introduction  to  ajaxIntroduction  to  ajax
Introduction to ajax
Pihu Goel
 

Similar to AJAX, JSON, and Client-Side Templates (20)

Ajax
AjaxAjax
Ajax
baabtra.com - No. 1 supplier of quality freshers
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
Nir Elbaz
 
Ajax workshop
Ajax workshopAjax workshop
Ajax workshop
WBUTTUTORIALS
 
JAVA EE DEVELOPMENT (JSP and Servlets)
JAVA EE DEVELOPMENT (JSP and Servlets)JAVA EE DEVELOPMENT (JSP and Servlets)
JAVA EE DEVELOPMENT (JSP and Servlets)
Talha Ocakçı
 
REST easy with API Platform
REST easy with API PlatformREST easy with API Platform
REST easy with API Platform
Antonio Peric-Mazar
 
Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2
kriszyp
 
Building a spa_in_30min
Building a spa_in_30minBuilding a spa_in_30min
Building a spa_in_30min
Michael Hackstein
 
Building a spa_in_30min
Building a spa_in_30minBuilding a spa_in_30min
Building a spa_in_30min
ArangoDB Database
 
SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...
Liam Cleary [MVP]
 
Ajax Lecture Notes
Ajax Lecture NotesAjax Lecture Notes
Ajax Lecture Notes
Santhiya Grace
 
PHP - Introduction to PHP AJAX
PHP -  Introduction to PHP AJAXPHP -  Introduction to PHP AJAX
PHP - Introduction to PHP AJAX
Vibrant Technologies & Computers
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
Mark Rackley
 
Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007
ClubHack
 
Ajax tutorial
Ajax tutorialAjax tutorial
Ajax tutorial
Kat Roque
 
Ajax
AjaxAjax
Ajax
Sanoj Kumar
 
AJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptxAJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptx
Jobin86
 
Web technologies-course 10.pptx
Web technologies-course 10.pptxWeb technologies-course 10.pptx
Web technologies-course 10.pptx
Stefan Oprea
 
Introduction to AJAX
Introduction to AJAXIntroduction to AJAX
Introduction to AJAX
Abzetdin Adamov
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
Oliver Cai
 
Service-oriented software engineering & APIs
Service-oriented software engineering & APIsService-oriented software engineering & APIs
Service-oriented software engineering & APIs
Matrix823409
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
Nir Elbaz
 
JAVA EE DEVELOPMENT (JSP and Servlets)
JAVA EE DEVELOPMENT (JSP and Servlets)JAVA EE DEVELOPMENT (JSP and Servlets)
JAVA EE DEVELOPMENT (JSP and Servlets)
Talha Ocakçı
 
Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2Java Script Based Client Server Webapps 2
Java Script Based Client Server Webapps 2
kriszyp
 
SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...SharePoint Saturday The Conference DC - How the client object model saved the...
SharePoint Saturday The Conference DC - How the client object model saved the...
Liam Cleary [MVP]
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
Mark Rackley
 
Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007
ClubHack
 
Ajax tutorial
Ajax tutorialAjax tutorial
Ajax tutorial
Kat Roque
 
AJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptxAJAX Introduction [Autosaved].pptx
AJAX Introduction [Autosaved].pptx
Jobin86
 
Web technologies-course 10.pptx
Web technologies-course 10.pptxWeb technologies-course 10.pptx
Web technologies-course 10.pptx
Stefan Oprea
 
Ajax Introduction
Ajax IntroductionAjax Introduction
Ajax Introduction
Oliver Cai
 
Service-oriented software engineering & APIs
Service-oriented software engineering & APIsService-oriented software engineering & APIs
Service-oriented software engineering & APIs
Matrix823409
 
Ad

More from RTigger (20)

You Can't Buy Agile
You Can't Buy AgileYou Can't Buy Agile
You Can't Buy Agile
RTigger
 
Caching up is hard to do: Improving your Web Services' Performance
Caching up is hard to do: Improving your Web Services' PerformanceCaching up is hard to do: Improving your Web Services' Performance
Caching up is hard to do: Improving your Web Services' Performance
RTigger
 
Ready, set, go! An introduction to the Go programming language
Ready, set, go! An introduction to the Go programming languageReady, set, go! An introduction to the Go programming language
Ready, set, go! An introduction to the Go programming language
RTigger
 
Open source web services
Open source web servicesOpen source web services
Open source web services
RTigger
 
How to hire a hacker
How to hire a hackerHow to hire a hacker
How to hire a hacker
RTigger
 
Windows 8 programming with html and java script
Windows 8 programming with html and java scriptWindows 8 programming with html and java script
Windows 8 programming with html and java script
RTigger
 
Open regina
Open reginaOpen regina
Open regina
RTigger
 
Single page apps and the web of tomorrow
Single page apps and the web of tomorrowSingle page apps and the web of tomorrow
Single page apps and the web of tomorrow
RTigger
 
Async in .NET
Async in .NETAsync in .NET
Async in .NET
RTigger
 
Give your web apps some backbone
Give your web apps some backboneGive your web apps some backbone
Give your web apps some backbone
RTigger
 
Hackers, hackathons, and you
Hackers, hackathons, and youHackers, hackathons, and you
Hackers, hackathons, and you
RTigger
 
JavaScript!
JavaScript!JavaScript!
JavaScript!
RTigger
 
Parallel Processing
Parallel ProcessingParallel Processing
Parallel Processing
RTigger
 
Node.js
Node.jsNode.js
Node.js
RTigger
 
Reactive Extensions
Reactive ExtensionsReactive Extensions
Reactive Extensions
RTigger
 
Sql vs NoSQL
Sql vs NoSQLSql vs NoSQL
Sql vs NoSQL
RTigger
 
Git’in Jiggy With Git
Git’in Jiggy With GitGit’in Jiggy With Git
Git’in Jiggy With Git
RTigger
 
What The F#
What The F#What The F#
What The F#
RTigger
 
Web Services
Web ServicesWeb Services
Web Services
RTigger
 
Total Engagement
Total EngagementTotal Engagement
Total Engagement
RTigger
 
You Can't Buy Agile
You Can't Buy AgileYou Can't Buy Agile
You Can't Buy Agile
RTigger
 
Caching up is hard to do: Improving your Web Services' Performance
Caching up is hard to do: Improving your Web Services' PerformanceCaching up is hard to do: Improving your Web Services' Performance
Caching up is hard to do: Improving your Web Services' Performance
RTigger
 
Ready, set, go! An introduction to the Go programming language
Ready, set, go! An introduction to the Go programming languageReady, set, go! An introduction to the Go programming language
Ready, set, go! An introduction to the Go programming language
RTigger
 
Open source web services
Open source web servicesOpen source web services
Open source web services
RTigger
 
How to hire a hacker
How to hire a hackerHow to hire a hacker
How to hire a hacker
RTigger
 
Windows 8 programming with html and java script
Windows 8 programming with html and java scriptWindows 8 programming with html and java script
Windows 8 programming with html and java script
RTigger
 
Open regina
Open reginaOpen regina
Open regina
RTigger
 
Single page apps and the web of tomorrow
Single page apps and the web of tomorrowSingle page apps and the web of tomorrow
Single page apps and the web of tomorrow
RTigger
 
Async in .NET
Async in .NETAsync in .NET
Async in .NET
RTigger
 
Give your web apps some backbone
Give your web apps some backboneGive your web apps some backbone
Give your web apps some backbone
RTigger
 
Hackers, hackathons, and you
Hackers, hackathons, and youHackers, hackathons, and you
Hackers, hackathons, and you
RTigger
 
JavaScript!
JavaScript!JavaScript!
JavaScript!
RTigger
 
Parallel Processing
Parallel ProcessingParallel Processing
Parallel Processing
RTigger
 
Reactive Extensions
Reactive ExtensionsReactive Extensions
Reactive Extensions
RTigger
 
Sql vs NoSQL
Sql vs NoSQLSql vs NoSQL
Sql vs NoSQL
RTigger
 
Git’in Jiggy With Git
Git’in Jiggy With GitGit’in Jiggy With Git
Git’in Jiggy With Git
RTigger
 
What The F#
What The F#What The F#
What The F#
RTigger
 
Web Services
Web ServicesWeb Services
Web Services
RTigger
 
Total Engagement
Total EngagementTotal Engagement
Total Engagement
RTigger
 
Ad

Recently uploaded (20)

What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
How analogue intelligence complements AI
How analogue intelligence complements AIHow analogue intelligence complements AI
How analogue intelligence complements AI
Paul Rowe
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfComplete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Software Company
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
How analogue intelligence complements AI
How analogue intelligence complements AIHow analogue intelligence complements AI
How analogue intelligence complements AI
Paul Rowe
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 

AJAX, JSON, and Client-Side Templates

  • 1. AJAX, JSON, AND CLIENT SIDE TEMPLATES
  • 2. AJAX • Asynchronous Javascript And XML • HTML and CSS • Document Object Model • XML and XSLT • XMLHttpRequest • JavaScript
  • 3. Web 1.0 Example: www.ebay.ca
  • 4. Web 2.0! Example: dhtmlxScheduler
  • 5. JSON • JavaScript Object Notation • Lightweight data-interchange format • Easy for humans to read and write • Easy for machines to parse and generate
  • 6. JSON • Built on two structures: • Name value pairs (aka object) { Name: “Value”, Name2: 2, Name3: true } • Ordered list of values (aka array) [ “value”, 2, true ] • Combination thereof [ { Name: “Object 1”, Numbers: [1,2,3] }, { Name: “Object 2”, Numbers: [4,5,6] } ] • Virtually all languages support these structures
  • 9. Old HTML Way Page, ViewPerPage, ID Search, Name Search, SKU Search, Price From, Price To, Position From, Position To
  • 10. AJAX Partial Rendering Way ID Search, Name Search, SKU Search, Price From, Price To, Position From, Position To
  • 11. Client Side Templates GET /Products?Page=2 [ {Product}, {Product}, {Product} ]
  • 12. Client Side Templates • Pros • Separation of data and layout • Faster page load • No wait time on server, simply serving up a HTML document • Less content • Less network traffic • Smaller requests and responses • Server doesn’t have to worry about generating HTML • Able to maintain page state in JavaScript if needed • Lots of opportunities to cache
  • 13. Client Side Templates • Cons • Initial page load is essentially empty • Bad idea for pages you want indexed by a search engine • JavaScript heavy • No canned controls • Async can be tough on groups of objects or sequential operations
  • 14. Example! http://localhost:8080/Playlists

Editor's Notes

  • #3: DOM – represents the document as an object,used to create and manipulate elements on a webpageXML – initial standard for transmitting data to and from a web serviceXMLHttpRequest – component that allows a browser to send a web request independent of a page request
  • #4: The blanks on the client side represent page loading, waiting on the server, and a locked UISystem processing includes processing the request input (viewstate, cookies, authentication, get & post vars), any database or other resource calls necessary to create the page, and the actual generation of the HTML to send to the client
  • #5: Ajax allows a consistent and responsive user experienceAjax engine runs on a separate thread from the UI and sends and receives data in the backgroundServer is now only responsible for processing input, making any resource calls it needs, and sending data as output
  • #8: Example result from twitter search APIExtra “fat” in XML:Schema definitionsTag syntaxEscaped XML characters
  • #9: Same result from twitter search APIMorereadable, no unnecessary content
  • #10: The entire form’s content is transmitted every request, and the entire page’s content is rendered on the server and transmitted every response
  • #11: Only the required fields (or at least a subset of all the fields) is sent in the request, and only the affected area(s) of the page are rendered and sent in the response
  • #12: Initially, the server only sends you the static controls for a page, as well as templates for how to represent the data it’s about to receiveThe browser, once loaded, makes a request for the data to displayThe server processes the request and sends back only the data requestedThe browser combines the data from the server with the client-side template to build the rest of the webpage
  • #14: Client Side Templates is a good idea for dynamic, task-driven web applications. It’s not a good idea for blogs, corporate websites, or anything that is mostly static content that needs to be indexed.
  • #15: Start website with debug attached to slow down requestsPoint out how fast initial page loaded (net panel)Show how we’re making three API calls after the page loadsDemonstrate client side template (view source), and then data received from API (catalog call), and finally how it looks on pageShow how categories works now that products are loaded locallyShow how loading a playlist worksShow how an add operation works (drag product to playlist)Show how a bulk operation might work