95-733 Internet Technologies
Lecture 1: Introduction
95-733 Internet Technologies
Master of Information System
Management
1
Why study this? Two
killer apps
• The World Wide Web
– Tim Berners-Lee invents the web in 1990
• The Internet of Things
– Gartner Says the Internet of Things
will grow to 26 billion units by 2020
– We are moving from a consumer internet to an
industrial internet
95-733 Internet Technologies
Master of Information System
Management
2
Course Web Site
• http://www.andrew.cmu.edu/~mm6
95-733 Internet Technologies
Master of Information System
Management
3
Prerequisites
• The ability to program in Java
• Enthusiasm for programming
• Interested in web technologies
95-733 Internet Technologies
Master of Information System
Management
4
Specific Technologies
•
•
•
•
•
•
•
•
•
•
•
Netbeans and Glassfish
JavaScript, Servlets and Java Server Pages
XML (various languages)
AJAX, JSONP and Websockets
Client and server side mashups
Google’s Knowledge Graph
Ruby
Frameworks – Ruby on Rails
Grammars - DTD’s, XSDL, JSON Schema
XML Transformation - XSLT
Semantic Web – OWL, RDF, JSON-LD
95-733 Internet Technologies
Master of Information System
Management
5
Structure of the Course
• Lectures / class participation
• Demonstrations
• Homework (programming)
• Midterm
• Final examination
95-733 Internet Technologies
Master of Information System
Management
6
Readings
• Readings from the required text are assigned for each
lecture -- read them in advance
• Readings from the web also assigned
• For this week read “Programming the World Wide Web”,
8th ed. Chapters 1, 2 and 3.
• For next week read “Programming the World Wide
Web”, 8th ed. chapters 4, 5 and 10.
• Chapters 4 and 5 are on JavaScript
• Chapter 10 covers AJAX.
• Read the article by Philip McCarthy of IBM on AJAX
• Watch the video from Oracle on Websockets. Get the
code running on Netbeans.
95-733 Internet Technologies
Master of Information System
Management
7
Grading
• Homework/Programming (3-5) 50%
• One of the homework problems is designed by
the student. A presentation and demonstration
is required. See me soon about your topic.
• For the student designed homework, small
groups are permitted. Each student presents
for the same number of minutes.
• Midterm 10%
• Final Exam 40%
95-733 Internet Technologies
Master of Information System
Management
8
Some Suggested Topics For
Student Selected Homework
• Explore one of the many XML languages in more detail
than we do in class.
• Discuss and demonstrate HTML5 elements (audio,
video, time, canvas).
• Reading data from a sensor (might be your phone)
• HTML5 Local storage.
• Flash, PhoneGap, GWT, Jquery, etc…
• SOFEA (Angular.js)
• Many other options exist. See the schedule for projects
from previous terms…
95-733 Internet Technologies
Master of Information System
Management
9
Plan for this week and next
• Study four important styles of
client server interaction that we
find on the internet.
• Explore some details on the last
three styles.
• You should begin working on
Project 1 right away.
95-733 Internet Technologies
Master of Information System
Management
10
Four Styles of Interaction(1)
Client (browser)
get request
Server
http/tcp/ip
response may
include html, css,
javascript
html may
includes hyperlinks
The response or user interaction
may cause code to execute within
the browser
95-733 Internet Technologies
Master of Information System
Management
The request may
cause code to
execute on the server
11
Four Styles of Interaction(2)
Client (browser)
Server
API
Data provided as
needed
Asynchronous javascript and xml (AJAX)
No need for a full page refresh
Same origin policy enforced by browser
95-733 Internet Technologies
Master of Information System
Management
12
Four Styles of Interaction(3)
Client (browser)
Server
Response includes
code to cause additional
requests to others
Javascript object notation with
padding (jsonp)
No longer restricted to the the same
origin
95-733 Internet Technologies
Master of Information System
Management
13
Four Styles of Interaction(4)
Client (browser)
Server
Response includes
Websocket code in
javascript
peer
Bidirectional
Communication over
TCP/IP
peer
Once the socket is established, the server may initiate the interaction.
Uses: Web - collaboration apps without polling, & IoT - very fast binary.
95-733 Internet Technologies
Master of Information System
Management
14
AJAX
• The traditional web employed thin
clients.
• With AJAX, downloaded code interacts
with the server asynchronously. The
client does not block.
• This makes for a more responsive user
experience.
• Single page applications are possible
95-733 Internet Technologies
Master of Information System
Management
15
AJAX
Asynchronous Java Script and XML
• Why bother?
- Everyone loves the browser but
communication with the server is
coarse-grained. A full page reload
interrupts the interaction flow.
• Example Applications: (Web 2.0)
- Google Maps runs in a browser but
behaves like an application.
- Flikr photo sharing, Google Maps,
Blackboard, etc.. use AJAX.
95-733 Internet Technologies
Master of Information System
Management
16
Since we are developing in
Java we need to know…
• A servlet is Java code that runs on the
server when an HTTP request arrives.
• A Java Server Page (JSP) is XHTML+ Java
and is compiled to a servlet.
• JavaScript is not Java and runs in the
browser.
95-733 Internet Technologies
Master of Information System
Management
17
This is a UML
sequence diagram.
This shows a
typical AJAX
round trip.
A solid arrowhead
represents a
synchronous
call.
A stick
arrowhead
represents an
asynchronous
signal.
95-733 Internet Technologies
Master of Information System
Management
18
Typical Ajax(1)
1. Javascript and HTML is delivered to the
browser.
2. The JavaScript code is pointed to by
a <script> tag.
3. The HTML defines a button that
calls a function.
95-733 Internet Technologies
Master of Information System
Management
19
Typical Ajax(2)
4. Within the function (which may be
passed a URL with GET data) a
browser dependent request object is
created with a URL (and, perhaps,
GET data).
5. A handler is defined.
6. The request object is told about the
handler.
7. The request object is told to send a
post or get request asynchronously.
95-733 Internet Technologies
Master of Information System
Management
20
Typical Ajax(3)
8. If POST is used, the send method is
called on the request object
with the POST data.
9. The handler executes on various state
changes in the request object.
10.The handler accesses the server
response by asking the request
object first for its state (and if it's
ready with no errors) its response.
95-733 Internet Technologies
Master of Information System
Management
21
Typical Ajax(4)
11. The response may be text,
or XML or JSON.
12. The handler performs some
action on the browser. This
action may alter the HTML's
DOM and change what the
browser displays.
95-733 Internet Technologies
Master of Information System
Management
22
W3C Example 1
Some simple JavaScript code to do
something with data from
an XML document fetched over
the network:
function test(data) {
// taking care of data
}
95-733 Internet Technologies
Master of Information System
Management
23
function handler() {
if(this.readyState == 4 &&
this.status == 200) {
// so far so good
if(this.responseXML != null &&
this.responseXML.getElementById('test').firstChild.data)
// success!
test(this.responseXML.getElementById('test').firstChild.data);
else
test(null);
} else if (this.readyState == 4 && this.status != 200) {
// fetched the wrong page or network error...
test(null);
}
}
var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "test.xml");
95-733 Internet Technologies
client.send();Master of Information System
24
Management
W3C Example 2
If you just want to ping the server with a message you could
do something like:
function ping(message) {
var client = new XMLHttpRequest();
client.open("POST", "/ping");
client.send(message);
}
We are not establishing a callback
handler. We are not interested in a response.
95-733 Internet Technologies
Master of Information System
Management
25
W3C Example 3
Or, if you want to check the status of a document on the server,
you can make a head request.
function fetchStatus(address) {
var client = new XMLHttpRequest();
client.onreadystatechange = function() {
if(this.readyState == 4)
returnStatus(this.status);
}
client.open("HEAD", address);
client.send();
}
95-733 Internet Technologies
Master of Information System
Management
26
State and State Change
The state of the object. The readyState attribute must be
one of the following values:
0 Uninitialized The initial value.
1 Open The open() method has been successfully called.
2 Sent The user agent successfully acknowledged the
request.
3 Receiving Immediately before receiving the message
body (if any). All HTTP headers have been received.
4 Loaded The data transfer has been completed.
When readyState changes value a readystatechange
event is to be dispatched on the XMLHttpRequest object.
95-733 Internet Technologies
Master of Information System
Management
27
Typical Interaction
post
JavaScript function
XML
XMLHTTPRequest
handler
HTML Button
95-733 Internet Technologies
Master of Information System
Management
- Executed on
state change.
- this.responseXML
points to the root
of the XML
-write HTML to 28
HTML DOM
A Complete Example From IBM
Demonstrations:
See article by Philip McCarthy on Ajax at:
http://www.ibm.com/developerworks/library/j-ajax1/
Eclipse workspace mm6/95-733
Visit http://localhost:8080/AjaxProject/index.jsp
Netbeans workspace mm6/95-733/AjaxUsingNetbeans
ACoolAjaxShoppingCart and
ACoolAjaxShoppingCartImproved
95-733 Internet Technologies
Master of Information System
Management
29
Main Features of Index.jsp (1)
This page needs access to these imported Java packages.
<%@ page import="java.util.*" %>
<%@ page import="developerworks.ajax.store.*"%>
The store package contains
Item.java, Catalog.java and Cart.java
95-733 Internet Technologies
Master of Information System
Management
30
Main Features of Index.jsp (2)
The header holds pointers to script code to be included in the
page and then executed by the browser.
<script type="text/javascript"
language="javascript" src="ajax1.js">
</script>
<script type="text/javascript"
language="javascript" src="cart.js">
</script>
This is not constrained by the same origin
policy! These scripts could be fetched from
any URL. 95-733 Internet Technologies
Master of Information System
Management
31
Main Features of Index.jsp (3)
The table body tag encloses table rows that are generated on
the server. This is Java (part of JSP) and is not JavaScript.
<tbody>
<%
for (Iterator<Item> I =
new Catalog().getAllItems().iterator();
I.hasNext() ; ) {
Item item = I.next();
%>
95-733 Internet Technologies
Master of Information System
Management
32
Main Features of Index.jsp (4)
The addToCart call is a call on JavaScript.
<!-- For each Item do -->
<tr>
<td><%= item.getName() %></td>
<td><%= item.getDescription() %></td>
<td><%= item.getFormattedPrice() %></td>
<td>
<button onclick="addToCart('<%= item.getCode() %>')">
Add to Cart
</button>
</td>
</tr>
<% } %>
</tbody>
95-733 Internet Technologies
Master of Information System
Management
33
Main Features of Index.jsp (5)
The <ul> and <span> tags each have a unique identifier.
These identifier will be used by the event handler.
<div style=”…”>
<h2>Cart Contents</h2>
<ul id="contents"></ul>
Total cost:
<span id="total">$0.00</span>
</div>
95-733 Internet Technologies
Master of Information System
Management
34
Main Features of Item.java
package developerworks.ajax.store;
import java.math.BigDecimal;
Getter and setters on
code, name,description
and price.
public class Item {
private String code;
private String name;
private String description;
private int price;
public Item(String code,String name,String description,int price) {
this.code=code;
this.name=name;
this.description=description;
this.price=price;
}
public String getCode() {
return code;
}
95-733 Internet Technologies
Master of Information System
Management
35
Main Features of Catalog.java(1)
package developerworks.ajax.store;
import java.util.*;
public class Catalog {
private static Map<String,Item> items;
static {
items = new HashMap<String,Item>();
items.put("hat001",new Item("hat001",
"Hat","Stylish bowler hat (SALE!)",
1999));
:
}
95-733 Internet Technologies
Master of Information System
Management
36
Main Features of Catalog.java(2)
public Collection<Item> getAllItems() {
return items.values();
}
public boolean containsItem(String itemCode)
{
return items.containsKey(itemCode);
}
public Item getItem(String itemCode) {
return items.get(itemCode);
}
}
95-733 Internet Technologies
Master of Information System
Management
37
Main Features of Cart.java(1)
package developerworks.ajax.store;
public class Cart {
private HashMap<Item,Integer> contents;
public Cart() {
contents = new HashMap<Item,Integer>();
}
95-733 Internet Technologies
Master of Information System
Management
38
Main Features of Cart.java(2)
public void addItem(String itemCode) {
Catalog catalog = new Catalog();
if (catalog.containsItem(itemCode)) {
Item item = catalog.getItem(itemCode);
int newQuantity = 1;
if (contents.containsKey(item)) {
Integer currentQuantity = contents.get(item);
newQuantity += currentQuantity.intValue();
}
contents.put(item, new Integer(newQuantity));
}
}
95-733 Internet Technologies
Master of Information System
Management
39
Main Features of Cart.java(3)
public String toXml() {
StringBuffer xml = new StringBuffer();
xml.append("<?xml version=\"1.0\"?>\n");
xml.append("<cart generated=\""+
System.currentTimeMillis()+
"\" total=\""+getCartTotal()+"\">\n");
for (Iterator<Item> I = contents.keySet().iterator() ; I.hasNext() ; ) {
Item item = I.next();
int itemQuantity = contents.get(item).intValue();
xml.append("<item code=\""+item.getCode()+"\">\n");
xml.append("<name>");
:
xml.append("</cart>\n");
return xml.toString();
}
95-733 Internet Technologies
Master of Information System
Management
40
Main Features of
CartServlet.java(1)
private Cart getCartFromSession(HttpServletRequest req)
{
HttpSession session = req.getSession(true);
Cart cart = (Cart)session.getAttribute("cart");
if (cart == null) {
cart = new Cart();
session.setAttribute("cart", cart);
}
return cart;
}
95-733 Internet Technologies
Master of Information System
Management
41
Main Features of
CartServlet.java(2)
public void doPost(HttpServletRequest req,
HttpServletResponse res)
throws java.io.IOException {
Enumeration headers = req.getHeaderNames();
while (headers.hasMoreElements()) {
String header =(String) headers.nextElement();
System.out.println(header+":
"+req.getHeader(header));
}
Cart cart = getCartFromSession(req);
String action = req.getParameter("action");
String item = req.getParameter("item");
95-733 Internet Technologies
Master of Information System
Management
42
Main Features of
CartServlet.java(3)
if ((action != null)&&(item != null)) {
if ("add".equals(action)) {
cart.addItem(item);
} else if ()…..
}
String cartXml = cart.toXml();
res.setContentType("text/xml");
res.getWriter().write(cartXml);
}
95-733 Internet Technologies
Master of Information System
Management
43
Main Features Axis1.js (1)
/*
* Returns an new XMLHttpRequest object, or false if the browser
* doesn't support it
*/
function newXMLHttpRequest() {
var xmlreq = false;
// Create XMLHttpRequest object in non-Microsoft browsers
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
}
95-733 Internet Technologies
Master of Information System
Management
44
Main Features Axis1.js (2)
else if (window.ActiveXObject) {
try {
// Try to create XMLHttpRequest in later versions of Internet Explorer
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) { // Failed to create required ActiveXObject
try {
// Try version supported by older versions of Internet Explorer
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// Unable to create an XMLHttpRequest by any means
xmlreq = false;
}
}
}
95-733 Internet Technologies
Master of Information System
Management
45
Main Features Axis1.js (3)
/* Returns a function that waits for the specified
XMLHttpRequest to complete, then passes it XML response
to the given handler function.
req - The XMLHttpRequest whose state is changing
responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {
95-733 Internet Technologies
Master of Information System
Management
46
Main Features Axis1.js (4)
// Return an anonymous function that listens to the
// XMLHttpRequest instance
return function () {
// If the request's status is "complete"
if (req.readyState == 4) {
// Check that we received a successful response from the server
if (req.status == 200) {
// Pass the XML payload of the response to the handler
// function.
responseXmlHandler(req.responseXML);
} else {
// An HTTP problem has occurred
alert("HTTP error "+req.status+": "+req.statusText);
95-733 Internet Technologies
}}}}
47
Master of Information System
Management
Main Features Cart.js (1)
// Timestamp of cart that page was last updated with
var lastCartUpdate = 0;
// Adds the specified item to the shopping cart, via Ajax call
// itemCode - product code of the item to add
Establish handler
and pack up and
send the request.
function addToCart(itemCode) {
var req = newXMLHttpRequest();
req.onreadystatechange = getReadyStateHandler(req, updateCart);
req.open("POST", "cart.do", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("action=add&item="+itemCode);
}
95-733 Internet Technologies
Master of Information System
Management
48
Main Features Cart.js (2)
/*
* Update shopping-cart area of page to reflect contents of cart
* described in XML document.
*/
function updateCart(cartXML) {
var cart = cartXML.getElementsByTagName("cart")[0];
var generated = cart.getAttribute("generated");
if (generated > lastCartUpdate) {
lastCartUpdate = generated;
var contents = document.getElementById("contents");
contents.innerHTML = "";
95-733 Internet Technologies
Master of Information System
Management
49
Main Features Cart.js (3)
var items = cart.getElementsByTagName("item");
for (var I = 0 ; I < items.length ; I++) {
var item = items[I];
var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue;
var listItem = document.createElement("li");
listItem.appendChild(document.createTextNode(name+" x "+quantity));
contents.appendChild(listItem);
}
}
document.getElementById("total").innerHTML = cart.getAttribute("total");
}
95-733 Internet Technologies
Master of Information System
Management
50
Shopping Cart Interaction
post
addToCart(itemCode)
XML
XMLHTTPRequest
HTML Button
UpdateCart
reads XML
writes HTML
95-733 Internet Technologies
Master of Information System
Management
Anonymous handler
- Executed on
state change.
- req.responseXML
points to the root
of the XML
- calls updateCart
51
Main Features Cart.js (4)
The handler is reading data with the following format:
<?xml version="1.0"?>
<cart generated="1200367057873" total="$19.99">
<item code="str001">
<name>String</name>
<quantity>1</quantity>
</item>
</cart>
95-733 Internet Technologies
Master of Information System
Management
52
Another Example From
Sebesta Chapter 10
A form is required to collect name, address, zip, city, and state.
The zip code entry causes an asynchronous call on a servlet
to automatically complete the city and state fields.
The asynchronous call is made when the user blurs (or moves
away from) the zip code field.
This demo is in the Netbeans project
mm6/www/95-733/AjaxUsingNetbeans/SebestaAjaxExample.
95-733 Internet Technologies
Master of Information System
Management
53
Index.jsp Main Features
<tr>
<td> Zip Code: </td>
<td> <input type = "text" name="zip" size = "10"
Locations
onblur = "getPlace(this.value)" />
written to by
</td>
ajax handler
</tr>
<tr>
<td> City </td>
<td> <input type = "text" name="city" id= "city" size = "30" /> </td>
</tr>
<tr>
<td> State </td>
<td> <input type = "text" name="state" id="state" size = "30" /></td>
</tr>
95-733 Internet Technologies
Master of Information System
Management
54
Javascript Main Features
function getPlace(zip) {
var xhr;
if(window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else
xhr = ActiveXObject("Microsoft.XMLHTTP");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
var result = xhr.responseText;
var place = result.split(', ');
document.getElementById("city").value = place[0];
document.getElementById("state").value = place[1];
}
}
xhr.open("GET", "ZipToCityStateServlet?zip="+zip,true);
xhr.send(null);
}
95-733 Internet Technologies
Master of Information System
Management
55
Two Servlets - One for
AJAX
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
// Return simple text to Ajax request
if(request.getParameter("zip").equals("15216"))
out.println("Pittsburgh, PA");
else
out.println("New York, NY");
} finally {
out.close();
}
95-733 Internet Technologies
}
Master of Information System
Management
56
Another For the Form
out.println("<h2>Name: " + request.getParameter("name") + "</h2>");
out.println("<h2>Street: " + request.getParameter("street") + "</h2>");
out.println("<h2>Zip: " + request.getParameter("zip") + "</h2>");
out.println("<h2>City: " + request.getParameter("city") + "</h2>");
out.println("<h2>State: " + request.getParameter("state") + "</h2>");
95-733 Internet Technologies
Master of Information System
Management
57
XML Or JSON ? (1)
<Person firstName="John" lastName="Smith">
<Address>
<streetAddress>21 2nd Street</streetAddress>
<city>New York</city>
<state>NY</state>
<postalCode>10021</postalCode>
</Address>
<phoneNumber type="home"> 212 555-1234 </phoneNumber>
<phoneNumber type="fax"> 646 555-4567 </phoneNumber>
</Person>
95-733 Internet Technologies
Master of Information System
Management
From Wikipedia.org
58
XML Or JSON ? (2)
{
}
"firstName": "John", "lastName": "Smith",
"address":
{ "streetAddress": "21 2nd Street",
"city": "New York", "state": "NY",
"postalCode": "10021"
},
"phoneNumbers":
[ { "type": "home", "number": "212 555-1234" },
{ "type": "fax", "number": "646 555-4567" } ]
If this text is in the variable coolText, then we can create a
JavaScript object with the line of code:
var x = eval("(" + coolText + ")");
and access the data with x.phoneNumbers[0].
Better to use JSON.parse(text) and JSON.stringify(obj).
95-733 Internet Technologies
Master of Information System
Management
From Wikipedia.org 59
Which To Use?
Both formats are textual and are coarse grained.
JSON has some advantages over XML:
JSON messages are smaller and therefore faster.
No namespaces
JSON is simpler and simple is good.
JSON has become very popular
XML has some advantages over JSON:
Namespaces
Languages adopted by many industries
XSLT can be used to transform a response into an appropriate
format.
XML Signature and XML Encryption not available for JSON.
95-733 Internet Technologies
Master of Information System
Management
60
jQuery AJAX Example
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").load('test1.txt');
});
});
</script>
</head>
<body>
The syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)"
HTML elements
A jQuery action() to be performed
on the element(s)
Document ready before running
jQuery.
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load
95-733 Internet Technologies
Master of Information System
Management
61
Dojo Ajax Example
dojo.io.bind ( {
Note the use of
url : “getCityState.php?zip=“ + zip,
JS object to
load: function( type, data, evt ) {
describe an AJAX call.
var place = data.split(‘, ’);
if(dojo.byID(“city”).value = “”
dojo.byID(“city”).value = place[0];
if(dojo.byID(“state”).value = “”
dojo.byID(“state”).value = place[1];
},
error: function(type, data, evt ) {
alert(“Error in request, returned data:”+data);
},
method: “GET”,
mimetype: “text/plain”
}
From Pg. 422
);
Of Sebesta
95-733 Internet Technologies
Master of Information System
Management
62
JSONP
Suppose we want to visit a foreign data source from within the browser.
We want to make a request and retrieve data.
Or, perhaps, we want to transmit information to another site – fire
and forget.
Why?Perhaps we want to write a client side mashup.
Or, suppose we want to simply send data to a foreign server.
Why? Consider Google Analytics. How does that system work?
Problem: The Same Origin Policy is enforced by the browser.
95-733 Internet Technologies
Master of Information System
Management
63
JSONP Example
1) Visit https://developer.yahoo.com/yql/console/
2) Choose JSON with and without a function name in the callback box.
3) Use the Yahoo Query Language (YQL:
select * from geo.places where text=”Adelaide, Au”
4) Note the REST query on the bottom of the page. The REST query
includes the callback function name
5) Experiment. Visit
http://rss.nytimes.com/services/xml/rss/nyt/Technology.xml
6) Use YQL to get the same XML content in JSON and using
JSONP.
95-733 Internet Technologies
Master of Information System
Management
64
Using JSONP Rather than
AJAX
The <script> and <img> elements are not subject to the same origin
policy. Foreign scripts or images may be accessed.
The code below dynamically creates a script tag, places it in the HTML
head section, fetches the script, and executes it. Then, it deletes the
script element.
function jsonp(url) {
// user defined function
var head = document.head;
// point to head
var script = document.createElement("script"); // create script
script.setAttribute("src", url); // set script attribute src to url
head.appendChild(script);
// add to head and execute the
head.removeChild(script);
// script that is returned
}
// remove script element
95-733 Internet Technologies
Master of Information System
Management
65
JSONP Problem
The problem is the client executes the code after it is fetched.
The data fetched is treated as a Javascript block statement. This
results in a syntax error – if the data is JSON - not something we
want to execute.
Solution: We send the name of a function along with the request.
The function name is included in the response by the server. When
the response arrives the function is called.
Suppose the request includes the function name foo.
A response might look like this:
foo({"message" : "Hello" })
We provide the function foo that takes a Javascript object
parameter.
95-733 Internet Technologies
Master of Information System
Management
66
Example: Handle JSONP in
Java
@WebServlet(urlPatterns = {"/JSONServlet"})
public class JSONServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
System.out.println("JSON Servlet has a visitor");
try (PrintWriter out = response.getWriter()) {
// the query parameter is method=callbackName
String name = request.getParameter("method");
// name is the callBack
// return JSON object as a String {"id" : "mike"}
out.println(name + "({\"id\" : \"mike\" })");
}
}
95-733 Internet Technologies
Master of Information System
Management
67
Using JSONP On the client
<!DOCTYPE html>
<!-Index.html This is a simple demonstration of using JSONP.
-->
<html>
<head>
<title>Experiment with JSONP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<!-- Fetch the script from web site -->
<script src="jsonpscript.js"></script>
95-733 Internet Technologies
Master of Information System
Management
68
<!-- provide a callback handler named coolBeans -->
<script>
function coolBeans(x) {
alert("In coolBeans with " + x.id + " from server");
}
</script>
</head>
<body>
<div>
<!-- On click, get some JSON data from the JSONServlet and pass it to the
callBackHandler. -->
<button onclick="cooljsonp('JSONServlet','callBackHandler')">Click me for some
JSON
</button>
<!-- On click, get some JSON data from the JSONServlet and pass it to the
callBackHandler coolBeans -->
<button onclick="cooljsonp('JSONServlet','coolBeans')">Or click me for
some JSON
</button>
</div>
</body>
</html>
95-733 Internet Technologies
Master of Information System
Management
69
Using JSONP Javascript
<!– jsonpscript.js 
function cooljsonp(url,myCallback) {
alert("Calling " + url + " with " + myCallback + " for callback");
var head = document.head;
var script = document.createElement("script");
}
script.setAttribute("src", url + '?' + 'method=' + myCallback);
head.appendChild(script);
head.removeChild(script);
95-733 Internet Technologies
Master of Information System
Management
70
Using JSONP Javascript
<!– jsonpscript.js 
function callBackHandler(jsonObject) {
alert("callBack called");
// display the id property value
// treating it as a JSON object
alert(jsonObject.id);
// covert the jsonObject to a String
var response = JSON.stringify(jsonObject);
alert(response);
}
95-733 Internet Technologies
Master of Information System
Management
71
Web Sockets
Javascript API defined by W3C – Available on many browsers.
Java client side API and server side API see JSR 356 part of JEE 7
95-733 Internet Technologies
Master of Information System
Management
From Oracle
72
Web Sockets
Lifecycle Events
The typical lifecycle event of a WebSocket interaction goes as follows:
One peer (a client) initiates the connection by sending an HTTP handshake
request.
The other peer (the server) replies with a handshake response.
The connection is established. From now on, the connection is completely
symmetrical.
Both peers send and receive messages.
One of the peers closes the connection.
Most of the WebSocket lifecycle events can be mapped to Java methods, both
in the annotation-driven and interface-driven approaches.
Note that Web Sockets don’t describe the conversation that will take
place. This is left to the layer above the web socket layer.
95-733 Internet Technologies
Master of Information System
Management
From Oracle
73
Client side Web Sockets (1)
// Establish the socket in Javascript:
// Open a new WebSocket connection (ws), use wss for secure
// connections over SSL.
var wsUri = "ws://" + document.location.host +
document.location.pathname +
"whiteboardendpoint";
var websocket = new WebSocket(wsUri);
95-733 Internet Technologies
Master of Information System
Management
74
Client side Web Sockets (2)
// Prepare to send and receive data.
// A callback function is invoked for each new message from
// the server
websocket.onmessage = function(evt) {
onMessage(evt)
};
function onMessage(evt) {
// Called for us when a message
drawImageText(evt.data); // arrives.
}
function sendText(json) {
// We call this when we want.
websocket.send(json);
}
95-733 Internet Technologies
Master of Information System
Management
75
Server side Web Sockets in Java (1)
@ServerEndpoint(value="/whiteboardendpoint",
encoders = {FigureEncoder.class},
decoders = {FigureDecoder.class})
public class MyWhiteboard {
// create a synchronized (thread safe) set of sessions in a hashset
// names this collection peers
private static Set<Session> peers =
Collections.synchronizedSet(new HashSet<Session>());
95-733 Internet Technologies
Master of Information System
Management
76
Server side Web Sockets in Java (2)
// when a message arrives over the socket, call the peers
@OnMessage
public void broadcastFigure(Figure figure, Session session)
throws IOException, EncodeException {
System.out.println("broadcastFigure: " + figure);
// for each peer in the peers set of sessions
for (Session peer : peers) {
if (!peer.equals(session)) {
// this is not being sent back to the caller
peer.getBasicRemote().sendObject(figure);
}
}
}
95-733 Internet Technologies
Master of Information System
Management
77
Web Sockets and IOT
device
MQTT
Broker
subscriber
publish
device
MQ Telemetry Transport (MQTT)
telemetry = remote measurements.
MQTT runs on top of TCP.
MQTT is an established publish subscribe
Can be carried by web
messaging protocol for intermittent networks.
sockets, e.g., real time
dashboards.
With MQTT over WebSockets, a browser can
MQTT-SN for sensor
become an MQTT device – subscribing to or
networks. No TCP or IP.
publishing messages.
Can use e.g. ZigBee or
95-733 Internet Technologies
BlueTooth.
78
Master of Information System
Management