AJAX In Facebook ...

Now days Ajax is doing a very important rule .That’s in the face book application , it also very necessary .

In this section I will describe the ajax method for facebook application.

I assume that the rader will have an idea about the ajax and some idea of FBJS.

First I focus the categories of ajax method in facebook.

There are different ways you can perform ajax in facebook.

1. MOCK Ajax .(http://wiki.developers.facebook.com/index.php/Mock_ajax)

2. TypeHead Ajax. ( http://wiki.developers.facebook.com/index.php/FBJS/Examples/Typeahead/AJAX )

3. Using FBJS/ AJAX ( http://wiki.developers.facebook.com/index.php/FBJS/Examples/Ajax )

I feel comfort for the last one, because it quite similar with jquery. (http://jquery.com/ ).

Also “FBJS is Face book’s solution for developers who want to use JavaScript in their Facebook applications. We built FBJS to empower developers with all the functionality they need, and to protect our user’s privacy at the same”

So let’s start with the FBJS/ AJAX

At first see the features of AJAX.

1. FBJS supplies a very powerful AJAX object

2. It supports retrieving JSON, FBML, or raw text from remote servers.

3. To use it, just instantiate a new Ajax class.

4. It has an event handler which fires when an AJAX call returns

5. It has an event handler which fires when an error occurs during an AJAX call

6. It can check whether user login.

7. Data send through post.

Now we look at the AJAX Method:

responseType

This can be Ajax.RAW, Ajax.JSON, or Ajax.FBML.

Ajax.RAW

The response from your server will be returned to your callback in its original form.

Ajax.JSON

The response from your server will be parsed as a JSON object and returned to your callback in the form of an object. Properties of your JSON object which are prefixed with “fbml_” will be parsed as individual FBML strings and returned as FBML blocks. These blocks can used on a DOM object with the setInnerFBML method.

Ajax.FBML

The response from your server will be parsed as FBML and returned as an FBML block. This block can used on a DOM object with the setInnerFBML method.

ondone

An event handler which fires when an AJAX call returns.

onerror

An event handler which fires when an error occurs during an AJAX call

requireLogin

If you set this to true the AJAX call will require the user to be logged into your application before the AJAX call will go through. The AJAX call will then be made with the regular fb_sig parameters containing the user’s identity. If they refuse to login, the AJAX call will fail.

post ( url, query)

Start an AJAX post. url must be a remote address, and query can be either a string or an object which will be automatically converted to a string.

Note: be careful about the url. Use the callback url . Do not write facebook url. Like ()

Like use this : http://www.piggymate.com/f8apps/freevideo/trunk/add_video.php

not to use : http://apps.facebook.com/freevideo/index.php

Now we start through step by step :

1. Create an instance of AJAX class. Like : var ajax = new Ajax();

2. Set the response type of ajax.

Like: if you use FBML then use

ajax.responseType = Ajax.FBML;

3. Set the require login. like : ajax.requireLogin = true;

4. Now you write the function that will handle the event after success of ajax call.

Like :

ajax.ondone = function (data) {

document.getElementById (’message’).setInnerFBML(data);

}

Note: here data is the result of Ajax.

5. You can also set onerror for handling the error.

6. Call the url through post method .Like

var params={”user”:user_id,”video_id”:video_id}; //add parameters as comma separated “param”:value

ajax.post(’callbackurl not facebook url l,params);

Well you see here you can see that post method has two parameter. post callbackurl,parameter);

There is useful links from where you can get the full example of ajax .

http://wiki.developers.facebook.com/index.php/Mock_ajax

http://wiki.developers.facebook.com/index.php/Mock_AJAX

http://wiki.developers.facebook.com/index.php/FBJS/Examples/Ajax

http://facebook-developer.net/2007/10/22/reducing-bandwidth-with-fbjs-dialogs/

http://facebook-developer.net/2007/10/26/how-to-display-a-loading-message-in-facebook-dialogs/

http://ajaxian.com/archives/richer-ajax-support-for-facebook