SlideShare a Scribd company logo
AJAX and JSON
Lecture Outline

 JSON

 AJAX
AJAX and JSON
JSON

 http://www.json.org/

 A lightweight data-interchange format.

 Humans readable.

 Easy for machines to parse and generate.

 A text format that is completely language independent.

 An ideal data-interchange language.
JSON (Cont’d)

 Built on two structures:
    A collection of name/value pairs (object)
        An object begins with { and ends with }. Each name is
         followed by : and the name/value pairs are separated by
         ‘,’ .
        An ordered list of values (array)
              An array begins with [ and ends with ]. Values are
               separated by ‘,’ .

 A value can be a string in double quotes, or a number, or
  true or false or null, or an object or an array.
JSON (Cont’d)

 There are libraries in nearly all languages to parse
  JSON files.

 In JavaScript, these libraries contain function to
  convert from objects to json text and vice versa.
Try JSON Library
AJAX and JSON
AJAX

 Allows client-side JavaScript to request and receive
  data from a server without refreshing the web page.

 Only partial reload occurs

 Jesse James Garrett originally coined the term Ajax in
  2005.
  (www.adaptivepath.com/publications/essays/archives
  /000385.php ).

 Let web applications look and behave more like
  desktop applications than web sites,
AJAX and JSON
Steps to send a simple ajax
           request
1. Create XMLHttpRequest Object

2. Open the request, set the HTTP method and URL

3. Set callback for onreadychange

4. Send asynchronous request

5. Create an event to call the previous steps
AJAX and JSON
Sending Request

 var xhr = new XMLHttpRequest();

 xhr.onreadystatechange = myCallback;

 xhr.open('GET', 'somefile.txt', true);

 xhr.send('');
For Cross-browser
  compatibility
readyState values

Value       Description
0           Uninitialized
1           Loading
2           Loaded
3           Interactive
4           Complete
Some status values

Value        Description
200          Ok
204          No content
401          UnAuthorized
404          Not Found
411          Request Timeout
Processing Request

function myCallback() {
   if (xhr.readyState < 4) {
        return;
   }
   if (xhr.status !== 200) {
        alert('Error!'); // the HTTP status code is not OK
        return;
   }
        alert(xhr.responseText);
   }
Try Ajax
Use Developer tools
References
 Object-Oriented JavaScript Create Scalable, reusable, high
  quality JavaScript applications and libraries, Stoyan Stefanov,
  2008.

 ECMAScript Language Specification, 5.1 edition, July 2011,
  http://www.ecma-international.org/

 Beginning JavaScript, 4th Edition, Paul Wilton, Jeremy
  McPeak, 2010
Ad

More Related Content

What's hot (20)

Functional patterns and techniques in C#
Functional patterns and techniques in C#Functional patterns and techniques in C#
Functional patterns and techniques in C#
Péter Takács
 
6 xml parsing
6   xml parsing6   xml parsing
6 xml parsing
gauravashq
 
32sql server
32sql server32sql server
32sql server
Sireesh K
 
Lambdas HOL
Lambdas HOLLambdas HOL
Lambdas HOL
Oleg Tsal-Tsalko
 
Sax parser
Sax parserSax parser
Sax parser
Mahara Jothi
 
30csharp
30csharp30csharp
30csharp
Sireesh K
 
Xml parsing
Xml parsingXml parsing
Xml parsing
Malintha Adikari
 
jTransfo lightning talk
jTransfo lightning talkjTransfo lightning talk
jTransfo lightning talk
Joachim Van der Auwera
 
Parsing XML Data
Parsing XML DataParsing XML Data
Parsing XML Data
Mu Chun Wang
 
3. Java Script
3. Java Script3. Java Script
3. Java Script
Jalpesh Vasa
 
06 xml processing-in-.net
06 xml processing-in-.net06 xml processing-in-.net
06 xml processing-in-.net
glubox
 
Javascript
JavascriptJavascript
Javascript
Prashant Kumar
 
ClevelandDayofDotNet_JoshClark
ClevelandDayofDotNet_JoshClarkClevelandDayofDotNet_JoshClark
ClevelandDayofDotNet_JoshClark
Joshua S. Clark, CISSP
 
Odoo Technical Concepts Summary
Odoo Technical Concepts SummaryOdoo Technical Concepts Summary
Odoo Technical Concepts Summary
Mohamed Magdy
 
Functional programming with Scala
Functional programming with ScalaFunctional programming with Scala
Functional programming with Scala
Neelkanth Sachdeva
 
XML SAX PARSING
XML SAX PARSING XML SAX PARSING
XML SAX PARSING
Eviatar Levy
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
 
Functions & closures
Functions & closuresFunctions & closures
Functions & closures
Knoldus Inc.
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
Abul Hasan
 
Modern Java Features
Modern Java Features Modern Java Features
Modern Java Features
Florian Hopf
 

Viewers also liked (12)

How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
Simon Willison
 
JSON and AJAX JumpStart
JSON and AJAX JumpStartJSON and AJAX JumpStart
JSON and AJAX JumpStart
dominion
 
Dynamic webpages using AJAX & JSON
Dynamic webpages using AJAX & JSONDynamic webpages using AJAX & JSON
Dynamic webpages using AJAX & JSON
Christiaan Rakowski
 
Ajax by Examples 2
Ajax by Examples 2Ajax by Examples 2
Ajax by Examples 2
Yenwen Feng
 
08 ajax
08 ajax08 ajax
08 ajax
Ynon Perek
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentals
Simon Willison
 
Introduction to JSON & AJAX
Introduction to JSON & AJAXIntroduction to JSON & AJAX
Introduction to JSON & AJAX
Collaboration Technologies
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
Rodrigo Branas
 
Introduction to JSON
Introduction to JSONIntroduction to JSON
Introduction to JSON
Kanda Runapongsa Saikaew
 
Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3
Matt Raible
 
External Data Access with jQuery
External Data Access with jQueryExternal Data Access with jQuery
External Data Access with jQuery
Doncho Minkov
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slides
Smithss25
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
Simon Willison
 
JSON and AJAX JumpStart
JSON and AJAX JumpStartJSON and AJAX JumpStart
JSON and AJAX JumpStart
dominion
 
Dynamic webpages using AJAX & JSON
Dynamic webpages using AJAX & JSONDynamic webpages using AJAX & JSON
Dynamic webpages using AJAX & JSON
Christiaan Rakowski
 
Ajax by Examples 2
Ajax by Examples 2Ajax by Examples 2
Ajax by Examples 2
Yenwen Feng
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentals
Simon Willison
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
Rodrigo Branas
 
Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3Refreshing Your UI with HTML5, Bootstrap and CSS3
Refreshing Your UI with HTML5, Bootstrap and CSS3
Matt Raible
 
External Data Access with jQuery
External Data Access with jQueryExternal Data Access with jQuery
External Data Access with jQuery
Doncho Minkov
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slides
Smithss25
 
Ad

Similar to AJAX and JSON (20)

Lec 7
Lec 7Lec 7
Lec 7
maamir farooq
 
Ajaxtechnicalworkshopshortversion 1224845432835700-8
Ajaxtechnicalworkshopshortversion 1224845432835700-8Ajaxtechnicalworkshopshortversion 1224845432835700-8
Ajaxtechnicalworkshopshortversion 1224845432835700-8
anuradha raheja
 
Ajax
AjaxAjax
Ajax
husnara mohammad
 
Json – java script object notation
Json – java script object notationJson – java script object notation
Json – java script object notation
Pankaj Srivastava
 
Json
Json Json
Json
Manav Prasad
 
Learn Ajax here
Learn Ajax hereLearn Ajax here
Learn Ajax here
jarnail
 
Ajax Tuturial
Ajax TuturialAjax Tuturial
Ajax Tuturial
Anup Singh
 
Copy of ajax tutorial
Copy of ajax tutorialCopy of ajax tutorial
Copy of ajax tutorial
Abhishek Kesharwani
 
Web Programming using Asynchronous JavaX
Web Programming using Asynchronous JavaXWeb Programming using Asynchronous JavaX
Web Programming using Asynchronous JavaX
SivanN6
 
Ajax
AjaxAjax
Ajax
Yoga Raja
 
Ajax Lecture Notes
Ajax Lecture NotesAjax Lecture Notes
Ajax Lecture Notes
Santhiya Grace
 
Unit-5.pptx
Unit-5.pptxUnit-5.pptx
Unit-5.pptx
itzkuu01
 
AJAX
AJAXAJAX
AJAX
Gouthaman V
 
AJAX
AJAXAJAX
AJAX
Gouthaman V
 
Pascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax SecurityPascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax Security
amiable_indian
 
Ajax Fundamentals Web Applications
Ajax Fundamentals Web ApplicationsAjax Fundamentals Web Applications
Ajax Fundamentals Web Applications
dominion
 
Ajax
AjaxAjax
Ajax
Manav Prasad
 
Ajax and JavaScript Bootcamp
Ajax and JavaScript BootcampAjax and JavaScript Bootcamp
Ajax and JavaScript Bootcamp
AndreCharland
 
Web Development Course - AJAX & JSON by RSOLUTIONS
Web Development Course - AJAX & JSON by RSOLUTIONSWeb Development Course - AJAX & JSON by RSOLUTIONS
Web Development Course - AJAX & JSON by RSOLUTIONS
RSolutions
 
Json – java script object notation
Json – java script object notationJson – java script object notation
Json – java script object notation
Dilip Kumar Gupta
 
Ajaxtechnicalworkshopshortversion 1224845432835700-8
Ajaxtechnicalworkshopshortversion 1224845432835700-8Ajaxtechnicalworkshopshortversion 1224845432835700-8
Ajaxtechnicalworkshopshortversion 1224845432835700-8
anuradha raheja
 
Json – java script object notation
Json – java script object notationJson – java script object notation
Json – java script object notation
Pankaj Srivastava
 
Learn Ajax here
Learn Ajax hereLearn Ajax here
Learn Ajax here
jarnail
 
Web Programming using Asynchronous JavaX
Web Programming using Asynchronous JavaXWeb Programming using Asynchronous JavaX
Web Programming using Asynchronous JavaX
SivanN6
 
Unit-5.pptx
Unit-5.pptxUnit-5.pptx
Unit-5.pptx
itzkuu01
 
Pascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax SecurityPascarello_Investigating JavaScript and Ajax Security
Pascarello_Investigating JavaScript and Ajax Security
amiable_indian
 
Ajax Fundamentals Web Applications
Ajax Fundamentals Web ApplicationsAjax Fundamentals Web Applications
Ajax Fundamentals Web Applications
dominion
 
Ajax and JavaScript Bootcamp
Ajax and JavaScript BootcampAjax and JavaScript Bootcamp
Ajax and JavaScript Bootcamp
AndreCharland
 
Web Development Course - AJAX & JSON by RSOLUTIONS
Web Development Course - AJAX & JSON by RSOLUTIONSWeb Development Course - AJAX & JSON by RSOLUTIONS
Web Development Course - AJAX & JSON by RSOLUTIONS
RSolutions
 
Json – java script object notation
Json – java script object notationJson – java script object notation
Json – java script object notation
Dilip Kumar Gupta
 
Ad

More from Julie Iskander (20)

HTML 5
HTML 5HTML 5
HTML 5
Julie Iskander
 
Data structures and algorithms
Data structures and algorithmsData structures and algorithms
Data structures and algorithms
Julie Iskander
 
C for Engineers
C for EngineersC for Engineers
C for Engineers
Julie Iskander
 
Design Pattern lecture 3
Design Pattern lecture 3Design Pattern lecture 3
Design Pattern lecture 3
Julie Iskander
 
Scriptaculous
ScriptaculousScriptaculous
Scriptaculous
Julie Iskander
 
Prototype Framework
Prototype FrameworkPrototype Framework
Prototype Framework
Julie Iskander
 
Design Pattern lecture 4
Design Pattern lecture 4Design Pattern lecture 4
Design Pattern lecture 4
Julie Iskander
 
Design Pattern lecture 2
Design Pattern lecture 2Design Pattern lecture 2
Design Pattern lecture 2
Julie Iskander
 
Design Pattern lecture 1
Design Pattern lecture 1Design Pattern lecture 1
Design Pattern lecture 1
Julie Iskander
 
Ajax and ASP.NET AJAX
Ajax and ASP.NET AJAXAjax and ASP.NET AJAX
Ajax and ASP.NET AJAX
Julie Iskander
 
jQuery
jQueryjQuery
jQuery
Julie Iskander
 
ASP.NET Lecture 5
ASP.NET Lecture 5ASP.NET Lecture 5
ASP.NET Lecture 5
Julie Iskander
 
ASP.NET lecture 8
ASP.NET lecture 8ASP.NET lecture 8
ASP.NET lecture 8
Julie Iskander
 
ASP.NET Lecture 7
ASP.NET Lecture 7ASP.NET Lecture 7
ASP.NET Lecture 7
Julie Iskander
 
ASP.NET Lecture 6
ASP.NET Lecture 6ASP.NET Lecture 6
ASP.NET Lecture 6
Julie Iskander
 
ASP.NET Lecture 4
ASP.NET Lecture 4ASP.NET Lecture 4
ASP.NET Lecture 4
Julie Iskander
 
ASP.NET Lecture 3
ASP.NET Lecture 3ASP.NET Lecture 3
ASP.NET Lecture 3
Julie Iskander
 
ASP.NET Lecture 2
ASP.NET Lecture 2ASP.NET Lecture 2
ASP.NET Lecture 2
Julie Iskander
 
ASP.NET Lecture 1
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
Julie Iskander
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
Julie Iskander
 

Recently uploaded (20)

2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx
Samuele Fogagnolo
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
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
 
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
 
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
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
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
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
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
 
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
 
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
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
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
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx
Samuele Fogagnolo
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
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
 
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
 
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
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
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
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
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
 
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
 
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
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
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
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 

AJAX and JSON

  • 4. JSON  http://www.json.org/  A lightweight data-interchange format.  Humans readable.  Easy for machines to parse and generate.  A text format that is completely language independent.  An ideal data-interchange language.
  • 5. JSON (Cont’d)  Built on two structures:  A collection of name/value pairs (object)  An object begins with { and ends with }. Each name is followed by : and the name/value pairs are separated by ‘,’ .  An ordered list of values (array)  An array begins with [ and ends with ]. Values are separated by ‘,’ .  A value can be a string in double quotes, or a number, or true or false or null, or an object or an array.
  • 6. JSON (Cont’d)  There are libraries in nearly all languages to parse JSON files.  In JavaScript, these libraries contain function to convert from objects to json text and vice versa.
  • 9. AJAX  Allows client-side JavaScript to request and receive data from a server without refreshing the web page.  Only partial reload occurs  Jesse James Garrett originally coined the term Ajax in 2005. (www.adaptivepath.com/publications/essays/archives /000385.php ).  Let web applications look and behave more like desktop applications than web sites,
  • 11. Steps to send a simple ajax request 1. Create XMLHttpRequest Object 2. Open the request, set the HTTP method and URL 3. Set callback for onreadychange 4. Send asynchronous request 5. Create an event to call the previous steps
  • 13. Sending Request  var xhr = new XMLHttpRequest();  xhr.onreadystatechange = myCallback;  xhr.open('GET', 'somefile.txt', true);  xhr.send('');
  • 14. For Cross-browser compatibility
  • 15. readyState values Value Description 0 Uninitialized 1 Loading 2 Loaded 3 Interactive 4 Complete
  • 16. Some status values Value Description 200 Ok 204 No content 401 UnAuthorized 404 Not Found 411 Request Timeout
  • 17. Processing Request function myCallback() { if (xhr.readyState < 4) { return; } if (xhr.status !== 200) { alert('Error!'); // the HTTP status code is not OK return; } alert(xhr.responseText); }
  • 19. References  Object-Oriented JavaScript Create Scalable, reusable, high quality JavaScript applications and libraries, Stoyan Stefanov, 2008.  ECMAScript Language Specification, 5.1 edition, July 2011, http://www.ecma-international.org/  Beginning JavaScript, 4th Edition, Paul Wilton, Jeremy McPeak, 2010