Coding Tips

Getting started with Ajax - build your own smallest ajax framework

codin — Wed, 30 Apr 2008 06:31:14 +0000

Ajax (Asynchronous JavaScript and XML) have drastically changed the way Web application work. Effective and controlled use of Ajax can make Web applications highly responsive. In this article, I will take you through the fundamentals of Ajax. We also build a small ajax library JavaScript file which can be used as the starting point for your projects.

Note that there are a lot of Ajax frameworks available such as DOJO and YUI. But one issue with these frameworks is that they are somewhat big. If your application has to work with a lot of dialup users, you will have optimize these frameworks. Also you will have to make use of tools such as YUI compressor.

So if you are just looking for simple Ajax functionalities such as refreshing a portion of a Web page, it is better to go with your own small Ajax framework.

Ajax as the term suggests enables us to retrieve content asynchronously over HTTP request. Along with DHTML you can use this to update selected sections of a Web page.

In order to use Ajax, you need to first get a JavaScript browser object called XMLHttpRequest. Using this you can make asynchronous HTTP requests. But the implementation of this object is unfortunately browser dependent! So our first task is to write a JavaScript function which returns XMLHttpRequest in a browser independent way. Let us call this function getXMLHttpRequest(),

function getXMLHttpRequest() {
      if (window.XMLHttpRequest) { 
         return new XMLHttpRequest();
      } else if (window.ActiveXObject) { 
         try {
            return new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      return null;
}

Now let us write a function which will use the XMLHttpRequest to do an HTTP GET request,

function getAjaxContent(url, callback) {
	var ajax_req = getXMLHttpRequest();
	ajax_req.onreadystatechange = callback;
	ajax_req.open('GET',url,true);
        ajax_req.send(null);
}

But where do we get the content of our Ajax request? The second argument to the getAjaxContent is a function pointer and this function will be invoked during Ajax execution. Remember - Ajax execution is asynchronous!

Now in our application we can use the above two methods for Ajax calls. Here is a sample which retrieves an RFC document using Ajax,

function getRFC22() {
   getAjaxContent("http://www.ietf.org/rfc/rfc0022.txt",cb); 
 
}
 
function cb() {
  if(this.readyState==4) {
      alert(this.responseText);
  }
}

If the URL you are accessing returns HTML, you will need to use this.responseXML instead of this.responseText

Implementing pagination at database level (Oracle SQL) - Use RANK

codin — Tue, 29 Apr 2008 06:06:12 +0000

It is a common requirement to have pagination in Web applications. The easy way is to query all the records and then apply pagination logic to the data in memory. But this approach won’t work with tables which contains huge data sets.

The best approach is to do the pagination at database level using SQL. Database technology is an old and mature technology and hence this method is the most efficient one.

For example, let us assume that our application contains a CUSTOMER table and we want to display 15 customers at a time in a table. In Oracle, you can write a query like this one,

SELECT * FROM (SELECT C.*,ROWNUM AS R FROM CUSTOMER C) WHERE R > 0 AND R < 10

But what if you want to sort the customer data on the customer name and then want to display the first 10 records?

SELECT * FROM (SELECT C.*,ROWNUM AS R FROM CUSTOMER C ORDER BY CUSTNAME) WHERE R > 0 AND R < 10

But if you check the results, you will be in for a shock. The data will be wrong. This is because Oracle first applies the ROWNUM limit and then applies sorting on the limited set! So how do we get the first 10 customer after sorting on the customer name? That is where the analytical function RANK() comes to the rescue!

SELECT * FROM (SELECT C.*, (RANK() OVER (ORDER BY CUSTNAME)) AS RN FROM CUSTOMER C)
WHERE RN > 0 AND RN < 10

This approach doesn’t work in databases where there is no built RANK() function. For example, on AS400 systems only way to sort is to navigate to the required data window and then return only the records required. If you want records between 10 and 20, do a query and then navigate from 1 to 10, ignore records and then navigate from 10 to 20 and then break out of the query. But for large data sets navigating to the last page will take a lot of time.

How do I execute scripts in the content retrieved using Ajax?

codin — Sat, 26 Apr 2008 19:11:32 +0000

Ajax enables Web application developers to build highly responsive Web interfaces. Ajax also comes with a lot headaches. One such problem arises when the content returned by an Ajax call contains JavaScript. By default this script won’t be executed by the browser and any JavaScript functions in the Ajax content won’t be available to the main page.

So how to execute JavaScript in the Ajax content?

When you use Ajax, you first make an asynchronous call to server and the content returned is then assigned to a div tag using the innerHTML property as shown below.

document.getElementById("divId").innerHTML = ajaxContent;

In order to execute scripts inside the variable “ajaxContent”, we need to extract the script blocks and then pass to the JavaScript engine. So we will rewrite the above as follows,

setAjaxContent("divId", ajaxContent);

Here is the pseudocode for the setAjaxContent method,

1. Extract JavaScript method block by scanning for tags (without spaces or other attributes). For example, you will have to modify the function if you have the starting script tag as