Ajax with JSON On PHP

priyasetiawan — Wed, 22 Apr 2009 15:57:32 +0000

Ajax with JSON, just like Normal Ajax that with it, we can create the dynamic page with manipulation html for rendering in content, and of course we will using php for server side service . Maybe all of you know about using ajax with responseString. Now we can play responseString using json. JSON ? What it is? JSON (JavaScript Object Notation ) is subset of object literal notation of javascript [json.org]. JSON is a lightweight data-interchange format. We can create object with simple notation for example:

var Human = { head:"it's my head", body:"it's my body",
                      hand:{left:"it's my left hand", right:"it's my right hand" },
                      foot:{left:"it's my left foot", right:" it's my right foot"}}

If we have json string, we just using eval for create the instance of the object with json string provided before. Here the code

var Human = eval("head:"it's my head", body:"it's my body",
                           hand:{left:"it's my left hand", right:"it's my right hand" },
                           foot:{left:"it's my left foot", right:" it's my right foot"}}");

Now you have one Object call Human that have several variable inside the Human Object. This JSON format is easy to use for developer if want to send object string from the server. Ok ! Now we start to create php code for the sample of server code for generating the json string like example above. If just simple json string like above we can create by own, but if the code too complicated, so we need external code for generating the JSON and the answer is Services_JSON PHP Class created by Michal Migurski, Matt Knapp, and Brett Stimmerman. You can download the class from PHP PEAR or you can download manually on this [link].

filename : service.php

include_once("Services_JSON.php");
$Human = array("head"=>"it is my head","body"=>"it is my body");

$JSON =& new Services_JSON();
$JSONstr = $JSON->encode($Human);

header("Content-type:text/plain");
echo "{servObj:$JSONstr}";
?>

If we want to create variable on object , in php we create association array first. If we create index array then in json will become index array too. With the code php above , we can send back the json object string with variable servObj ( have human object inside) to client browser.

Now we will create simple javascript for ajax and request server.

filename : xmlhttp.js
var Human = {head:"where are your head?",body:"where are your body?"};
function XMLHTTPRequest(){
    var req;
    this.init = function(){
 	// Native
 	if (window.XMLHttpRequest) {
            try {
                req = new XMLHttpRequest();
            } catch(e) {
                req = false;
            }

        }
 	// IE
 	else if (window.ActiveXObject) {
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {
                    req = false;
                }
            }
        }
 	return req;
  }

  this.CreateGETRequest = function(url){
        req = this.init();
        if (req) {
            req.onreadystatechange = stateChange;
            req.open("GET", url, true);
            req.send(null);
        }
  }

  var stateChange = function(){
      if (req.readyState == 4) {
         if (req.status == 200) {
            eval('response = ' + req.responseText);
            getHumanObject(response.servObj);      

         } else {}
      }
  }

}

function requestHumanObject(){
  var xmlhttp = new XMLHTTPRequest();
  xmlhttp.CreateGETRequest('service.php');
}

function getHumanObject(human){
  if (human){
    alert("human said: "+human.head+" and "+human.body);
  }
}

From code javascript above , we send request to server using function getHumanObject and then we will recieve it and save on global variable Human. And Now we create the html page that consist of 2 button.

filename: index.html

priyasetiawan.wordpress.com

Ajax with JSON On PHP