How to use Ajax, JSON, and Blogger

46 Pages·2015·1 MB·English

by  Maria David

Chapter 14
How to use Ajax,
JSON, and Blogger
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 1
Objectives
Applied
1. Use Ajax with HTML, XML, or JSON data to update a web page
without reloading it.
2. Use Ajax and JSON with the API for Google Blogger to get data
from a blog and display it on a web page.
3. Use an online JSON editor to review the feed from a web site.
Knowledge
1. In general terms, describe the way Ajax works, including the use of
the XMLHttpRequest object.
2. In general terms, distinguish between XML and JSON data.
3. Distinguish between these jQuery methods for making Ajax requests:
load, $.get, $.post, $.getJSON, and $.ajax.
4. Describe JSONP and cross-domain security policies.
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 2
Objectives (continued)
5. In general terms, describe the way you use the API for a web site to
get data from the web site and display it on your web pages.
6. In general terms, describe how an online JSON editor can help you
understand the data items in a feed from a web site.
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 3
Google’s Auto Suggest is an Ajax application
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 4
How a normal HTTP request is processed
HTTP Request
`
HTTP Response
(new page)
Web Browser Web Server Application Server Database Server
(Scripts)
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 5
How an Ajax XMLHttpRequest is processed
XMLHttpRequest
`
Response
(Data only)
Web Browser Web Server Application Server Database Server
(JavaScript) (Scripts)
Terms
 Ajax (Asynchronous JavaScript and XML
 XMLHttpRequest (XHR) object
 API (Application Programming Interfaces)
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 6
The common data formats for Ajax
Format Description Extension
HTML Hypertext Markup Language html
XML eXtensible Markup Language xml
JSON JavaScript Object Notation json is often used
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 7
XML data
<?xml version="1.0" encoding="utf-8"?>
<management>
<teammember>
<name>Agnes</name>
<title>Vice President of Accounting</title>
<bio>With over 14 years of public accounting ...
</bio>
</teammember>
<teammember>
<name>Wilbur</name>
<title>Founder and CEO</title>
<bio>While Wilbur is the founder and CEO ... </bio>
</teammember>
</management>
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 8
JSON data
{"teammembers":[
{
"name":"Agnes",
"title":"Vice President of Accounting",
"bio":"With over 14 years of public accounting ..."
},
{
"name":"Wilbur",
"title":"Founder and CEO",
"bio":"While Wilbur is the founder and CEO ..."
}
]}
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 9
Terms
 XML (eXtensible Markup Language)
 JSON (JavaScript Object Notation)
Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 10