Science Fair Project - Pirate

bricklayerbelchedInternet και Εφαρμογές Web

5 Φεβ 2013 (πριν από 4 χρόνια και 4 μήνες)

93 εμφανίσεις

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 weather
-
forecast 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>wachsmut@shu.edu</email>


</address>


<address>



<name>Silke von der Emde</name>



<email>vonderemde@vassar.edu</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 names = null; //
an array of all names

var emails = null; //
an array of all emails

var recno = 0; //
current record displayed

var rectot = 0; //
total records available


function loadData() //
loads data file and sets names and emails arrays

function showRecord() //
displays the current record

function nextRecord() //
increments recno and calls showRecord

function prevRecord() //
decrements recno and calls showRecord

function findRecord() //
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/