CIS 461 Web Development I

CIS 461 Web Development I Google Map, Ajax, N-Tier Architecture Jongwook Woo, PhD jwoo5@calstatela.edu California State University, Los Angeles Computer Information System Department

Content • AJAX • Google Maps API v3 • Maps Events • Maps Controls • N-Tier Client Server Computing

AJAX • AJAX • Asynchronous JavaScript and XML. • AJAX is the art of exchanging data with a server, • and update parts of a web page - without reloading the whole page.

AJAX The XMLHttpRequest Object All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. But IE5 and IE6 uses an ActiveXObject. used to exchange data with a server behind the scenes. possible to update parts of a web page, without reloading the whole page. Syntax for creating an XMLHttpRequest object: variable=new XMLHttpRequest(); Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object: variable=new ActiveXObject("Microsoft.XMLHTTP");

AJAX Example var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

AJAX Send a Request To a Server use the open() and send() methods of the XMLHttpRequest object: xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send(); GET or POST? GET is simpler and faster than POST.

AJAX GET or POST? use POST requests when: A cached file is not an option update a file or database on the server Sending a large amount of data to the server POST has no size limitations Sending user input which can contain unknown characters POST is more robust and secure than GET Asynchronous - True or False? Many of the tasks performed on the server are very time consuming cause the application to hang or stop. With AJAX, does not have to wait for the server response, but can instead: execute other scripts while waiting for server response deal with the response when the response ready

AJAX Server Response To get the response from a server, responseText or responseXML property of the XMLHttpRequest object. The responseText Property document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

AJAX The responseXML Property If the response from the server is XML, and you want to parse it as an XML object, use the responseXML property: Example http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_responsexml Request the file cd_catalog.xml and parse the response: xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }document.getElementById("myDiv").innerHTML=txt;

AJAX The onreadystatechange event When a request to a server is sent, we want to perform some actions based on the response. is triggered every time the readyState changes. The readyState property holds the status of the XMLHttpRequest.

AJAX In the onreadystatechange event, the response is ready: When readyState is 4 and status is 200, Example xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

Callback Function Using a Callback Function function passed as a parameter to another function Simplify the code If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task. The function call should contain the URL and what to do on onreadystatechange (which is probably different for each call): Example function myFunction(){loadXMLDoc("ajax_info.txt", function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } );}

Callback Function function loadXMLDoc(url, cfunc) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET", url, true); xmlhttp.send(); } Example Code http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_callback

Google Maps V3 API Google Maps V3 API the "map" itself. The fundamental element in any Google Maps V3 API application Learn fundamental google.maps.Map object and the basics of map operations.

Hello World Example Google Maps Declaring Your Application as HTML5 <!DOCTYPE html> In order to avoid 0 x 0 pixels map size. we include the following <style> declaration: <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% }</style> map_canvas the map container <div> should take up 100% of the height of the HTML body. specifically declare those percentages for <body> and <html> as well.

Loading the Google Maps API <html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=set_to_true_or_false"></script> The http://maps.googleapis.com/maps/api/js URL points to the location of Google Maps API sensor parameter to indicate whether this application uses a sensor to determine the user's location Cell or GPS The <meta> tag this map should be displayed full-screen and should not be resizable by the user

Map DOM Elements and Options Map DOM Elements <div id="map_canvas" style="width: 100%; height: 100%"></div> a spot for the map to display on a web page by creating a named div element and obtaining a reference to this element in the browser's document object model (DOM). <div> named "map_canvas" and the size is set to "100%" which will expand to fit the size on mobile devices. Map Options var myLatlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; To initialize a Map We also set the initial zoom level mapTypeId togoogle.maps.MapTypeId.ROADMAP ROADMAP displays the normal, default 2D tiles of Google Maps. SATELLITE displays photographic tiles. HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names). TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).

google.maps.Map - the Elementary Object google.maps.Map(opts?) Creates a new map using the passed optional parameters var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); the Map class The JavaScript class that represents a map is Objects of this class define a single map on a page. You may create more than one instance of this class each object will define a separate map on the page

Loading the Map <body onload="initialize()"> To ensure that our map is placed on the page after the page has fully loaded, Doing so avoids unpredictable behavior Latitudes and Longitudes The google.maps.LatLng object a way to refer to locations on the map. passing its parameters in the order { latitude, longitude }: var myLatlng = new google.maps.LatLng(myLatitude, myLongitude) Geocoding the process of turning an address into a geographic point.

Hello World Google Map Tutorial Code http://code.google.com/apis/maps/documentation/javascript/tutorial.html Example Page http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

Map Events User events (such as "click" mouse events) are propagated from the DOM to the Google Maps API. These events are separate and distinct from standard DOM events. using aproperty_changed convention registering addListener() event handlers on google.maps.event namespace UI Events A google.maps.Marker object can listen to the following user events 'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout' they are actually part of the Maps API These events may look like standard DOM events, but

Map Events an event handler to a marker that zooms the map when clicked var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); google.maps.event.addListener(marker, 'click', function() { map.setZoom(8); }); Another event handler to the map for changes to the 'zoom' property and move the map to Darwin, Northern Territory, Australia on receipt of the zoom_changed event: google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToDarwin, 3000); }); http://code.google.com/apis/maps/documentation/javascript/events.html

Map Controls The Zoom control displays a slider (for large maps) or small "+/-" buttons (for small maps) control the zoom level of the map. default in the top left corner of the map on non-touch devices or in the bottom left corner on touch devices. The Pan control panning the map. default in the top left corner of the map on non-touch devices. allows you to rotate 45° imagery, if available. The Street View control Pegman icon which can be dragged onto the map to enable Street View. default in the top left corner of the map. The Rotate control small circular icon which allows you to rotate maps containing oblique imagery. default in the top left corner of the map.

Map Controls The MapType control lets the user toggle between map types (such as ROADMAPand SATELLITE). default in the top right corner of the map. The Overview Map control displays a thumbnail overview map reflecting the current map viewport within a wider area. default in the bottom right corner of the map, and is by default shown in its collapsed state. The Scale control displays a map scale element. non default.

Map Controls modify the map's MapOptions fields which affect the visibility and presentation of controls. Or calling setOptions() to change the map's options. For example, to disable the default UI entirely: function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151),disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

Map Controls Disable some MapOptions fields function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151),panControl: false, zoomControl: false, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

DirectionsService object Disable some MapOptions fields function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151),panControl: false, zoomControl: false, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);} http://code.google.com/apis/maps/documentation/javascript/examples/event-simple.html

N-Tier Web Architecture Web Server DB Server HTTP HTTP Web Browser with html, Applets, JavaScript, jsp, flash, XML, AJAX Corba client JDBC SQL RMI/IIOP 3G/4G Application Server for jsp, Servlet, EJB or Corba WAP HTTP Cell Phone with J2ME, WML WAP Gateway

Business Layer Presentation Layer Data Access Layer Java Classes, EJB (Session Bean) JDBC, Hibernate, EJB (Entity Bean), JSP Servlet HTML, JavaScript ASP .NET C++ .NET, C# .NET, VB .NET, J# .NET ADO .NET Functional logic for N-tier (Traditional) AJAX

CIS 461 Web Development I