Let me point out why i have switched over to Mate over Cairngorm

1. You can dispatch an event from anywhere in the view hierarchy and have it bubble up to the framework automatically, instead of having to have a direct line, like Cairngorms CairngormEventDispatcher or PureMVC’s notification system.

2. Mate is extremely light and readable, being a Flex framework which is built on the Event Map idea. This is a collation of handlers that can respond to all the incoming events and complete several actions that are appropriate for the target.

3. By using the Mate framework, you will need no more the Singletons. I have seen a quite a few people using Singleton pattern, when it is actually not needed in the application. Now Mate completely removes it, which actually makes development further easier.

4. Mate also uses a form of dependency injection (leveraging bindings) that makes it possible to connect your models to your views without either one knowing about the other. This is probably the most powerful feature of the framework.

5. The RIA development is most certainly more interesting and flexible with Mate.

My View on Cairngorm

Cairngorm is a bundle of anti-patterns that lead to applications that are tightly coupled to global variables.

Let me explain you the flow on how Mate really goes, its so easy and interesting like RajiniKanth sir Movie.

This tutorial explains how to get started with Mate. As an example, we’ll be sending two numbers to our manager class to add , receives the total value and stores it in the model for the view to show.

All Mate projects must have:

1. One or more events (custom or built-in)
2. One or more Event Maps

Let us go step by step

Create a new Flex project named AdditionExample. In the libs folder it creates, place the compiled framework SWC (Mate.swc). This will let you use all Mate classes and tags.Create a folder structure as displayed in the image below, i will explain you how the entire flow goes.

The custom event

Every Mate project is driven by events. In our example, when user enters two values and clicks on the Add button, we’ll create a new event containing that information that will be sent to the manager class to perform the addiiton. For this purpose, we create a custom event to indicate that the user wants to submit the data and retrieve the total.

Our event will be very simple and it will contain two property: the number1 and number2.

package com.vinoth.example.events
{
import flash.events.Event;

public class AdditionEvent extends Event
{
public static const GET: String = “getQuoteEvent”;

public var number1 : Number;
public var number2 : Number;

public function AdditionEvent(type:String, bubbles:Boolean=true,        cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}

}
}

The code above assumes this event is contained within the package: com.vinoth.example.events

The event also contains a constant that we will use to specify the event type. One event can specify more than one event type. We also make this event bubble up by default (the second argument of the constructor). Otherwise, we will need to remember to specify it when we instantiate it.

The View

The user interface will only need two text input and a button.

Dispatching the Custom Event

When the user clicks the Add button, we’ll create the AdditionEvent and dispatch it:

package com.vinoth.example.events
{
import flash.events.Event;

public class AdditionEvent extends Event
{
public static const GET: String = “getQuoteEvent”;

public var number1 : Number;
public var number2 : Number;

public function AdditionEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}

}
}

The Event Map

EventMap is a place where the we place all the handlers for the events which the application creates. There are be n number of event map. Now let me put down before you on how to create an event map.

We need to create a MXML file with name”MainEventMap”. This MXML component must extend from EventMap.

<?xml version="1.0" encoding="utf-8"?>
<EventMap
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://mate.asfusion.com/">

</EventMap>

This is how your blank event map file will look like. We’ll add the event map to our main Application file.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
xmlns:maps=”com.vinoth.example.maps.*”
>

<!– Styles______________________________________________________ –>

<mx:Style source=”/assets/styles/main.css”/>

<!– Event Maps __________________________________________________ –>

<maps:MainEventMap />

</mx:Application>

Now here a question might rise, how could i know whether my event map is receiving the events being dispatched.

<Debugger level="{Debugger.ALL}" />

This Tag does come handy and helps you in debugging whether you are going on the right way. Adding this to the event map looks like this.

<?xml version="1.0" encoding="utf-8"?>
<EventMap
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://mate.asfusion.com/">

<Debugger level="{Debugger.ALL}" />

</EventMap>

Listening for AdditionEvent.GET

In our event map, we will listen for the addition event so that we can send the request to the manager class. We’ll add EventHandlers tag which will specify what event type we are listening too.

<EventHandlers type="{AdditionEvent.GET}" debug="true">

</EventHandlers>

At the top of the event map we’ll need to import the event class.

<mx:Script>
<![CDATA[
import com.vinoth.example.events.AdditionEvent
]]>
</mx:Script>

Inside this EventHandlers block, we’ll place the actions we want to perform when the event is dispatched. In our example we will call the method addValues in the AddManager Class.

<EventHandlers type=”{AdditionEvent.GET}” debug=”true”>
<MethodInvoker generator=”{AddManager}”
method=”addValues” arguments=”{[event.number1,event.number2]}”/>
</EventHandlers>

We are calling the method addValues on that service and sending the values coming from the event as an argument.

Creating our Business, the AddManager

package com.vinoth.example.business
{
import mx.controls.Alert;

public class AddManager
{

[Bindable]
public var totalValue:Number;

// ——————————————–
public function addValues(number1:Number,number2:Number):void {
totalValue = number1+number2;

}

}
}

In this Class we are getting the two numbers as arguments from the event class which dispatches and then we are doing our calculation. Once the value is calculated, we will inject the result in our view.

<Injectors target=”{YourViewPanel}”>
<PropertyInjector targetKey=”value” source=”{AddManager}” sourceKey=”totalValue” />
</Injectors>

This makes life simple, here we get the final result. You can have a look at the application and view source is enabled.

Application

The XML HTTP Request object is used to make HTTP requests. I realised the power of the XML HTTP Request when gmail.com was lanuched. Its actually a dream come true. Why is this much spoken?

1. You can update a page without reloading the entire page.
2. You can send data to server in background.
3. You can request and receive data from server after the page has loaded.

Let us go in depth which will give you a broader idea.

Creating the Object

Its a sort of pain for developers, but you need to get it going as browsers do vary their style in creating the object. In Internet Explorer, We create the object using new ActiveXObject(“Msxml2.XMLHTTP”) or new ActiveXObject(“Microsoft.XMLHTTP”) depending upon the version of MSXML installed.

In Mozilla and Safari you use new XMLHttpRequest() IceBrowser uses yet another method the window.createRequest() method.

var httpReqObject=false;

try {
httpReqObject= new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
httpReqObject= new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (E) {
httpReqObject= false;
}
}

if (!httpReqObject&& typeof XMLHttpRequest!=’undefined’) {
try {
httpReqObject= new XMLHttpRequest();
} catch (e) {
httpReqObject=false;
}
}

if (!httpReqObject&& window.createRequest) {
try {
httpReqObject= window.createRequest();
} catch (e) {
httpReqObject=false;
}
}

We initially set the xmlhttp variable to false, If the browser Object is not being created, then it throws the appropriate error message while setting the variable to false. The Above script does for all the browsers.

Now let us see how to make a Request?

Now that you have the HTTP request object in hand, let us tell the object on what request which url you want to. A function should be called as when the request is made, and what information you want to send along in the body of the request.

// The Type of request you send and the corresponding url.
httpReqObject.open(“GET”, “test.txt”,true);

// Here we call the function and check whether the readyState is 4, then shoot the alert message.
httpReqObject.onreadystatechange=function() {
if (httpReqObject.readyState==4) {
alert(httpReqObject.responseText)
}
}
httpReqObject.send(null)

Now at the same time, i can use the status to check whether the URL exists or not.

if (xmlhttp.status==200) alert(“URL does Exists!”)

Let us jump into the well slightly in depth.  Common XML HTTP Request Object Methods.

httpReqObject.abort() will stop the current request.

getAllResponseHeaders() will return you the complete set of headers (labels and values) as a string.
When you go for a HEAD request, the server will return the headers of a resource that means you can find out the Content-Type or Last-Modified of a document without downloading.

HTTP/1.1 200 OK
Server: Microsoft-IIS/4.0
Cache-Control: max-age=172800
Expires: Sat, 06 Apr 2002 11:34:01 GMT
Date: Thu, 04 Apr 2002 11:34:01 GMT
Content-Type: text/html
Accept-Ranges: bytes
Last-Modified: Thu, 14 Mar 2002 12:06:30 GMT
ETag: “0a7ccac50cbc11:1aad”
Content-Length: 52282

getResponseHeader(“headerLabel”) will return you the string value of a single header label. What is this headerLabel?

httpReqObject.getResponseHeader(“Last-Modified”)) [ This will throw you the following below ]
Last-Modified: Thu, 14 Mar 2002 12:06:30 GMT

open(“method”, “URL”[, asyncFlag[, "userName"[, "password"]]])

The Method name is GET , following with a url and boolean which indicates whether or not the request will be asynchronous. Normally the open method does accepst five parameters and there are different type of Requests. The fourth and fifth parameters are the URL user and password, respectively.

# GET
# POST
# HEAD
# PUT
# DELETE
# OPTIONS

httpReqObject.send(content)

This method accepts a single parameter containing the content to be sent with the request.

function mySubmit(id) {
var url    = “submitForm.php”;
var params = “id=” + id;

httpReqObject.open(“POST”, url, true);

//Send the header information along with the request
httpReqObject.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
httpReqObject.setRequestHeader(“Content-length”, params.length);
httpReqObject.setRequestHeader(“Connection”, “close”);

httpReqObject.onreadystatechange = onPostSubmit;
httpReqObject.send(params);

}

Here i am sending the params in the send method along with the headers. It is essential that the data returned from the server be sent with a Content-Type set to text/xml. Content that is sent as text/plain or text/html is accepted by the instance of the request object however it will only be available for use via the responseText property.

setRequestHeader(“label”, “value”)

The setRequestHeader method can be invoked to send HTTP headers with the request. The first parameter would be a strign name and the second parameter with a strign value.

httpReqObject.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

Common XMLHttpRequest Object Properties

readyState

Object status integer:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

onreadystatechange

When the open method of httpReqObject object is invoked with a third parameter set to true, the on readystatechange event listner will be called for the following actions that change the readyState property of the object.

1. When the open method has been invoked successfully, the readyState property of the object should be assigned a value 1.
2. Once the send method has been invoked and corresponding response headers has been recieved, the readyState property should beassigned to
3. Once the HTTP response content starts loading, the readyState property should beassigned a value of 3.
4. Finally when the content has finished loading, the readyState property should be assigned a value of 4.

responseText

String version of data returned from server process

responseXML

DOM-compatible document object of data returned from server process

status

Numeric code returned by server, such as 404 for “Not Found” or 200 for “OK”

statusText

String message accompanying the status code

With this, i think i have covered to some extent of the XML HTTP Request Object. AJAX is a wonderful thing if you go on playing with it. I will get back a finishing style like RajniKanth with an example showing the power of AJAX.

package utils {

import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.system.Security;
public class UrlXloader
{

private static var _instance : UrlXloader = null;

public static function get instance() : UrlXloader {
if(_instance == null){
_instance = new UrlXloader();
Security.allowDomain(‘*’);

}
return _instance;
}

public function loadtheFile(fileRef : String, vinothLoad : Function):void{
var request:URLRequest=new URLRequest(fileRef);
var loader:URLLoader=new URLLoader();
try
{
loader.load(request);
loader.addEventListener(Event.COMPLETE, vinothLoad);
}
catch (error:ArgumentError)
{
throw new Error(“An ArgumentError has occurred.”);
}
catch (error:SecurityError)
{
throw new Error(“A SecurityError has occurred.” + error.message);
}
}
}
}

To start with, i am possibly making sure only single instance of a class is created by using a static initializer and checking it inside the function. [ Security.allowDomain('*'); ] The wildcard (*) value permits cross-scripting operations where the accessing file is any file at all, loaded from anywhere. At the next line you return the instance.

The rest of lines below are the usual things on how to perform a request and load the request using URLLoader class.

How to use the class file in your application.

UrlXloader.instance.loadtheFile(“filename.xml”, handleVinoth);

private function handleVinoth(event:Event):void
{
var dataXML:XML = XML(event.target.data);
}

Personally what i feel is it would be majuscule for the JAVA community, but i am yet to know about the fate of my favourate product MySQL. It would be a wise move from ORACLE community if they build a bridge for MySQL and ORACLE and attract the exisiting MySQL users to ORACLE.

Three years back, when ORACLE tried to buy MySQL.

MySQL Chief Executive Marten Mickos confirmed the acquisition attempt in an interview at the Open Source Business Conference here but wouldn’t provide details such as when the approach was made or how much money Oracle offered.

He did, however, say why he turned down Oracle’s offer: the desire to keep his company’s independence. “We will be part of a larger company, but it will be called MySQL,” Mickos said.

My Final Conclusion:

Its a known epic to all, SUN own MySQL and now the tale has changed with ORACLE entering the scene buying the SUN. Its a good time to say farwell to your beloved old amigo MySQL. It was nice knowing you so long my dear amigo MySQL.

When your form is submitted, then it gets stored in $_GET or $_POST global array, with this information in the hand we can perform a lot of things.

Strip_tags()

<?php
$input = ‘<p>My name is Vinothbabu.</p><!– Comment –> <a href=”http://www.vinothbabu.com”>My Blog</a>’;
echo strip_tags($input);
echo strip_tags($input, ‘<p><a>’);
?>

The output of the following code will be …

My name is Vinothbabu. My Blog
<p>My name is Vinothbabu</p> <a href=”http://www.vinothbabu.com”>My Blog</a>

The second line, you have additional parameter called allowable_tags, which will allow those tags specified.

Some times back when i was coding for my application for a client, i came across this situation where i have to strip put javascript , style , html tags and multi-line comments. There are many ways, to go a head for this approach…

<?
function stripTags($variable){
$searchForm = array(‘@<script[^>]*?>.*?</script>@si’,
‘@<style[^>]*?>.*?</style>@siU’,
‘@<[\/\!]*?[^<>]*?>@si’,
‘@<![\s\S]*?–[ \t\n\r]*>@’
);
$output = preg_replace($searchForm, ”, $variable);
return $output;
}
?>

Let me explain the above code in depth, such that no voice programmers may find useful. The first line is where you define your function and followed by array. The array contains list of regular expressions, what does these do? I will go in sequential way.

1. It blocks out the Javascript.
2. The style codes are blocked.
3. Stripping out the HTML tags.
4. Stripping out multiline comments, including CDATA.

The you come up with preg_replace, which performs a regular expression search and replace and you get the outout finally.

Finally, the real coding mela. Now let me write a code which you can use it various places, checking many stuffs. I think RajiniKanth movie also goes in such a way, the climax always better and better with rocking style. Here i go with another mottai boss style.

<?
function sanitizing($theInput){
if(is_array($theInput){
foreach($theInput as $variable=>$value) {
$output[$variable]=santizing($value);
}
}
else{
if(get_magic_quotes_gpc()){
$theInput = stripslashes($theInput);
}
$theInput = stripTags($theInput);
$output = mysql_real_escape_string($theInput);
}
return $output;
}
?>

Now from here, lets take an example on how to use the above function in our code.

<?
$string = “Howdy Vinothbabu <script src=’filename.js’></script> It’s so cool!”;

$_POST = sanitizing($_POST);
$_GET = sanitizing($_GET);
$output = sanitizing($string);
?>

The above code will return Howdy Vinothbabu It\’s so cool! Now lets take a break, by having a cigar and tea and jump into the part how the code works and what are the above methods. Let me explain you in my BOSS [ Superstar RajiniKanth] Style.

The first thing we are doing is adding a backslash before any of the following: ‘ (single-quote), “ (double quote), \ (backslash) and NULL characters.The get_magic_quotes_gpc returns 0[Off] or 1[On], depending upon your php.ini. If its turned ON, then strip all the blackslash… the single \ will be removed and \\ will be converted into one.

Normally, we have to take care using stripslashes, if the text we insert into our db contains \n, then you will encounter it as n instead of \n. Now comes the next line, where we have called our successor function stripTags() which will strip out the Tags. The final one is mysql_real_escape_string(). I think some may be thinking, where did addslashes move away, i would stop here on going further with a debate on which is better, i prefer mysql_escape_string as it sounds good. Using mysql_real_escape_string() around each variable prevents SQL Injection.

Conclusion:

PHP is secure language, if the programmers do take care of such nitchy things while coding. I have always felt the heat when someone says PHP is not secure, its all left in the hand of developers while coding. I hope you people enjoy reading my article.

If you are on the way of writing your own form, make sure you indite in such a way that spammers dont hijack it and spam others using your form.Normally we use PHP’s mail() function to send email. Our script may contain the below code.

mail(” yourname@emailaddress.com”, ” Title “, $msg, “From: $emailAddr”);

The above does nothing new, just the traditional approach where yourname@emailaddress.com is the webmasters or receivers address and the sender address info would be in $emailAddr variable. Now lets come to attack, hopefully you can take a good look from here.

If you don’t sanitize the $emailAddr variable before calling the mail(), then the attacker can inject additional headers into your messages by placing lines in $emailAddr variable.

What does this sanitize mean in general – Well, for one, you’re going to inspect the data and make sure that it doesn’t contain any malicious code.

some-email-address@emailaddress.com
CC: another-email-address@emailaddress.com, yet-another-email-addresses@emailaddress.com, etc-etc@emailaddress.com

The mail() function will insert these lines into your header and pass it to the mail agent, which will deliver the mail to everyone in the list. Now your form is hijacked and you have been a victim of someones attack.

Prevention is better than cure

Now lets look on how to make our script secure, by preventing this attack.There are chances where you have to look that the user has not entered any malicious javascript code. There are many ways and lots of attack to be prevented, but for now lets look on this alone.

if ( ereg( “[\r\n]“, $name ) || ereg( “[\r\n]“, $emailAddr ) ) {

redirect the user to error page and note down the IP address.

}

$name will hold the visitors name and $emailAddr will contain the visitors email address. The function ereg will help us to find if there is a new line characters. The characters like carriage return[ \r ] and line feed [ \n ] creates a new line in email headers which will allow for a new CC: line. Now our code will detect if there is a new line, if it is then the user is directed to an error page. Make sure you prevent this attackm else your script might inadvertantly be abused to send spam to others without your knowing.

The Behaviour of shared objects is somewhat like a cookie. The class can be used to store data on the clients machine and retrive those objects in same session or in another session. The declaration part is as simple like Arrays , String or Date. You are also allowed to create multiple instance in one application and each instance is associated with a name to identify.Don’t worry readers, at the end i will provide you with an example.

private function visitingInfo():void
{
var dateInfo:SharedObject = SharedObject.getLocal(”userVisitedDate”);
trace(“SharedObject is ” + dateInfo.size + ” bytes”);
if(dateInfo.data.lastVisitedDate != null)
{
Alert.show(”Welcome back, you visited last on ” + dateInfo.data.lastVisitedDate);
}
dateInfo.data.lastVisitedDate = new Date();
dateInfo.flush();
}

Let me explain the code to you in brief. Initially we are creating a variable of return type sharedObject. The getLocal method tried to load a local shared Object with the name lastVisitedInfo. If there is no name, then a new object is created. Now in the coming line, we are checking whether it is is NULL and displaying an appropriate message. The final line is makes sure that your object is saved.

1. The basic includes turning on error reporting.

2. The next one involves using print statements. This help you identify elusive bugs by displaying what is actually going on your screen.

3. This one is what i currently play with PHPeclipse which is an Eclipse Plug, that can highlight comman errors and also can be used as a debugger setting up breakpoints. Those who have played J2ee development, would be knowing it much better.

Now lets jump on each of these for a better construing. Its always the best practice to keep error reporting ON while on development mode, as it acts as a defence for developers like us. Make sure its off while the code is in production environment, as you don’t want your visitors to track the error which may lead him to get some loop holes for attacks.

Error reporting via PHP

I hope you would have come across php.in file. This is a configuration file which is used to control some of settings of PHP interpreter. I am in the progress of writing a detailed explanation on what exactly this php.ini is how we can play with it. Keep watching the site for updates. So lets come back to the game, you may notice these few lines in your php.ini file.

display_errors = Off
error_reporting = E_ALL

The main purpose of display_errors varibale is to whether you want to show errors or not. To make life easier set it ON while you are in development mode. What’s all about error_reporting. This displays everything from bad coding practices to harmless notices to errors. basically i would set it as something like this to avoid harmless notices, like uninitialized variables.

error_reporting = E_ALL & ~E_NOTICE

Now restart your apache, and the get start go. Now how about if you don’t have the permissions in your php.ini file. Don’t get fret, here is how we go again.

 <?php
error_reporting  (E_ALL);
ini_set (‘display_errors’, true);
include(‘./filename.php’);
?>

Error reporting in the server

Sometimes it happens as you might not know which php is your apache pointing as there may be multiple versions. To do the same as you just did in the php.ini file, add the following lines to your httpd.conf to override any and all php.ini files:

php_flag  display_errors        on
php_value error_reporting       2039

This will ensure you that, the above configuration overrides your php.ini file making the defualt value changed. I know your head might poggle up up on the number 2039. Its nothing but, setting up E_ALL & ~E_NOTICE both, if you just want E_ALL alone then go for 2047.

Introducing print statements

Functional bugs don’t generate bugs, its always tricky to get those errors placing print or die statement to juggle out. Sometimes your business logic my syntactically correct, but they are functionality bugs. These are really hard, as these type of errors are not thrown.The die() statement halts program execution and displays text to the Web browser. The die() statement is particularly useful if you don’t want to have to comment out your code, and you only want everything up to the error and the error displayed and nothing after.

 foreach($_GET as $abc => $i){
     print(“What is the data ” . $_GET[$abc "<br>");
 }

Now here, you could notice what is printed in $_GET[$abc]. Now here you can notice whether the values are printed correctly inside a loop making further efficient way using print statement.

In my next part, i will explain you how to play with phpeclipse and built in xdebug for debugging. I hope this small article may come in handy for new comers to PHP world.

What is Autoloading objects?

How about we including the classes automatically. puzzled right! Normally to include a class, you would go on with either ( include or require ) languager construct. By using __autoload function defined, inclusion will handle itself. I will explain you clearly further citing the traditional way as well as new approach.

Traditionally we would go in this fashion

include “classes/class.vinoth.php”;

$vinoth = new Vinoth;
$vinoth->methodname();

With our new approach….

function __autoload($class_name)
{
require_once $DOCUMENT_ROOT.“classes/class.”.$class_name.“.php”;
}
$vinoth = new Vinoth;
$vinoth->methodname();

Here, if Vinoth is created for the first time then the __autoload function is called automatically.Normally everydevelopers follow their own style of coding. I have used autoload in a different fashion irrespective of the listed above. I normally set the ini_set or set_include_path before hand and make the __autoload function much simpler just including the class name.

Note: We can also make throw expections instead of fatal error, if the classes are not loaded.

Before going further… let me put what’s actually PHP and Ajax are all about.

PHP – > Taken from PHP website.

PHP(recursive acronym for “PHP: Hypertext Preprocessor”) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.

AJAX — > From the Web

Ajax, or AJAX (Asynchronous JavaScript and XML), is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications.

Lets start with some coding, so that you can put your speakers loud enough hearing RajiniKanth’s music as its going to be damm sweet and easy while we go through.

<?php
session_start();
$arrayNames = array(‘Preeti’,'Kajol’,'Vinoth’,'Nayantara’,'Sandya’,'Priya’,'Reenga’);

if(in_array($_GET['name'], $arrayNames)) {
echo ‘1′;
}
else {
echo ‘0′;
}
?>

You are starting the session initially, with this you are declaring array of names and storing it in a variable $arrayNames. if the names are available, we print out 1 and else its 0.

Now a Question might araise how are we checking and where are we. Wait dude… check down below which you will explain you the rest. For now remember the $_GET['name']. We are getting this ID from the indexpage and then checking it with the list of names here and printing one or zero based on that.

Let me explain each and every line, so it will make more clear on whats happening here. Don’t worry amigos, you will get a example at the very end. RajiniKanth’s movie always ends in a happy climax.

var ajaxObj=false;

We set the ajaxObj as false by defual and later it changes.

function ajaxMethod(url){
if(window.XMLHttpRequest){
ajaxObj= new XMLHttpRequest();
if(ajaxObj.overrideMinmeType){
ajaxObj.overrideMinmeType(‘text/xml’);
}
}

We are then moving to this function where we are checking what the browser is and then creating the required Object. Let me go further deeper.

function ajaxMethod(url){

Name of the function and it holds a parameter url which will be passed during the time of function call.

if(window.XMLHttpRequest){

If the browsing window is Firefox , Safari or IE 7.0 then we get here and then create a new XMLHttpRequest object. So what is this XMLHttpRequest?

ajaxObj= new XMLHttpRequest();

XMLHttpRequest (XHR) is a DOM API that can be used by JavaScript and other web browser scripting languages to transfer XML and other text data between a web server and a browser.

if(ajaxObj.overrideMinmeType){
ajaxObj.overrideMimeType(‘text/xml’);

The older version of Mozila needs some help from our coders to understand the Request which we are passing. The overrideMimeType will force the XMLHTTPRequest to parse it as XML anyway, if the server does not support test/xml content type header.

else if(window.ActiveXObject){
try{
ajaxObj= new ActiveXObject(“Msxml2.XMLHTTP”);
}catch (e){
try{
ajaxObj= new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e){}
}
}

Here we are checking if its Microsoft Internet explorer 6.0 and then creating the new ActiveXObject. Don’t worry though the process is same as above. There are few terms which would be nice if its also explained. Let me first go with ActiveXObject.

The ActiveXObject is use to enable and return a reference to an Automation object.An object that is exposed to other applications or programming tools through Automation interfaces. People say using ActiveXObject is dangerous as it allows access to operating system from outside the browser sandbox.

Msxml2.XMLHTTP and Microsoft.XMLHTTP

Actually to say there is no difference, Microsoft decided to change the namespace and they both will instantiate the same version of MSXML object which could be of any versions 2, 2.6 or 3.0

if(!ajaxObj){
alert(“your browser does not support”);
return false;
}

Do we need explantion? yes if this prints out then make sure that the version you use does not support. Upgrade to the newer version. I would say IE 7.0 or IE 8.0 beta.

ajaxObj.onreadystatechange = ajaxRes;
ajaxObj.open(‘GET’, url, true);

ajaxObj.send(null);
return true;
}

onreadystatechange event handler is fired when the state is 4. This property is an event handler which is triggered whenever the state of the request changes. The states run from zero (uninitialized) through to four (complete).

ajaxObj.open(‘GET’, url, true);
ajaxObj.send(null);

The open method here makes the request to the server with the url which is passed during the function call time. It takes three parameters. The first one is the request type which is either GET or POST. The second one is the url of the server side process and the third defines whether the call will be asynchronous (true) or synchronous (false).

Asynchronous means the processing will happen without waiting for the server side retrieval to complete and where as synchronous call would stop all other processing and wait for the response from the server.

the event handler is defined and we are ready to send our request to the server which is done by the send method.

function ajaxRes() {
if(ajaxObj.readyState == 4) {
if(ajaxObj.status == 200) {
if(ajaxObj.responseText == ‘1′){
alert(‘Its seems to be ok’);
}
else {
alert(‘I think you are not known’);
}
}
else {
alert(‘it seems there is some other error’ + ajaxObj.status.toString() + ‘.’);
return;
}
}
}

The readyState property holds the status of the server’s response. Each time the readyState changes, the onreadystatechange function will be executed.

The data sent back from the server can be retrieved with the responseText property.

The Tutorial has come to finale, and it seems the hands are itching to test the code and check for a demo. As i said, RajiniKanth fans or movie never dissappoints anyone.

Download the Code and Check the Demo Here.