Presentation is loading. Please wait.

Presentation is loading. Please wait.

Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I Google Map, Ajax, N-Tier.

Similar presentations


Presentation on theme: "Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I Google Map, Ajax, N-Tier."— Presentation transcript:

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

2 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Content nAJAX nGoogle Maps API v3 nMaps Events nMaps Controls nN-Tier Client Server Computing

3 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nAJAX mAsynchronous JavaScript and XML. mAJAX is the art of exchanging data with a server, –and update parts of a web page - without reloading the whole page.

4 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nThe XMLHttpRequest Object mAll modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. mBut IE5 and IE6 uses an ActiveXObject. mused to exchange data with a server behind the scenes. – possible to update parts of a web page, without reloading the whole page. nSyntax for creating an XMLHttpRequest object: variable=new XMLHttpRequest(); mOld versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object: variable=new ActiveXObject("Microsoft.XMLHTTP");

5 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nExample 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"); }

6 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nSend a Request To a Server muse the open() and send() methods of the XMLHttpRequest object: xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); nGET or POST? mGET is simpler and faster than POST. MethodDescription open(method,url,async) method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) send(string)Sends the request off to the server. string: Only used for POST requests

7 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nGET or POST? muse 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 nAsynchronous - True or False? mMany of the tasks performed on the server are very time consuming –cause the application to hang or stop. mWith 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

8 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nServer Response mTo get the response from a server, – responseText or responseXML property of the XMLHttpRequest object. nThe responseText Property document.getElementById("myDiv").innerHTML=xmlhttp.responseT ext; PropertyDescription responseTextget the response data as a string responseXMLget the response data as a XML data

9 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nThe responseXML Property mIf the response from the server is XML, and you want to parse it as an XML object, use the responseXML property: mExample –http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_responsexmlhttp://www.w3schools.com/ajax/tryit.asp?filename=tryajax_responsexml –Request the file cd_catalog.xml and parse the response:cd_catalog.xml xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i "; } document.getElementById("myDiv").innerHTML=txt;

10 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nThe onreadystatechange event mWhen a request to a server is sent, we want to perform some actions based on the response. mis triggered every time the readyState changes. –The readyState property holds the status of the XMLHttpRequest. PropertyDescription onreadystate change Stores a function (or the name of a function) to be called automatically each time the readyState property changes readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status200: "OK" 404: Page not found

11 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System AJAX nIn the onreadystatechange event, mthe response is ready: –When readyState is 4 and status is 200, mExample xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText ; } }

12 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Callback Function nUsing a Callback Function mfunction passed as a parameter to another function –Simplify the code mIf 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. mThe function call should contain the URL and what to do on onreadystatechange (which is probably different for each call): mExample function myFunction() { loadXMLDoc("ajax_info.txt", function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } ); }

13 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System 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(); } nExample Code

14 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Google Maps V3 API nGoogle Maps V3 API mthe "map" itself. –The fundamental element in any Google Maps V3 API application m Learn fundamental google.maps.Map object –and the basics of map operations.

15 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Hello World Example Google Maps nDeclaring Your Application as HTML5 n In order to avoid 0 x 0 pixels map size. m we include the following declaration: html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } n map_canvas mthe map container mshould take up 100% of the height of the HTML body. –specifically declare those percentages for and as well.

16 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Loading the Google Maps API nThe mURL points to the location of Google Maps API msensor parameter –to indicate whether this application uses a sensor to determine the user's location Cell or GPS nThe tag m this map should be displayed full-screen mand should not be resizable by the user

17 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Map DOM Elements and Options nMap DOM Elements ma 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). m named "map_canvas" and the size is set to "100%" which will expand to fit the size on mobile devices. nMap Options var myLatlng = new google.maps.LatLng( , ); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; mTo initialize a Map mWe 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.).

18 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System google.maps.Map - the Elementary Object ngoogle.maps.Map(opts?) mCreates a new map using the passed optional parameters var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); nthe Map class mThe JavaScript class that represents a map is mObjects 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

19 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Loading the Map nTo ensure that our map is placed on the page after the page has fully loaded, mDoing so avoids unpredictable behavior nLatitudes and Longitudes mThe 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) mGeocoding –the process of turning an address into a geographic point.

20 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Hello World Google Map nTutorial Code nExample Page les/map-simple.html

21 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Map Events nUser events (such as "click" mouse events) are propagated mfrom the DOM to the Google Maps API. –These events are separate and distinct from standard DOM events. musing a property_changed convention mregistering addListener() event handlers on google.maps.event namespace nUI Events mA google.maps.Marker object can listen to the following user events –'click' –'dblclick' –'mouseup' –'mousedown' –'mouseover' –'mouseout' mthey are actually part of the Maps API –These events may look like standard DOM events, but

22 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Map Events nan event handler to a marker mthat 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); }); nAnother event handler to the map for changes to the 'zoom' property mand 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); }); nhttp://code.google.com/apis/maps/documentation/javascript/events.htm lhttp://code.google.com/apis/maps/documentation/javascript/events.htm l

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

24 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Map Controls nThe MapType control lets the user toggle between map types (such as ROADMAPand SATELLITE). m default in the top right corner of the map. nThe Overview Map control mdisplays a thumbnail overview map reflecting the current map viewport within a wider area. m default in the bottom right corner of the map, and is by default shown in its collapsed state. nThe Scale control displays a map scale element. mnon default.

25 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Map Controls nmodify the map's MapOptions fields mwhich affect the visibility and presentation of controls. mOr calling setOptions() to change the map's options. nFor 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); }

26 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Map Controls nDisable some MapOptions fields mfunction 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); }

27 Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DirectionsService object nDisable some MapOptions fields mfunction 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); } mhttp://code.google.com/apis/maps/documentation/javascript/examples/ev ent-simple.htmlhttp://code.google.com/apis/maps/documentation/javascript/examples/ev ent-simple.html

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

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


Download ppt "Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I Google Map, Ajax, N-Tier."

Similar presentations


Ads by Google