Sunday, July 27, 2008
Thursday, October 04, 2007
Sunday, January 28, 2007
Apollo on Techcrunch
Techcrunch has just published a great post on Apollo [ by Ryan Stewart ]. Dont forget to go through the comments. Its evident that commenters ,just like the dev community,are concerned about security.
Digg the story here.
Desktop 3.0 is here kiddies![and its here to stay!]
Digg the story here.
Desktop 3.0 is here kiddies![and its here to stay!]
Monday, January 01, 2007
Ajax Quick start tutorial II -Handling xml response
This is supposed to be a follow up tutorial for the first Ajax Quick start tutorial.
Purpose:
In the first quick start[link], all we did was replace a div with plaintext content[if you noticed it,those html tags where internally treated as a plain string] from external html file.In this version, we will see how to receive xml response from server side script[PHP], and how to parse through the XML data in client side Javascript.
Scenario:
Depending on the variable passed, php file will generate an xml response. In this case, city name and population of a city in California is passed to PHP.The xml response from server is fetched into client through an Ajax call, which is then parsed to dig out city name and population values.
Explanation:
Everything is just the same as in first example except:
<California>
<County population="50000">La Mirada</County>
</California>
Here La Mirada is the nodevalue of County tag
and 50000 is the population attribute of County tag
In the code, this is depicted by the following code:
docx.getElementsByTagName('County')[0].firstChild.nodeValue; -->shows how to extract the nodevalue
docx.getElementsByTagName('County')[0].getAttribute("population"); -->shows how to extract attribute value
The explanation of Ajax portion of example is same as that in the first Ajax Quick start example. Feel free to take a look at it.
You can download the companion file here.To see this in action, all you have to do is unzip the content into a folder in your server, enabled with PHP.
[On a lighter note, all aspects in this tutorial are not fully thought of!If you find something misleading, feel free to post it in the comments .]
Code follows: [or else just download the companion file]
client.html
<html>
<head>
<script>
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML="loading..";
}
if (xmlhttp.readyState == 4) {
var docx=xmlhttp.responseXML;
document.getElementById('cityname').innerHTML=docx.getElementsByTagName('County')[0].firstChild.nodeValue;
document.getElementById('population').innerHTML=docx.getElementsByTagName('County')[0].getAttribute("population");
}
}
</script>
</head>
<body>
<a href='javascript:requestContent("citylist.php?city=La Mirada&population=50000");'>city 1</a> <a href='javascript:requestContent("citylist.php?city=Irwindale&population=2000");'>city 2</a>
<div id="cityname">City name</div>
<div id="population">Population</div>
</body>
</html>
citylist.php
<?php
$city=$_GET['city'];
$population=$_GET['population'];
header('Content-Type: text/xml');
$return_value ='<California><County population="'.$population.'">'.$city.'</County></California>';
echo $return_value;
die();
?>
Purpose:
In the first quick start[link], all we did was replace a div with plaintext content[if you noticed it,those html tags where internally treated as a plain string] from external html file.In this version, we will see how to receive xml response from server side script[PHP], and how to parse through the XML data in client side Javascript.
Scenario:
Depending on the variable passed, php file will generate an xml response. In this case, city name and population of a city in California is passed to PHP.The xml response from server is fetched into client through an Ajax call, which is then parsed to dig out city name and population values.
Explanation:
Everything is just the same as in first example except:
- Now we use responseXML instead of responseText, so that javascript handles the response as an XML Object instead of just a plain string
- Once xml response is recieved, its parsed through to extract data.
The example shows two most important tasks of an xml parser.Extract nodevalues, and attribute values.
<California>
<County population="50000">La Mirada</County>
</California>
Here La Mirada is the nodevalue of County tag
and 50000 is the population attribute of County tag
In the code, this is depicted by the following code:
docx.getElementsByTagName('County')[0].firstChild.nodeValue; -->shows how to extract the nodevalue
docx.getElementsByTagName('County')[0].getAttribute("population"); -->shows how to extract attribute value
The explanation of Ajax portion of example is same as that in the first Ajax Quick start example. Feel free to take a look at it.
You can download the companion file here.To see this in action, all you have to do is unzip the content into a folder in your server, enabled with PHP.
[On a lighter note, all aspects in this tutorial are not fully thought of!If you find something misleading, feel free to post it in the comments .]
Code follows: [or else just download the companion file]
client.html
<html>
<head>
<script>
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML="loading..";
}
if (xmlhttp.readyState == 4) {
var docx=xmlhttp.responseXML;
document.getElementById('cityname').innerHTML=docx.getElementsByTagName('County')[0].firstChild.nodeValue;
document.getElementById('population').innerHTML=docx.getElementsByTagName('County')[0].getAttribute("population");
}
}
</script>
</head>
<body>
<a href='javascript:requestContent("citylist.php?city=La Mirada&population=50000");'>city 1</a> <a href='javascript:requestContent("citylist.php?city=Irwindale&population=2000");'>city 2</a>
<div id="cityname">City name</div>
<div id="population">Population</div>
</body>
</html>
citylist.php
<?php
$city=$_GET['city'];
$population=$_GET['population'];
header('Content-Type: text/xml');
$return_value ='<California><County population="'.$population.'">'.$city.'</County></California>';
echo $return_value;
die();
?>
Friday, November 17, 2006
Not your usual Flex
Got bored of the usual Flexy look of Flex applications? Take a look at these:
Noise monitoring system for Amsterdam Airport Schiphol [ via ]
Belgacom TV [via]
Kuler[via]
Cool huh?
Noise monitoring system for Amsterdam Airport Schiphol [ via ]
Belgacom TV [via]
Kuler[via]
Cool huh?
Saturday, November 11, 2006
Ajax Quickstart -explained
For those who need further explanation of the Ajax quickstart tutorial,[which was meant to be just a simple indroduction to Ajax] here it is.
[This is a follow up for the original article here. If you havent seen it, try it before reading this.]
You can download the companion files here.
Unzip and open up Home.html in an editor.
Basically, all that the code does is , fetch content of an external html file and relpace the content of a div with this new content fetched.In real world scenario, this can be content from an xml file, or a response from a web service,or something like that.Right now, in our example , to keep things simple all we do is, fetch content of an external html file and replace the content of a div with this external content, asynchronously, through an Ajax call.
Take a look at the code between the body tags.See the div with an id, "content" ? This is the div that will act as a container for the external content.See those links with a javascript call? Those are the links which, when clicked , initiate the Ajax call and other related tasks.
Before we dive into the explanation, there is something, very basic,that you need to understand.
document.getElementById(id)
A call like that in javascript, returns a reference to an object[or simply a tag], with the specified id.
document.getElementById(id).innerhtml
This refers to the content inside the tag ,with the specified id.
This is not a read only method,which means that, the call can be used to replace existing values.ie., assigning a value to document.getElementById(id).innerhtml will rewrite the content in that element.
Consider a div as follows:
<div>This is the content inside the div</div>
Calling document.getElementById("myid").innerhtml ,will return , "This is the content inside the div".
If you assign a value as follows, the content of div will be replaced with the new value assigned.
document.getElementById("myid").innerhtml="new content to be filled";
With that in mind, lets get into the Ajax part.
Ajax helps you communicate with server in an asynchronous manner. Which in loose language means that, Ajax helps you load external content into your page , without a page reload.
To start an asynchronous communication with server[ which means, start an Ajax call], you need to first create an XMLHttpRequest object. Lets see how this can be done.
Different browsers use different ways of creating an XMLHttpRequest object.
For Mozilla, and other Gecko browsers, this is done as follows:
new XMLHttpRequest();
For Internet Explorer:
new ActiveXObject("Microsoft.XMLHTTP");
In our example, this is done when the page loads for the first time, using the following code:
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();//for firefox
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE.
}
Now that we have created the XMLHttpRequest object, we can establish a connection with the server,using the open method of XMLHttpRequest object.
The open method takes 5 parameters.
open(type, url, async, username,password)
type[string] refers to the type of connectoin . In our case, we use GET. Other possible options include, POST, PUT, PROPFIND.
url[string], refers to the url to which the request goes.
async is a boolean value which states if we want the call to be asynchronous. By default, its TRUE, which means asynchronous.
username and password refers to the authentication info , you need , in case the site accessing requires authentication.
In our example, we just pass in the three necessary arguments.
Once we open a connection , we need to send the request to server. This can be done using send method.
send(content_if_any);
if you have no content to send, just use null.
[onreadystatechange will be explained shortly]
Summing up, the following code, does all this task in our example:
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
xmlhttp is the variable to which we have assigned the XMLHttpRequest object in our example.
In our case, we have kept url as an argument, so that we can make mutiple calls easily.
So , we have opened and sent an Ajax request to server. How do we handle the response from server?
One of the coolest thing about XMLHttpRequest object is that, it can automatically notify us of the current status of our request to server.To make use of this feature, all we need to do is call onreadystatechange method of XMLHttpRequest object and assign it to a function. This function will be called everytime, the status of the request changes.
So what is status?
Status, simply refers to the state of our request, whether the request is being executed, or is it finished etc. etc. .This will help you show a "loading" message , while the content is being fetched from server.
Basically, what happens is that, depending on the status of request, the readyState value of XMLHttpRequest is dynamically changed.
In our example, statusListener is a simple function which will be called automagically ,every time readyState value of XMLHttpRequest changes. Inside statusListener, we check the value of readyState. The possible values are as follows:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
[from Apple's article]
So, inside statusListener ,if readyState is 1, we assign the div with a string "loading...", which tells the end user that , some activity is going on.
When it becomes 4, we can confirm that, the request is finished successfully.At that point, we are ready to show the response from server.
The response from server is available by calling responseText value of XMLHttpRequest object.
In our example xmlhttp.responseText refers to the content of the html file , we requested.
In real world scenario, if you requested an xml file, you may have to parse through the response, before using the data.
So that concludes the exaplanation of the example i posted earlier. Hope that helps. Feel free to drop a comment on what you think.
Thanks !
[This is a follow up for the original article here. If you havent seen it, try it before reading this.]
You can download the companion files here.
Unzip and open up Home.html in an editor.
Basically, all that the code does is , fetch content of an external html file and relpace the content of a div with this new content fetched.In real world scenario, this can be content from an xml file, or a response from a web service,or something like that.Right now, in our example , to keep things simple all we do is, fetch content of an external html file and replace the content of a div with this external content, asynchronously, through an Ajax call.
Take a look at the code between the body tags.See the div with an id, "content" ? This is the div that will act as a container for the external content.See those links with a javascript call? Those are the links which, when clicked , initiate the Ajax call and other related tasks.
Before we dive into the explanation, there is something, very basic,that you need to understand.
document.getElementById(id)
A call like that in javascript, returns a reference to an object[or simply a tag], with the specified id.
document.getElementById(id).innerhtml
This refers to the content inside the tag ,with the specified id.
This is not a read only method,which means that, the call can be used to replace existing values.ie., assigning a value to document.getElementById(id).innerhtml will rewrite the content in that element.
Consider a div as follows:
<div>This is the content inside the div</div>
Calling document.getElementById("myid").innerhtml ,will return , "This is the content inside the div".
If you assign a value as follows, the content of div will be replaced with the new value assigned.
document.getElementById("myid").innerhtml="new content to be filled";
With that in mind, lets get into the Ajax part.
Ajax helps you communicate with server in an asynchronous manner. Which in loose language means that, Ajax helps you load external content into your page , without a page reload.
To start an asynchronous communication with server[ which means, start an Ajax call], you need to first create an XMLHttpRequest object. Lets see how this can be done.
Different browsers use different ways of creating an XMLHttpRequest object.
For Mozilla, and other Gecko browsers, this is done as follows:
new XMLHttpRequest();
For Internet Explorer:
new ActiveXObject("Microsoft.XMLHTTP");
In our example, this is done when the page loads for the first time, using the following code:
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();//for firefox
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE.
}
Now that we have created the XMLHttpRequest object, we can establish a connection with the server,using the open method of XMLHttpRequest object.
The open method takes 5 parameters.
open(type, url, async, username,password)
type[string] refers to the type of connectoin . In our case, we use GET. Other possible options include, POST, PUT, PROPFIND.
url[string], refers to the url to which the request goes.
async is a boolean value which states if we want the call to be asynchronous. By default, its TRUE, which means asynchronous.
username and password refers to the authentication info , you need , in case the site accessing requires authentication.
In our example, we just pass in the three necessary arguments.
Once we open a connection , we need to send the request to server. This can be done using send method.
send(content_if_any);
if you have no content to send, just use null.
[onreadystatechange will be explained shortly]
Summing up, the following code, does all this task in our example:
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
xmlhttp is the variable to which we have assigned the XMLHttpRequest object in our example.
In our case, we have kept url as an argument, so that we can make mutiple calls easily.
So , we have opened and sent an Ajax request to server. How do we handle the response from server?
One of the coolest thing about XMLHttpRequest object is that, it can automatically notify us of the current status of our request to server.To make use of this feature, all we need to do is call onreadystatechange method of XMLHttpRequest object and assign it to a function. This function will be called everytime, the status of the request changes.
So what is status?
Status, simply refers to the state of our request, whether the request is being executed, or is it finished etc. etc. .This will help you show a "loading" message , while the content is being fetched from server.
Basically, what happens is that, depending on the status of request, the readyState value of XMLHttpRequest is dynamically changed.
In our example, statusListener is a simple function which will be called automagically ,every time readyState value of XMLHttpRequest changes. Inside statusListener, we check the value of readyState. The possible values are as follows:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
[from Apple's article]
So, inside statusListener ,if readyState is 1, we assign the div with a string "loading...", which tells the end user that , some activity is going on.
When it becomes 4, we can confirm that, the request is finished successfully.At that point, we are ready to show the response from server.
The response from server is available by calling responseText value of XMLHttpRequest object.
In our example xmlhttp.responseText refers to the content of the html file , we requested.
In real world scenario, if you requested an xml file, you may have to parse through the response, before using the data.
So that concludes the exaplanation of the example i posted earlier. Hope that helps. Feel free to drop a comment on what you think.
Thanks !
Friday, October 27, 2006
Ajax Quickstart tutorial
Personally, when i start learning something new, i would usually just skip the text and read the code first.
So in this tutorial, im gonna put the code first. For most of you , this would be more than enough . The purpose of this tutorial is to make you 'Ajax aware' in the least possible steps. And here we go.
End result: fetch content from external docment, and update the existing document without reload[without reload! thts the keyword]
<html>
<head>
<script>
//create a XMLHttpRequest Object.
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//call this function with url of document to open as attribute
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
//statusListener function is called automatically whenever readystate value of XMLHttpRequest Object changes.
//see xmlhttp.onreadystatechange =statusListener; statement above.
//When readystate is 1, its a loading state.
//When readystate is 4, content is loaded
function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML="loading..";
}
if (xmlhttp.readyState == 4) {
//xmlhttp.responseText is the content of document requested
document.getElementById('content').innerHTML=xmlhttp.responseText;
}
}
</script>
</head>
<body>
<a href='javascript:requestContent("1.html");'>1.html</a> <a href='javascript:requestContent("2.html");'>2.html</a>
<div id="content">This text will be replaced by external content without reload</div>
</body>
</html>
Explanation:
The whole Ajax thing starts with the creation of an instance of XMLHttpRequest object.
For firefox,new XMLHttpRequest(); will create one, and for IE,new ActiveXObject("Microsoft.XMLHTTP");
The stuff in requestContent function does the job of initiating the call, and listening to progress.
statusListener function is called whenever onreadystatechange value of Object changes. When its is 4, ie. xmlhttp.readyState == 4, the loading is finished.
Use document.getElementById to replace a divs content with the new content.
update: If you need further detailed explanation , feel free to take a look at this post.
This code was originally written somewhere in mid-2005, based on the famous Ajax tutorial in Apple Developer Connection.In real world scenario, instead of a plain file[as in this example], you will be calling a server side script that returns xml formatted data[After all, thats the X in Ajax is!],which should be parsed through.This is described in the second version of this tutorial[another quick one ;) ].
Download example zip [If the link is not working, just leave a comment.]
Apple developer Connection article.
So in this tutorial, im gonna put the code first. For most of you , this would be more than enough . The purpose of this tutorial is to make you 'Ajax aware' in the least possible steps. And here we go.
End result: fetch content from external docment, and update the existing document without reload[without reload! thts the keyword]
<html>
<head>
<script>
//create a XMLHttpRequest Object.
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//call this function with url of document to open as attribute
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
//statusListener function is called automatically whenever readystate value of XMLHttpRequest Object changes.
//see xmlhttp.onreadystatechange =statusListener; statement above.
//When readystate is 1, its a loading state.
//When readystate is 4, content is loaded
function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML="loading..";
}
if (xmlhttp.readyState == 4) {
//xmlhttp.responseText is the content of document requested
document.getElementById('content').innerHTML=xmlhttp.responseText;
}
}
</script>
</head>
<body>
<a href='javascript:requestContent("1.html");'>1.html</a> <a href='javascript:requestContent("2.html");'>2.html</a>
<div id="content">This text will be replaced by external content without reload</div>
</body>
</html>
Explanation:
The whole Ajax thing starts with the creation of an instance of XMLHttpRequest object.
For firefox,new XMLHttpRequest(); will create one, and for IE,new ActiveXObject("Microsoft.XMLHTTP");
The stuff in requestContent function does the job of initiating the call, and listening to progress.
statusListener function is called whenever onreadystatechange value of Object changes. When its is 4, ie. xmlhttp.readyState == 4, the loading is finished.
Use document.getElementById to replace a divs content with the new content.
update: If you need further detailed explanation , feel free to take a look at this post.
This code was originally written somewhere in mid-2005, based on the famous Ajax tutorial in Apple Developer Connection.In real world scenario, instead of a plain file[as in this example], you will be calling a server side script that returns xml formatted data[After all, thats the X in Ajax is!],which should be parsed through.This is described in the second version of this tutorial[another quick one ;) ].
Download example zip [If the link is not working, just leave a comment.]
Apple developer Connection article.
Subscribe to:
Posts (Atom)
