Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

2021-04-10T00:20:02Z

Text replacement - "$" to " {{edutechwiki}}"

← Older revision		Revision as of 02:20, 10 April 2021
Line 250:		Line 250:
	[[Category: Rich internet applications]]		[[Category: Rich internet applications]]
	[[Category:JavaScript]]		[[Category:JavaScript]]
			{{edutechwiki}}

Daniel K. Schneider: 1 revision imported

2021-04-09T22:47:51Z

1 revision imported

← Older revision	Revision as of 00:47, 10 April 2021
(No difference)

edutechwiki_en>RobertoOrtelli: /* JavaScript toolkits */

2009-09-24T12:28:51Z

JavaScript toolkits

New page

== Definition ==

According to [http://en.wikipedia.org/wiki/AJAX Wikipedia]: {{quotation |Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is meant to increase the web page's interactivity, speed, and usability.}}, retrieved 15:11, 9 February 2007 (MET).

The Ajax technique uses a combination of:

* XHTML (or HTML) and CSS, for marking up and styling information.
* The DOM accessed with a client-side [[scripting language]], usually [[ECMAScript]] (JavaScript)
* The XMLHttpRequest object is used to exchange data asynchronously with the web server.
* [[XML]] is sometimes used as the format for transferring data between the server and client.

== Standards and reference ==

The XMLHttpRequest object implements an interface exposed by a scripting engine that allows scripts to perform HTTP client functionality, such as submitting form data or loading data from a server. It's ''the'' core functionality of so-called AJAX and works in most browsers, but not exactly the same way. Standardization may happen in some near future. DKS/April/2008

* [http://www.w3.org/TR/XMLHttpRequest/ The XMLHttpRequest Object] (W3C Working Draft, April 2008). This specification proposal also outlines dependencies with other specifications like [[DOM]], HTML 5, and HTTP.

== Interesting AJAX applications ==

;Discussed in this wiki

* [[AJAX3D]]
* [[DITA Storm]]
* [[Through the web editor]]s
* [[Webtop]]s and other Mashups, i.e. [[web widget]]s (e.g. [[Universal Widget API]] or [[Pageflakes API]])
* [[Personal learning environment]]s (maybe some)
* [[Virtual office]]s (some)

== A simple example ==

AJAX is really simple. The difficult part is to write really good interfaces
(see toolkits in the links section) and to do something with these data on the server side ...

* Below we just demo a simple HTML page that will talk to php (Disclaimer: [[User:Daniel K. Schneider|Daniel K. Schneider]] is not a programmer).
* Example files are [http://tecfa.unige.ch/guides/js/ex/ajax/ here]

; HTML/JavaScript

<html>
<head>
<title>Simple Ajax example</title>
<script type="text/javascript" language="javascript">

var url;
var table;

function init () {
url = "ajax1.php";
// url = "ajax-debug.php";
table = document.getElementById("table1");
}

function makeRequest(element) {
// This function is called from the HTML code below
// element is the DOM element (tag on which the user clicked)

var http_request = false;

// ---- Mozilla, Safari, etc. browsers
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
// This will make sure that the server response claims to be XML (in case we retrieve something else)
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
// ---- IE browsers
} else if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

// ---- abort if there is no reply
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}

// We register the function that will deal with a reply
http_request.onreadystatechange = function() { processServerReply(http_request); };

// This lines starts building the request
http_request.open('POST', url, true);
// Contents WE send from here will be urlencoded
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// here we extract the contents of tag on which the user clicked
user_pref = element.innerHTML;
// This is the content of the request
// alert(user_pref);
user_request = "user_pref_fruit=" + user_pref;

// We send the data - data are query strings
http_request.send(user_request);
}

function processServerReply(http_request) {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
// We tell the server that we want to deal with XML as a DOM Document !!
replyXML = http_request.responseXML;
treatResponse (replyXML);
// displayResponse (replyXML);

} else {
alert('There was a problem with the request.');
}
}}

// This will change the HTML contents of the page
function treatResponse (reply) {
// reply is a XML DOM datastructure !!
// extract some XML - we know that it is in an "answer" tag
// DOM HTML will not work, it's XML here
var answer = reply.getElementsByTagName('answer').item(0).firstChild.nodeValue;

// new tr, td elements
var element_tr = document.createElement("tr");
var element_td = document.createElement("td");
// contents for the td element
var text = document.createTextNode(answer);
element_td.appendChild(text);
element_tr.appendChild(element_td);
table.appendChild(element_tr);
}

// just for debugging, will open up a popup window. Useful if you tell the php to send debugging infos...
function displayResponse (reply) {
win=window.open("","Results","width=250,height=300,status=1,resizable=1,scrollbars=1");
win.document.open();
win.document.write(reply);
win.document.close();
}

</script>

</head>

<body onload="init()">
<h1>Simple Ajax example</h1>

<strong>Please</strong> click on a fruit:

<ul>
<li>I like
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest(this)">
apples
</li>
<li>I like
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest(this)">
oranges
</li>

<li>I like
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest(this)">
bananas

</span>
</li>

</ul>

<hr>
Dialog history:

<table border id="table1">

<tr>

<th>Server replies</th>
</tr>

</table>

; PHP
<?php
error_reporting(E_ALL);
header ("Content-type: application/xml");
echo '<?xml version="1.0" encoding="ISO-8859-1" ?>';

if (array_key_exists('user_pref_fruit', $_POST))
{ $user_pref = $_POST['user_pref_fruit']; }
else
$user_pref="nothing";

echo "<answer>";
echo "Oh you like " . $user_pref . " !";
// echo "Oh you like " . $user_pref . " !" . " - Query String=" . $_SERVER["QUERY_STRING"];
echo "</answer>";

?>

== Software ==

=== JavaScript toolkits ===

;jQuery library
* [http://jquery.com jQuery homepage]
* [http://docs.jquery.com/Main_Page jQuery API]

;Dojo (free software)
* {{quotation | dojo is the Open Source Javascript toolkit that makes professional web development better, easier, and faster}} (retrieved 15:11, 9 February 2007 (MET))
* [http://dojotoolkit.org/ dojo toolkit homepage]
* Dojo manual: http://manual.dojotoolkit.org/WikiHome
* http://dojotoolkit.org/docs/rich_text.html

; Aculo (free software)
* {{quotation | script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.}} (retrieved 15:11, 9 February 2007 (MET))
* [http://script.aculo.us/ Aculo Home Page]
* [http://wiki.script.aculo.us/scriptaculous/show/Prototype Script.aculo.us documentation wiki]

; Prototype.js library
* [http://www.prototypejs.org/ Prototype] Home Page
* [http://prototype-window.xilinus.com/ Prototype window]
* {{quotation| This amazingly well thought and well written piece of standards-compliant code takes a lot of the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back.}} (retrieved 15:11, 9 February 2007 (MET))
* [http://www.sergiopereira.com/articles/prototype.js.html Unofficial Prototype documentation] by Sergio Pereira
* Amy Hoy's [http://slash7.com/cheats/scriptaculous_fx1.pdf Cheat Sheet]
* Jonathan Snook's [http://snook.ca/archives/javascript/prototype_disse/ Prototype Dissected]

== Links ==

* [http://en.wikipedia.org/wiki/Category:Ajax_%28programming%29 Category:Ajax (programming)] (Wikipedia) is a good starting point.

* [http://developer.apple.com/internet/webcontent/xmlhttpreq.html Dynamic HTML and XML: The XMLHttpRequest Object] - Apple Developer Connection, 2004
* [http://en.wikipedia.org/wiki/AJAX Ajax (programming)]. Ajax or Asynchronous JavaScript and XML is a term describing a web development technique for creating interactive web applications (Wikipedia Article, 2005)
* [http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html?cid=59754 Asynchronous JavaScript Technology and XML (AJAX)] With Java 2 Platform, Enterprise Edition (!), technical Sun Developer Network article, June 2005)
* [http://www.webforefront.com/archives/2005/05/ajax_demystifyi.html AJAX : Demystifying the buzz for all platforms.] @ Web Forefront Mai 2005. Short intro article
* [http://weblog.infoworld.com/article/05/10/17/42FEajaxcase_2.html Putting AJAX to work] InfoWorld article, (mostly a product overview)
* [http://ajax.sys-con.com/read/430978.htm Beyond AJAX and JavaServer Faces], AJAXWorld Magazine, sept 2007

== References ==

=== Technical how-to ===

* Vlad Kofman (2007), The Web 2.0 Movement Is Here. But What Does It Mean to You?, Developper.com Atricle, [http://www.developer.com/design/article.php/3658231 HTML]

[[Category: XML]]
[[Category: Rich internet applications]]
[[Category:JavaScript]]

AJAX - Revision history

Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

Daniel K. Schneider: 1 revision imported

edutechwiki_en>RobertoOrtelli: /* JavaScript toolkits */