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

 

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;
}

 


 

6. XML is …

 

Extensible Markup Language

 

<?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>

 


 

7. JSON is …

 

JavaScript Object Notation

 

var json = {
    "a":[
        "a1",
        "a2"
    ],
    "b":["b1"],
    "c":"c1",
    "d":{"d1":"JSON text"}
};

 


 

8. PHP and Json

 

@since PHP 5.2.0

 

JSON Functions

 


 

9. Example

 

@see XMLHttpRequest.js

@see history.js

@see history.html

 

<?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;
}
?>

  

<!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>

 


 

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

 

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];
        }
    }
}

 

@html history.html

 

<!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>

 

to be continue …

 


 

Posted in Ajax | Tagged | Leave a comment