Nature of Ajax

1. Ajax is …

 

Asynchronous JavaScript and XML

 


 

2. Defined by ?

 

Jesse James Garrett

 


 

3. Group of Technologies !

 

HTML / XHTML + CSS

DOM

Plain Text, XML, JSON …

XMLHttpRequest

JavaScript, VBScript …

PHP, JSP, ASP, Ruby …

 


 

4. DOM is …

 

Document Object Model

 

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 …

 

Extensible Markup Language

 

[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&#211;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 …

 

JavaScript Object Notation

 

[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

 

JSON Functions

 


 

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&amp;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&amp;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&amp;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

 

@javascript history.js

 

[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]

 

@html history.html

 

[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 …

 


 

Posted in Ajax | Tagged | Leave a comment