1. Ajax is …
Asynchronous JavaScript and XML
2. Defined by ?
3. Group of Technologies !
HTML / XHTML + CSS
DOM
Plain Text, XML, JSON …
XMLHttpRequest
JavaScript, VBScript …
PHP, JSP, ASP, Ruby …
4. DOM is …
var value = document.getElementById("some_id").value;
5. XMLHttpRequest is …
API between browsers’ scripting languages (JavaScript, VBScript …) and web servers
[codesyntax lang=”javascript”]
function getXMLHttpRequest()
{
var xmlhttp = false;
if (typeof XMLHttpRequest != "undefined") {
//FireFox Mozillar Opera Safari IE7 IE8
xmlhttp = new XMLHttpRequest();
//For Mozillar Bugs
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else {
//IE 5.x-6.x:
//Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.4.0"); } catch (e) {}
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
if (!xmlhttp) {
throw new Error("This browser does not support XMLHttpRequest.");
}
};
return xmlhttp;
}
[/codesyntax]
6. XML is …
[codesyntax lang=”xml”]
<?xml version='1.0' standalone='yes'?>
<movies>
<body>
<title>PHP: Behind the Parser</title>
<characters>
<character>
<name>Ms. Coder</name>
<actor>Onlivia Actora</actor>
</character>
<character>
<name>Mr. Coder</name>
<actor>El ActÓr</actor>
</character>
</characters>
<plot>
So, this language. It's like, a programming language. Or is it a scripting language? All is revealed in this thrilling horror spoof of a documentary.
</plot>
<great-lines>
<line>PHP solves all my web problems</line>
</great-lines>
<rating type="thumbs">7</rating>
<rating type="stars">5</rating>
</movie>
</movies>
[/codesyntax]
7. JSON is …
[codesyntax lang=”javascript”]
var json = {
"a":[
"a1",
"a2"
],
"b":["b1"],
"c":"c1",
"d":{"d1":"JSON text"}
};
[/codesyntax]
8. PHP and Json
@since PHP 5.2.0
9. Example
@see XMLHttpRequest.js
@see history.js
@see history.html
[codesyntax lang=”php”]
<?php
switch ($_GET['dataFormat']) {
case 'plain':
echo 'Time is now :' . time();
die;
case 'XML':
$xml = <<<XML
<?xml version="1.0" encoding="utf-8"?>
<nodes>
<node>
<text_one>
This is XML text 1
</text_one>
<text_two>
This is XML text 2
</text_two>
</node>
</nodes>
XML;
echo $xml;
die;
case 'JSON':
$json = array (
'a' => array('a1', 'a2'),
'b' => array('b1'),
'c' => 'c1',
'd' => array(
'd1' => 'JSON text'
)
);
// {"a":["a1","a2"],"b":["b1"],"c":"c1","d":{"d1":"JSON text"}}
echo json_encode($json);
die;
default:
break;
}
?>
[/codesyntax]
[codesyntax lang=”html4strict”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="XMLHttpRequest.js" type="text/javascript"></script>
<script src="history.js" type="text/javascript"></script>
<script type="text/javascript">
function getPlainText() {
try {
var xmlhttp = getXMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// finished ?
if (xmlhttp.readyState == 4) {
// successful ?
if (xmlhttp.status == 200) {
document.getElementById("ajax_id").innerHTML = xmlhttp.responseText;
saveHistory();
}
}
}
xmlhttp.open("GET", "index.php?dataFormat=plain&t=" + ((new Date()).valueOf()), true);
xmlhttp.send(null);
} catch (ex) { }
}
function getXMLText() {
try {
var xmlhttp = getXMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// finished ?
if (xmlhttp.readyState == 4) {
// successful ?
if (xmlhttp.status == 200) {
// all nodes
var responseXML = xmlhttp.responseXML;
// for ie 5.x-6.x
if (!responseXML.documentElement && xmlhttp.responseStream) {
responseXML.load(xmlhttp.responseStream);
}
// get nodes
nodes = responseXML.documentElement;
// find data
var text = nodes.getElementsByTagName('text_one')[0].firstChild.data;
document.getElementById("ajax_id").innerHTML = text;
saveHistory();
}
}
}
xmlhttp.open("GET", "index.php?dataFormat=XML&t=" + ((new Date()).valueOf()), true);
xmlhttp.send(null);
} catch (ex) { }
}
function getJSONText() {
try {
var xmlhttp = getXMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// finished ?
if (xmlhttp.readyState == 4) {
// successful ?
if (xmlhttp.status == 200) {
var responseJSON = eval('(' + xmlhttp.responseText + ')');
document.getElementById("ajax_id").innerHTML = responseJSON.d['d1'];
saveHistory();
}
}
}
xmlhttp.open("GET", "index.php?dataFormat=JSON&t=" + ((new Date()).valueOf()), true);
xmlhttp.send(null);
} catch (ex) { }
}
</script>
</head>
<body>
<div id="ajax_id">
<p>
<h1>Here is an ajax test</h1>
</p>
</div>
<p>
<a href="javascript:;" onclick="getPlainText();">Ajax get plain text</a>
</p>
<p>
<a href="javascript:;" onclick="getXMLText();">Ajax get XML text</a>
</p>
<p>
<a href="javascript:;" onclick="getJSONText();">Ajax get JSON text</a>
</p>
<p>
<iframe id="history" src="history.html?0"></iframe>
</p>
</body>
</html>
[/codesyntax]
10. Skills
(1) To avoid caching:
xmlhttp.open("GET", "server_script?t=" + ((new Date()).valueOf()), true);
(2) To make Backward / Forward button works
[codesyntax lang=”javascript”]
var h_list = new Array(10);
var h_index = 0;
function saveHistory()
{
if (document.getElementById('history')) {
if (h_index == 9) {
h_index = 0;
} else {
h_index++;
}
h_list[h_index] = document.getElementById('ajax_id').innerHTML;
document.getElementById('history').src = 'history.html?' + h_index;
}
}
function getHisStory(curIndex)
{
if (curIndex != h_index) {
if (h_list[curIndex]) {
h_index = curIndex;
document.getElementById('ajax_id').innerHTML = h_list[curIndex];
}
}
}
[/codesyntax]
[codesyntax lang=”html4strict”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h1>history</h1>
<script type="text/javascript">
var url = window.location.href;
if (url.indexOf('?') > -1) {
parent.getHisStory(url.substr(url.indexOf('?') + 1));
document.write(window.location.search.substr(1));
}
</script>
</body>
</html>
[/codesyntax]
to be continue …