ajax (async javascript and xml) and java applets bert wachsmuth

AJAX (Async JavaScript and XML)

and Java AppletsBert Wachsmuth

ReviewLast-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>[email protected]</email>

</address><address>

<name>Silke von der Emde</name><email>[email protected]</email>

</address></addressbook></xml>

Simple Usefunction 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 Optionsvar 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 AppletTo 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 AppletApplet 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 Frameworkimport 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)

}

Seehttp://courses.shu.edu/spring09/CEPS0100/wachsmut/Java/

More on JavaWe 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 requesthttp://java.sun.com/docs/books/tutorial/ - ultra-complete with lots of tricks, but not that easy to understandhttp://java.sun.com/javase/6/docs/ - technical overview of the Java languagehttp://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/


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/


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/

ajax (async javascript and xml) and java applets bert wachsmuth

Documents