Common AJAX Mistakes

With the advent of Web 2.0 the Web Application has now become more interactive in nature thanks to AJAX. But this interactive using AJAX comes with some mistakes that people generally doesn't follows.

Below are the list of mistakes that AJAX gives you as a gift.

1. No Back Button Functionality.
By default the browser stores the webpage visited in the History Folder, but with AJAX the browser is unable to retrieve the dynamic data.

2. Waiting Endlessly.
The AJAX functionality largely depend on the network connection and the bandwidth. AJAX works well with good Internet Connection so if you are using dial-up you will have to wait until the response comes from the server. But if your browser get struck in between the AJAX call irrespective of the internet connection then your browser window is dead until the user reloads the page or opens a same page and writes the same content again and submit.

3. Using AJAX for the sake of AJAX.
AJAX is a very good feature to implement in todays web world but you also have to make count of the usability of it.

4. Cross Browser Compatible.
If your web application is targeting multiple browsers you will have to make sure that the AJAX object gets created and will work seamlessly on all the browsers.

5. Browsers Load.
Making too much AJAX calls will degrade the browser performance and it will become slow. This will make the user experience horrible for your site.

6. Bookmark Links
Users cannot bookmark the page having dynamic content fetched using AJAX. The reason is AJAX will fetch the data dynamically from the server and the bookmark link will only store the static data stored in the internet cache folder.

7. Enable/Disable JavaScript.
AJAX purely works with JavaScript and if the users browsers has JavaScript disabled then the AJAX functionality will not work.

Install FFMPEG on Linux

FFmpeg is a simple open source application that allows Linux users to convert video files easily between a variety of different formats. It supports most industry-standard codecs and can convert from one file format to another quickly and easily. It also lets you capture video and audio from a live source and process it.

Requirements:
FFMPEG
LAME Mp3 Audio Codec (Requred for mpg, flv, avi, wmv etc files)
AMR Audio Codec (Required for 3gp video files)
XVID Audio Codec (Required for Divx video files)
FFMPEG - PHP (Extension for using FFMPEG in PHP)

Note:
All the Audio Codecs getting used in FFMPEG are not part of FFMPEG Source base.
All the download files are source code will need to:
configure
make
make install

FFMPEG Download URL:
http://ffmpeg.mplayerhq.hu/download.html

On the download page apart from the SVN they have also given download to the checkout-snapshot but i would suggest to use SVN source code base.

The url for the SVN source code for FFMPEG is:

svn://svn.mplayerhq.hu/ffmpeg/trunk

To download from SVN you will have to install subversion for Linux located at subversion.tigris.org, or you can use "TortoiseSVN" for Windows located at tortoisesvn.tigris.org.

LAME Mp3 Download URL:
http://lame.sourceforge.net/index.php

AMR Audio Download URL:
http://www.penguin.cz/~utx/amr
To install the AMR codec you will require both AMR-WB and AMR-NB files.

XVID Audio Download URL:
http://www.xvid.org/

Installation Steps:
It is a good practice to install all the external liraries first and then install the main files. i.e. For FFMPEG to work smoothly it's a best practice to install all the Audio Codec Libraray first.

Installing LAME MP3 Encoder

• Untar the lame file bu using tar zxvf


• Assign 777 permission rights to the lame folder by typing
  chmod 777 -R>


• Traverse to the root of lame folder and type>
  Step1:
  ./configure ---> Creates Make File
  Step2:
  make
  Step3:
  make install

Installing AMR Codec:

For installing the AMR codec there are two separate files that needs to be installed are AMR-WB and AMR-NB.

• Untar the AMR file bu using tar zxvf


• Assign 777 permission rights to the amr folder by typing
  chmod 777 -R


• Traverse to the root of amr folder and type
  Step1:
  ./configure ---> Creates Make File
  Step2:
  make
  Step3:
  make install

Installing Xvid Codec

• Untar the xvid file bu using tar zxvf


• Assign 777 permission rights to the lame folder by typing
  chmod 777 -R


• Traverse to the root of xvid folder


• Goto Build/generic folder from the root of xvid folder and type
  Step1:
  ./configure ---> Creates Make File
  Step2:
  make
  Step3:
  make install

Installing GCC

This is reqired as the SVN for FFMPEG is not compatible with the existing version of GCC(3x) requires a new version for the same. Installed GCC version 4.2

After the installation of GCC need to convert all the files of SVN to Unix compatible by using command "dos2unix".

Installing FFMPEG:

• Unzip the ffmpeg file bu using unzip command in linux shell


• Assign 777 permission rights to the ffmpeg folder by typing
  chmod 777 -R


• Traverse to the root of ffmpeg folder and type
  Step1:
  ./configure ---> Creates Make File
  Step2:
  make
  Step3:
  make install

NOTE:
You might get installation error while making the file related to html or texti files in doc folder.
Solution for this is to just create a empty file by using touch command.

Cross Browser Read XML in Javascript

Well Javascript apart from being a client side programming tools gives a good feature of reading XML Files located at the server provided the Programming page and the Javascript file responsible for calling the XML Files resides in the same domain.

On similar lines of implementing the AJAX in Javascript, XML can also be read in the same way.

details.xml

<employee>
<name>abcd</name>
<age>24</age>
<desc>Software Engineer</desc>
</employee>

Suppose i want to read details.xml file in my Javascript, so i will write the following code:

var documentXML;
if (window.ActiveXObject)
{
documentXML=new ActiveXObject("Microsoft.XMLDOM");
documentXML.async="false";
documentXML.onreadystatechange = readXMLIE;
documentXML.load("details.xml");
}
else if (document.implementation && document.implementation.createDocument)
{
documentXML=document.implementation.createDocument("","",null);
documentXML.load("details.xml");
doc.onload=readXMLNOTIE;
}

function readXMLIE()
{
if (documentXML.readyState == 4)
{
read_data();
}
}

function readXMLNOTIE()
{
read_data();
}

function read_data()
{
employeelist = documentXML.getElementsByTagName("employee");
for(i=0;i<=employeelist.length-1;i++)
{
if(navigator.userAgent.indexOf("Firefox")!=-1)
{
employeename = employeelist[i].childNodes[0].textContent;
employeeage = employeelist[i].childNodes[1].textContent;
employeedesc = employeelist[i].childNodes[2].textContent;
}
else
{
employeename = employeelist[i].childNodes[0].text;
employeeage = employeelist[i].childNodes[1].text;
employeedesc = employeelist[i].childNodes[2].text;
}
document.write("Node: " + parseInt(i+1) + "\n");
document.write("Employee Name: " + employeename);
document.write("\nEmployee Age: " + employeeage);
document.write("\nEmployee Desc: " + employeedesc);
document.write("\n");
}
}

Understanding the above code:
The XML Object are different for cross browser implementation.
If you are using IE then you have to use ActiveXObject("Microsoft.XMLDOM").
If you are using Mozilla/Opera then you have to use document.implementation.

Now seeing the above code, if you are using IE then there are 3 methods that you have to specify,
.onreadystatechange --> Defines the callback function which gets called on change in state.
.load --> Specify the xml file name to be loading in the javascript.
.async --> Denotes that javascript can perform other task while loading the xml file.

Similarly for Opera/Mozilla we are calling 2 methods,
.onload --> Defines the callback function which gets called on change in state.
.load --> Specify the xml file name to be loading in the javascript.

Now i am calling 2 different callback function because if you are using IE the xmlobject has a property called readystate which gives you the current state of the xml loading.
4 --> XML has been loaded correctly in the xml object.
NOTE:
If you are reading xml data and the readystate have not reached 4; it will generate a javascript error.

Whereas for Mozilla/Opera you don't require any readystate property
Once the xml data is loaded call the function (here read_xml()) which will be called for all the browsers.

To select list of node by tag name we use getElementByTagName(" .. Name of the Tag .. ")
Here the employeelist will contains all the occurance of the employee tag in the xml file.

Now according to the current xml it has 3 chilNodes namely name, age and desc.

Here we are reading the childNodes text content; now the methods to read the text content varies from browsers,

If you are using Mozilla/Firefox browsers then you will have to use textContent.
If you are using IE browsers then you will have to use text.

Finally after reading the individually node content i am displaying it using document.write.

I have not covered the whole concept of reading the xml file in javascript but atleast giving a small glimpse of how to read and fetch data from xml in javascript.

Have any query on reading XML post your comments will answer it right away