CIS 461 Web Development I - PowerPoint PPT Presentation

Loading...

PPT – CIS 461 Web Development I PowerPoint presentation | free to download - id: 7e3add-YmRmM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

CIS 461 Web Development I

Description:

Title: Multihoming for Hosts on IPv6 Subject: IPv6 Author: Jongwook Woo Last modified by: Jongwook Woo Created Date: 1/27/1998 6:13:43 PM Document presentation format – PowerPoint PPT presentation

Number of Views:10
Avg rating:3.0/5.0
Slides: 30
Provided by: Jong55
Category:
Tags: cis | ipv6 | development | roadmap | web

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: CIS 461 Web Development I


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

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

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

4
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
  • variablenew XMLHttpRequest()
  • Old versions of Internet Explorer (IE5 and IE6)
    uses an ActiveX Object
  • variablenew ActiveXObject("Microsoft.XMLHTTP")

5
AJAX
  • Example
  • var xmlhttpif (window.XMLHttpRequest)  //
    code for IE7, Firefox, Chrome, Opera, Safari 
    xmlhttpnew XMLHttpRequest()  else  //
    code for IE6, IE5  xmlhttpnew
    ActiveXObject("Microsoft.XMLHTTP") 

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

Method Description
open(method,url,async) method the type of request GET or POSTurl the location of the file on the serverasync true (asynchronous) or false (synchronous)
send(string) Sends the request off to the server.string Only used for POST requests
7
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

8
AJAX
  • Server Response
  • To get the response from a server,
  • responseText or responseXML property of the
    XMLHttpRequest object.
  • The responseText Property
  • document.getElementById("myDiv").innerHTMLxmlhttp
    .responseText

Property Description
responseText get the response data as a string
responseXML get the response data as a XML data
9
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?filenamet
    ryajax_responsexml
  • Request the file cd_catalog.xml and parse the
    response
  • xmlDocxmlhttp.responseXMLtxt""xxmlDoc.getEl
    ementsByTagName("ARTIST")for (i0iltx.lengthi
    )    txttxt xi.childNodes0.no
    deValue "ltbr /gt"  document.getElementById("m
    yDiv").innerHTMLtxt

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

Property Description
onreadystatechange 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 established2 request received 3 processing request 4 request finished and response is ready
status 200 "OK"404 Page not found
11
AJAX
  • In the onreadystatechange event,
  • the response is ready
  • When readyState is 4 and status is 200,
  • Example
  • xmlhttp.onreadystatechangefunction()    if
    (xmlhttp.readyState4 xmlhttp.status200)   
        document.getElementById("myDiv").innerHTML
    xmlhttp.responseText     

12
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.readyState4
    xmlhttp.status200)        document.getElement
    ById("myDiv").innerHTMLxmlhttp.responseText   
      )

13
Callback Function
  • function loadXMLDoc(url, cfunc)
  • if (window.XMLHttpRequest)
  • // code for IE7, Firefox, Chrome, Opera,
    Safari
  • xmlhttpnew XMLHttpRequest()
  • else // code for IE6, IE5
  • xmlhttpnew ActiveXObject("Microsoft
    .XMLHTTP")
  • xmlhttp.onreadystatechangecfunc
  • xmlhttp.open("GET", url, true)
  • xmlhttp.send()
  • Example Code
  • http//www.w3schools.com/ajax/tryit.asp?filenamet
    ryajax_callback

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

15
Hello World Example Google Maps
  • Declaring Your Application as HTML5
  • lt!DOCTYPE htmlgt
  •  In order to avoid 0 x 0 pixels map size.
  • we include the following ltstylegt declaration
  • ltstyle type"text/css"gt  html height 100  
    body height 100 margin 0 padding 0  
    map_canvas height 100 lt/stylegt
  •  map_canvas
  • the map container ltdivgt
  • should take up 100 of the height of the HTML
    body.
  • specifically declare those percentages
    for ltbodygt and lthtmlgt as well.

16
Loading the Google Maps API
  • lthtmlgtltheadgtltmeta name"viewport"
    content"initial-scale1.0, user-scalableno"
    /gtltscript type"text/javascript"
    src"http//maps.googleapis.com/maps/api/js?sensor
    set_to_true_or_false"gtlt/scriptgt
  • 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 ltmetagt tag
  • this map should be displayed full-screen
  • and should not be resizable by the user

17
Map DOM Elements and Options
  • Map DOM Elements
  • ltdiv id"map_canvas" style"width 100 height
    100"gtlt/divgt
  • 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).
  • ltdivgt 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.ROADM
    AP
  • 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.).

18
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.getElementB
    yId("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

19
Loading the Map
  • ltbody onload"initialize()"gt
  • 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.

20
Hello World Google Map
  • Tutorial Code
  • http//code.google.com/apis/maps/documentation/jav
    ascript/tutorial.html
  • Example Page
  • http//code.google.com/apis/maps/documentation/jav
    ascript/examples/map-simple.html

21
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 a property_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  

22
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.add
    Listener(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/jav
    ascript/events.html

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

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

25
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)

26
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_canva
    s"),        myOptions)

27
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_canva
    s"),        myOptions)
  • http//code.google.com/apis/maps/documentation/jav
    ascript/examples/event-simple.html

28
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
29
Functional logic for N-tier (Traditional)
AJAX
About PowerShow.com