Simple Ajax-PHP File Browser using PHP and YUI.

This example is to show how you will create a simple file browser in PHP, and get it working with YUI.  Once you deploy it inside your web server it should look like this.

Simple-File-Browser SnapShot

Download Simple Ajax-PHP File Browser here.

Asynchronous Javascript + XML

Ajax or Asynchronous Javascript + XML started with Jesse James Garrett penning an online article on usage of XHR aka XMLHttpRequest object in 2005. Idea behind Ajax was to give user data/page updates without refreshing the page. By Doing so Ajax made static boring HTML pages to be highly interactive and exciting. Later on developers and designers around the world came up with enhanced use cases and patterns for using Ajax. Prior to XHR object ajax kind of functionality was being achieved using lot many hacks, mostly involving hidden frames or iframes, Java Applets and Flash movie. XHR introduced streamlined interface for making server requests and evaluating responses. Despite having XML in it’s name Ajax is format-agnostic; the technique basically is about retrieving data from server without refreshing page.

Microsoft first introducing this functionality in IE5, later an other browsers started implementing and Ajax was the buzz word in late 2005 and early 2006. IE browsers before IE 7 needed using one of MSXML2.XMLHttp ,  MSXML2.XMLHttp.3.0 , and MXSML2.XMLHttp.6.0 to be used in order to create XHR object, code for creating XHR object in browser < IE 7 looks like this.

function createXHR(){

    if(typeof arguments.callee.activeString != "string"){

        var versions = ["MXSML2.XMLHttp.6.0", "MXSML2.XMLHttp.3.0","MXSML2.XMLHttp"];

        for(var i=0, len = versions.length; i<len;i++ ){

            try{

                var xhr = new ActiveXObject(versions[i]);

                arguments.callee.activeXString = versions[i];

                return xhr;

            }catch (ex){

                //skip

            }

        }

    }

    return new ActiveXObject (arguments.callee.activeXString);

}

IE 7, Firefox, Opera, Chrome and Safari all support a native XHR object that can be created using,

var xhr = new XMLHttpRequest();

if you need to support you first check for XMLHttpRequest support, if supported return that object else continue with above mentioned function.

XHR object usage looks like this.

var xhr = new XMLHttpRequest();

xhr.open("get","yourdata.php", false); // arguments in order HTTP method, url, asynchronous true/false;

xhr.send(null)

if you pass third argument asynchronous as false, you are making and synchronous server call, javascript execution wait till server respond with result. when the response is received XHR object will have result assigned to it’s properties as follows:

responseText – Text in body of the response
responseXML -  Contains XML DOM document with response data if the response has content type set to "text/xml" or "application/xml"
status – HTTP status of the request
statusText – Description of HTTP status.

Where are setting third argument asynchronous as true will allow you to make asynchronous call, which doesn’t halt javascript execution till the request is completed. but you need to check readyStage of XHR object to track status of the request, readyState can have following possible values

0 – Un-initialized
1 – Initialized but not called send()
2 – Sent, send() called
3 – Receiving, partial response is received
4 – Complete, received complete response

whenever ready state changes from one to another readystatechange event gets fired, adding a listener/function to this event will let you track status of the XHR request.

// ready state tracked code looks like this

var xhr = createXHR();       

xhr.onreadystatechange = function(){

    if (xhr.readyState == 4){

        if ((xhr.status  > = 200  &  &  xhr.status  <  300) || xhr.status == 304){

            alert(xhr.responseText);

        } else {

            alert(“Request was unsuccessful: “ + xhr.status);

        }

    }

};

xhr.open(“get”, “example.txt”, true);

xhr.send(null);  ((

// you can cancel an asynchronous request by using xhr.abort();