Introduction to AJAX

Transcript Introduction to AJAX

Introduction to AJAX
Speaker: Yan-Shiang Wang
Date:2006.11.20
1
Outline






Introduction
Examples
Explanation
Coding yourself
Demo
Reference
2
AJAX






Asynchronous JavaScript and XML
It was born on February 2005
It isn't a technology; it's a approach.
Combine Web Browser and
Application Server
Creating interactive web applications
Refresh without reload
3
Examples (1/2)

Map query


Autocomplete


http://tw.dictionary.yahoo.com/
Web Office


http://www.map.com.tw/
http://www.thumbstacks.com/
Web OS

http://osx.portraitofakite.com/
4
Examples (2/2)

Drag and Drop



Active Table


http://cyberdummy.co.uk/test/dd.php
http://tool-man.org/examples/
http://wiki.donttouchme.org/index.php/AJ
AX_ActiveTable
Slider Bar

http://www.cyberdummy.co.uk/test/slider/
5
Definition





standards-based presentation using XHTML
and CSS
dynamic display and interaction using the
Document Object Model
data interchange and manipulation using
XML and XSLT
asynchronous data retrieval using
XMLHttpRequest
JavaScript binding everything together
6
Explanation



asynchronous because independent of
communication with the server
JavaScript function creates an object
that communicates with the Web
browser and tells the browser to load a
specific page
XMLHttpRequest object is used to
retrieve page content in JavaScript
7
Figure 1 traditional model vs
Ajax model
8
Figure 2 synchronous vs
asynchronous
9
Conclusion

Pros



Bandwidth utilization
Interactivity
Cons



Usability: back button and bookmarks
Response-time concerns
Search Engine Optimization
10
SAJAX



Simple Ajax Toolkit
open source tool to make
programming websites as easy as
possible
http://www.modernmethod.com/sajax/
11
Tutorial(1/4)

Include the library and initialize it and tell it what
functions you wish to export:
<?php
require("Sajax.php");
// the function we will be exporting to JavaScript:
function multiply($x, $y) {
return $x * $y;}
sajax_init();
sajax_export("multiply"); // list of functions to export
sajax_handle_client_request(); // serve client instances
?>
12
Tutorial(2/4)

Setup your HTML
(including the JavaScript the library generates)
<html>
<head>
<title>Test</title>
<script>
<? sajax_show_javascript(); ?>
function set_math_result(result){
document.getElementById("z").value = result;
}
13
Tutorial(3/4)
function do_the_math() {
var x, y;
x = document.getElementById("x").value;
y = document.getElementById("y").value;
// our php function multiply() has been linked to a javascript
function named
// x_multiply(). call it.
x_multiply(x, y, set_math_result);
}
</script>
14
Tutorial(4/4)
<body>
<input type="text" name="x" id="x" value="2" size="3">
*
<input type="text" name="y" id="y" value="3" size="3">
=
<input type="text" name="z" id="z" value="" size="3">
<input type="button" name="check" value="Calculate"
onclick="do_the_math(); return false;">
</body>
</html>
http://ms11.voip.edu.tw/~sepp/sajax/example_multiply.php
http://ms11.voip.edu.tw/~sepp/sajax/simple_multiply.php
15
Dynamic grapher

Demo


http://ms11.voip.edu.tw/rrdtool/
Source code

http://ms11.voip.edu.tw/~sepp/rrdtest/slid
er/rrdtool.phps
16
Reference

Ajax: A New Approach to Web Applications


Wikipedia Ajax (programming)


http://en.wikipedia.org/wiki/AJAX
Using Ajax with PHP and Sajax


http://www.adaptivepath.com/publications/essays/archives/000385.php
http://www-128.ibm.com/developerworks/edu/os-dw-os-phpajaxi.html?S_TACT=105AGX59&S_CMP=GR&ca=dgr-lnxw07SAJAX
Ajax framework

http://scw1109.wordpress.com/tag/technologies/ajax/
17
Reference (cont.)

Ajax新浪潮


Ajax入門


http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ajax.shtml
Web介面設計新趨勢


http://jacky.seezone.net/2005/02/25/1127/
http://blog.yam.com/syshen/archives/184517.html
Ajax探討

http://phorum.studyarea.org/viewtopic.php?p=194397#194397
18

Introduction to AJAX

Transcript Introduction to AJAX

Directory