Transcript 02_Introduction

95-733 Internet Technologies
Week 2
95-733 Internet Technologies
Master of Information System
Management
1
Week Two
• Topics:
• AJAX
• JSONP
• Websockets
• Websockets and MQTT
95-733 Internet Technologies
Master of Information System
Management
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
}}}}
21
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
22
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
23
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
24
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
25
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
26
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
27
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
28
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
29
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
30
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
31
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
32
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 33
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
34
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
35
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
36
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
37
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) Try select * from rss where
url = "http://rss.nytimes.com/services/xml/rss/nyt/Technology.xml"
7) Use YQL to get the same XML content in JSON and using
JSONP.
95-733 Internet Technologies
Master of Information System
Management
38
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
39
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
40
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
41
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
42
<!-- 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
43
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
44
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
45
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
46
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
47
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
48
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
49
Server side Web Sockets in Java (1)
// The Decode is used for messages arriving from the peer.
// The Encoder is used for messages being sent to the peer.
@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
50
Server side Web Sockets in Java (2)
// when a message arrives from the decoder, 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);
}
}
}
// when sendObject is called, the Encoder is executed.
95-733 Internet Technologies
Master of Information System
Management
51
Sending JSON data
// Microsoft example: Send text to all users through the server
function sendText()
{ // Construct a msg object containing the data the server
// needs to process the message from the chat client.
var msg = { type: "message",
text: document.getElementById("text").value,
id: clientID,
date: Date.now()
};
// Send the msg object as a JSON-formatted string.
exampleSocket.send(JSON.stringify(msg));
// Blank the text input element, ready to receive the next line of text
// from the user.
document.getElementById("text").value = ""; }
95-733 Internet Technologies
Master of Information System
Management
52
WebSockets using JEE
A message arrives from a peer – it needs to be decoded
into a Java object. Then, it may be processed by the Java code.
A message is being sent to a peer. It needs to be encoded before
being placed on the wire.
Image from http://www.mastertheboss.com/javaee/websockets/websockets-using-encoders-and-decoders
95-733 Internet Technologies
Master of Information System
Management
53
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
sockets for, e.g., real time messaging protocol for intermittent networks.
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.
54
Master of Information System
Management