Download Science Fair Project - Seton Hall University Pirate Server

AJAX
(Async JavaScript and XML)
and Java Applets
Bert Wachsmuth
Review
Last-Last Time
 Internet, IP addresses, ports, client-server, http, smtp
 HTML, XHTML, XML
 Style Sheets, external, internal, inline, selector, properties, ids, classes, elements
 MS Expression Web, local and remote web site, synchronization, Dynamic Web Template
 Dynamic Web Pages: client-side and server-side programming
 Intro to JavaScript: basic operations, conditionals, loops, functions, dialog boxes
 Intro to the DOM: defining an element, replacing innerHTML, refreshes without reloading
Last Time
 More DOM: element id's, replacing innerHTML or image source
 Styles: switching between styles
 Cookies: developed a library of cookie functions
 External JavaScript files: for cookie handlers
 Timers and Recursion: falling body problem
Homework
 Created script to switch between 2 styles and library of cookie-handling scripts
 add a third style and modify the document and scripts to allow switching
between three styles
 use the cookie script functions from our library to ensure that when a user
re-visits your document within a week, it will be presented in the same style
the user last selected
 if you wanted the styles of your entire web site, not only of one page but of
all pages, to be switchable, how would you do that?
 Discussed timers and recursion and created a count-down timer page.
 Modify the script to count up from 1 to 100 every 0.2 seconds
 Add code to also keep track of the sum of counting numbers.
The XMLHttpRequest Object
 At the heart of most data-oriented Web 2.0 pages like
Google Maps or Facebook is the
XMLHttpRequest
 It lets you load data:
 Without reloading the page
 Synchronously
 Asynchronously
The XMLHttpRequest Object
Limitations:
 IE 7, IE 8, and Firefox 2 and above handle
XMLHttpRequest similarly
 IE 5 and IE 6 handle XMLHttpRequest differently
 Really old browsers do not handle XMLHttpRequest at
all
 XMLHttpRequest can only load data from the same
server it is coming from
 XMLHttpRequest cannot load data from a local disk at all
Need XML Data
 To experiment with XMLHttpRequest we need access to data in
XML format.
 Could try, for example, to use weather info provided by Google:
http://www.google.com/ig/api?weather=Frankfurt,Germany
 Google makes this data available just fine, and it is in perfect XML
format
However, we are unable to use it for our own JavaScript weatherforecast program – why?
Need XML Data
 XML data and script to load it must be on the same machine
 XML data can not be loaded from local disk
Must work on the server with Expression Web:
 close your current web site
 click “File | Open Site”
 enter as site name: ftp://courses.shu.edu/
You should be prompted for your Seton Hall username and password
as usual. After login you can create and edit files on the server.
Our own XML Data (on server)
File addressdata.xml
<xml>
<addressbook>
<address>
<name>Bert Wachsmuth</name>
<email>[email protected]</email>
</address>
<address>
<name>Silke von der Emde</name>
<email>[email protected]</email>
</address>
</addressbook>
</xml>
Simple Use
function showData()
{
var xml = new XMLHttpRequest();
xml.open("GET", "addressdata.xml", false);
xml.send("");
var xmlDoc = xml.responseXML;
var names = xmlDoc.getElementsByTagName("name");
var mails = xmlDoc.getElementsByTagName("email");
for (var i = 0; i < names.length; i++)
{
var name = names[i ].childNodes[0].nodeValue;
var mail = mails[i].childNodes[0].nodeValue;
document.writeln("<li>" + name + "(" + mail + ")</li>");
}
}
Problem
 Only works on Firefox 3 and IE 7, 8
Solution
 Use my JavaScript library xmltools.js
<script language="javascript" type="text/javascript"
src="/spring09/CEPS0100/wachsmut/JavaScript/xmltools.js">
</script>
<script language="javascript" type="text/javascript"
function showData()
{
var xmlDoc = loadXMLDoc("addressdata.xml");
... As before ...
}
</script>
Better Solution

Library to load XML data across browsers:
http://courses.shu.edu/spring09/CEPS0100/wachsmut/JavaScript/xmltools.js

Use index variable to track current address and functions as follows:
http://courses.shu.edu/spring09/CEPS0100/wachsmut/AJAX/addressbook.html
var
var
var
var
names = null;
emails = null;
recno = 0;
rectot = 0;
function
function
function
function
function
loadData()
showRecord()
nextRecord()
prevRecord()
findRecord()
//
//
//
//
an array of all names
an array of all emails
current record displayed
total records available
//
//
//
//
//
loads data file and sets names and emails arrays
displays the current record
increments recno and calls showRecord
decrements recno and calls showRecord
prompts for name and searches names array
How does it work?







What are the global variables?
What data do the global variables store?
What are the functions and what do they do?
What is the point of the variable recno
When does loadData get called?
When do nextRecord and prevRecord get called?
Who calls showRecord and how come it does not always
display the same record?
 Where is the data displayed and how?
Adding a Search Function
1 function findRecord()
2 {
3
var currentrecno = recno;
4
var found = false;
5
var searchfor = prompt("Enter name to search for:", "");
6
if ((searchfor != null) && (searchfor != ""))
7
{ recno = 0;
8
while ((!found) && (recno < rectot))
9
{
var name = names[recno].childNodes[0].nodeValue;
10
if (name.toLowerCase().indexOf(searchfor.toLowerCase()) >= 0)
11
found = true;
12
else
13
recno++;
14
}
15
if (found)
16
showRecord();
17
else
18
{
recno = currentrecno;
19
alert("Nobody with that name found, sorry.");
20
}
21
}
22 }
Google’s Search API
 Google does provide XML data – even to its flagship “search” data
 It also provides suitable JavaScript functions
 Both data and JavaScript are coming from the same domain, so
there are no security restrictions!
 For details, check:
http://code.google.com/apis/ajaxsearch/
 or for even more information, check:
http://code.google.com/apis/ajax/
Google's Search API
<script src="http://www.google.com/jsapi"
type="text/javascript">
</script>
<script language="Javascript" type="text/javascript">
google.load('search', '1');
function loadSearch()
{
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.LocalSearch());
searchControl.addSearcher(new google.search.WebSearch());
var location = document.getElementById("searchcontrol");
searchControl.draw(location);
}
</script>
</head>
<body onload="loadSearch()">
<div id="searchcontrol">Loading ...</div>
</body>
Google Options
var localSearch = new google.search.LocalSearch();
localSearch.setCenterPoint("South Orange, NJ");
...
searchControl.addSearcher(localSearch);
__________________________________________
var opt = new google.search.DrawOptions();
opt.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
...
searchControl.draw(location, opt);
__________________________________________
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("SHU");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("www.shu.edu");
...
searchControl.addSearcher(localSearch);
AJAX 
This is all the AJAX examples we have time for
 our code is not asynchronously (loads data in the background).
Some sites using the XMLHttpRequest object are:
 maps.google.com
 www.flickr.com
 www.facebook.com
For more info and examples, check:
 http://www.xul.fr/en-xml-ajax.html
 http://www.w3schools.com/ajax/default.asp
 http://www.ajaxdaddy.com/
Java is:
 Java is a complete, object-oriented, modern programming
language that has nothing to do with JavaScript other than part of
its name. Java is:





Strongly typed
Fully object oriented
Compiled
Independent of the operating system
Supports TCPIP programming
Java can:
 Java can be used:




To create complete stand-alone programs that run on any operating system
To create applets that run inside a web browser
To create server-side programs via JSP
To support small-device programming for cell phone
 Java Rivals
 Applet rivals: Adobe Flash or Microsoft Silverlight (for “casual” games)
 Program rivals: C++ and C# (.NET)
 Server-Side: Microsoft's ASP, Ruby on Rails, PHP
 Java – just as JavaScript – has the big advantage that it is free.
Java Programming
 To program in Java you need:
 A source-code editor
 A Java compiler
 A Java Virtual Machine (JVM)
Real Java Tools
 The JDK (Java Developer’s Kit) from Sun
 visit http://java.sun.com/ and look for the Java SE (Standard Edition).
 download the latest release of the Java JDK (JDK) and install it on your
computer
 Provides compiler, JVM, and tools
 The Eclipse IDE (Integrated Developer’s Environment)
 visit http://www.eclipse.org/
 download the latest release of the Eclipse IDE for Developers.
 once downloaded you need to unzip the program
 you cannot use Window’s build-in unzip program, you must use an external
program such as WinZip (not free) or 7Zip (free).
 create shortcut to the main Eclipse program to run Eclipse
A Java Program
Your first Java stand-alone program:
public class BasicProgram
{
public static void main(String args[])
{
System.out.println("Hello World");
}
}
A Java Applet
Your first Java Applet:
import javax.swing.JApplet;
import javax.swing.JLabel;
public class BasicApplet extends JApplet
{
JLabel label = new JLabel("Hello World");
public void init()
{
add(label);
}
}
Embedding an Applet
To embed an applet in a web page you use the <applet> tag:
<html>
<head><title>Simple Applet</title></head>
<body>
<h1>Simple Applet</h1>
<center>
<applet code="BasicApplet.class"
width="200"
height="80">
</applet>
</center>
</body>
</html>
Embedding a foreign Applet
Applet from another site embedded via the codebase attribute:
<center>
<applet code="com.tlabs.MitosisApplet"
codebase="http://theoreticgames.com/mitosis"
height="320"
width="400"
archive="./Mitosis.jar">
</applet>
</center>
Embedding a foreign Applet (2)




find an applet you like
look at the page source
copy the <applet …> … </applet> code
add a codebase attribute to the base URL where you found the
applet
 see if it works
Try:
http://www.mathcs.org/java/programs/Calculator/Calculator.html
Applet Framework
import javax.swing.JApplet;
...
// import necessary classes
public class AppletFramework extends JApplet
implements ActionListener
{ // fields (global variables)
JButton button = new JButton("A button");
// methods (aka functions)
public void init()
public void start()
public void stop()
public void actionPerformed(ActionEvent ae)
}
See
http://courses.shu.edu/spring09/CEPS0100/wachsmut/Java/
More on Java
We barely scratched the Java surface but time is up. For more details,
check the lecture notes and:
 http://www.mathcs.org/java/jbd - complete online text book, very
thorough with plenty math examples. In addition, exercises can be
provided upon request
 http://java.sun.com/docs/books/tutorial/ - ultra-complete with lots
of tricks, but not that easy to understand
 http://java.sun.com/javase/6/docs/ - technical overview of the Java
language
 http://java.sun.com/javase/6/docs/api/ - the classes and functions
you need to know (essential reference but this is not a tutorial – it
really is a reference)
Your own Web Site
Download your own web server software.
 You will be the web master and the content provider
 you can experiment with any technique you wish, including
server-side scripts.
 Downside: no permanent IP name or address.
 can be used by you using the web address http://localhost/
 Can be used by others who know your IP (depends on firewall)
 More info: http://www.apache.org/ (lookup and download the
httpd server)
Your own Web Site (2)
Establish a Google web site
 up to 100MB free
 fair amount of freedom with regards to page hierarchy
 some choice of themes
 integration with Google docs, s
 shared editing possible
 Downside: no JavaScript, Java, or style sheets allowed.
 More info: http://sites.google.com/
 Your page: http://sites.google.com/site/wachsmut/
Your own Web Site (3)
Set up a Windows Live site:
 Up to ___ (?) MB free
 integrates pictures, blogs, SkyDrive, etc. via Windows Live
 Downside:
 no JavaScript, Java, or Style sheets allowed
 Restrictive design
 Somewhat confusing.
 More info: http://spaces.live.com/
 Your page: http://wachsmut.spaces.live.com/
Your own Web Site (4)
Setup your own domain and web hosting:
 Complete freedom to design your pages
 Create your own domain name
 Include client-side scripts, CSS, Java, etc.
 Includes email boxes and sub-domains.
 Downside:
 $4.99 a month for 120 GB space and 1.2 TB monthly volume
 No server-side scripting allowed
 More info: http://www.1and1.com/
 Your page: http://www.anything.you.want/
Your own Web Site (5)
Rent your own Virtual Server.
 Complete freedom to create interactive sites
 include client-side and server-side scripts
 online database access
 shell access
 Downside:
 starts at $29.99 a month
 "with great power comes great responsibility" (to learn how to program)
 More info: http://www.1and1.com/