chapter 14zolinsoft.com/cis1730/murach.powerpoint.pdfs/chapter14slides.pdf · title: powerpoint...

Chapter 14

Murach's JavaScript and jQuery, C14 © 2012, Mike Murach & Associates, Inc. Slide 1

How to use Ajax, JSON, and Blogger

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.

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.

Google’s Auto Suggest is an Ajax application


How a normal HTTP request is processed


Application Server

(Scripts)

Web Server Database Server

HTTP Request

HTTP Response

(new page)`

Web Browser

How an Ajax XMLHttpRequest is processed


Application Server

(Scripts)

Web Server Database Server

XMLHttpRequest

Response

(Data only)`

Web Browser

(JavaScript)

Terms

Ajax (Asynchronous JavaScript and XML

XMLHttpRequest (XHR) object

API (Application Programming Interfaces)

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

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>

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 ..."

}

]}

Terms


XML (eXtensible Markup Language)

JSON (JavaScript Object Notation)

Members of the XMLHttpRequest object


Methods

abort()

getAllResponseHeaders()

getResponseHeader(name)

open(method,url[,async][,user][,pass])

send([data])

setRequestHeader(name,value)

Properties

readyState

responseText

responseXml

status

statusText

Event

onreadystatechange

A web page that uses the XHR object

and JavaScript to load XML data


The HTML div element that receives the data <div id="team"></div>

The XML file (team.xml)


<?xml version="1.0" encoding="utf-8"?>

<management>

<teammember>

<name>Agnes</name>



</bio>

</teammember>

...

</management>

The JavaScript for getting and parsing the data


$(document).ready(function() {

xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

xmlDoc = xhr.responseXML;

var team =

xmlDoc.getElementsByTagName("teammember");

var html = "";

for (i = 0; i < team.length; i++) {

html +=

xmlDoc.getElementsByTagName(

"name")[i].childNodes[0].nodeValue + <br>" +


"title")[i] .childNodes[0].nodeValue +

"<br>" +


"bio")[i] .childNodes[0].nodeValue +

"<br><br>"; }

document.getElementById("team").innerHTML = html;

}

}

xhr.open("GET", "team.xml", true);

xhr.send();

});

The methods for working with Ajax


The shorthand methods

load(url[,data][,success])

$.get(url[,data][,success[,dataType])

$.post(url[,data][,success[,dataType])

$.getJSON(url[,data][,success])

The $.each method for processing returned data

$.each(collection, callback)

Examples of Ajax methods


A load method

$("#solution").load("solutions.html");

A $.get method

$.get("getmanager.php", "name=agnes", showManager);

A $.getJSON method

$.getJSON("team.json", function(data){

// the statements for the success function

}

A web page that loads HTML elements

when a link is clicked


The HTML for the user Interface <p>Which Vecta Corp. solution are you interested in

learning about?</p>

<a id="vprospect" href="#">vProspect 2.0</a> |

<a id="vconvert" href="#">vConvert 2.0</a> |

<a id="vretain" href="#">vRetain 1.0</a><br>

<div id="solution"></div>

The start of the second div element

in the solutions.html file


<div id="vconvert">

<p><strong>vConvert 2.0</strong></p>

<p><img src="images/logo_vconvert.gif"

width="63" height="36" >

Create a highly user-friendly ...

</p>

<ul>

<li>Build a visual and functional user ... </li>

<li>Cause the desired emotional response ...</li>

...

</ul>

</div>

The jQuery that loads the data



$("#vprospect").click(function() {

$("#solution").load("solutions.html #vprospect");

});

$("#vconvert").click(function() {

$("#solution").load("solutions.html #vconvert");

});

$("#vretain").click(function() {

$("#solution").load("solutions.html #vretain");

});

});

A web page that loads XML data



The XML file (team.xml)


<management>

<teammember>

<name>Agnes</name>



</bio>

</teammember>

...

</management>

The jQuery


$(document).ready(function(){

$.get("team.xml", function(data){

$("#team").html("");

$(data).find("management").children().each(function() {

var xmlDoc = $(this);

$("#team").append("<h3>" +

xmlDoc.find("name").text() + "</h3>" +

xmlDoc.find("title").text() + "<br>" +

xmlDoc.find("bio").text() + "<br>");

});

});

});

A web page that loads JSON data



The JSON file (team.json)


{"teammembers":[

{

"name":"Agnes",

"title":"Vice President of Accounting",

"bio":"With over 14 years of public accounting...

},

{

"name":"Damon",

"title":"Director of Development",

"bio":"Damon is the Director of Development ... "

}

]}

The jQuery


$(document).ready(function(){

$.getJSON("team.json", function(data){

$.each(data, function() {

$.each(this, function(key, value) {

$("#team").append(

"Name: " + value.name + "<br>" +

"Title: " + value.title + "<br>" +

"Bio: " + value.bio + "<br><br>"

);

});

});

});

});

Two ways to send data with an Ajax request


A $.get method that uses a string for the data parameter


$.get("getmanager.php", "name=wilbur", showManager);

function showManager(data) {

// process data

}

});

A $.get method that uses a map for the data parameter


$.get("getmanager.php", {name:wilbur}, showManager);

function showManager(data) {

// process data

}

});

The helper methods for working with Ajax


serialize()

serializeArray()

The HTML for a form

<form id="contactForm">



</form>

jQuery that uses the serialize method


var formData = $("#contactForm").serialize();

$.get("processcontact.php", formData,

processReturnedData);

function processReturnedData(data) {

// the statements for the success function

}

});

The syntax of the $.ajax method


$.ajax({ options })

Some of the options for the $.ajax method url

beforeSend(jqXHR, settings)

cache

complete(jqXHR, status)

data

dataType

error(jqXHR, status, error)

jsonp

password

success(data, status, jqXHR)

timeout

type

username

Terms


jqXHR object

JSONP, or “JSON with padding”

A web page with a loading message

and an alert dialog box for errors



The XML file


<management>

<teammember>

<name>Agnes</name>



</bio>

</teammember>

...

</management>

The jQuery for the $.ajax method


$.ajax({

type: "get",

url: "team.xml",

beforeSend: function() {

$("#team").html("Loading...");},

timeout: 10000,

error: function(xhr, status, error) {

alert("Error: " + xhr.status + " - " + error);

dataType: "xml",

success: function(data) {

$("#team").html("");

$(data).find(

"management").children().each(function() {

var xmlDoc = $(this);

$("#team").append("<h3>" +

xmlDoc.find("name").text() + "</h3>" +

xmlDoc.find("title").text() + "<br>" +

xmlDoc.find("bio").text() + "<br>");

});

}

});

A fictitious blog on Google’s Blogger


Google URLs


The URL for Google’s Blogger

www.blogger.com

The URL for Google APIs

https://code.google.com/apis/console/

The API documentation for Blogger


The URL for the API documentation (one line) https://developers.google.com/blogger/docs/3.0/

getting_started

The format of a URL for getting posts (one line)


https://www.googleapis.com/blogger/v3/blogs/

BLOG-ID/posts?key=API-KEY

Some of the data items for working with posts published

updated

url

title

content

author.id

author.displayName

author.url

author.image

replies.totalItems

The Vecta Corp blog in an online JSON editor


The URL for the online JSON editor


www.jsoneditoronline.org

The URL for the Vecta Corp blog (one line) www.googleapis.com/blogger/v2/blogs/8698899267502010836/

posts?key=AIzaSyByJiL407voPRmQyNAYZKWxBC5FuIlBIdQ

How to review a feed in the online JSON editor


1. Type or paste the URL for the feed into the address bar of your

browser, and press the Enter key to see the feed in the browser.

2. Copy all of the JSON, go to the URL for the online JSON editor, and

paste the JSON into the left pane of the editor.

3. Click the Format button at the top of the left pane to see the formatted

JSON data.

4. Click the right arrow button between the panes to see a structured

version of the data.

5. Click on the Expand All button at the top of the right pane to see all

of the data in the feed.

A web page that displays Blogger posts


The HTML div element that receives the blog <div id="posts"></div>

The jQuery for using Blogger


var apikey = ""; // set this to your API key

var html = "";

$.support.cors = true;


$.ajax({

// the number in the url is the id for the blog

url:"https://www.googleapis.com/blogger/v2/blogs/

8698899267502010836/posts?key=" + apikey,

dataType: "json",

success: function(data) {

$.each(data.items, function(index, value) {

html += "<h3><a href='" + value.url +

"'>" + value.title + "</a></h3>" +

value.content +

"<br>Posted by <a href='" +

value.author.url + "'>" +

value.author.displayName + "</a>";

}); // end each method

$("#posts").html(html);

} // end ajax options

}); }); // end ajax and ready methods

Exercise 14-1: Modify the Blogger application


Add the publication date and number of replies to the information that’s displayed.

Extra 14-1: Convert an Ajax application

from XML to JSON


The same application as in figure 14-11, but using JSON data instead of XML data.

Extra 14-2: Enhance an Ajax application

so it uses an expanded JSON file


Extra 14-3: Load speakers as they’re requested


When the user clicks a link, the JSON for the page should be loaded from its file.

Short 14-1: Convert a $.getJSON method to $.ajax


Estimated time: 10 to 15 minutes.

chapter 14zolinsoft.com/cis1730/murach.powerpoint.pdfs/chapter14slides.pdf · title: powerpoint...

Documents