The next feature in JavaScript nowadays acts a protocol between web client and server. We know that there are two types of web development technologies available in the market.

1. Pure server side technology. (ASP.NET, Servlet)
2. Mixed mode technology. (PHP)

The first one raises necessary level of abstraction between client and server side processing. Second one mixed with actual HTML page. Both have pros and cons. Most consumers wants the first one because of its abstraction and separation between UI rendering and UI processing. And it allows us to do object-design. Also, it provides more flexibility to interact with business services of a particular application.

How do the client and this server side talks with each other? Till pre-Ajax, we did by passing a string of HTML/CSV/Plain text/XML. The more general and gentle approach is XML. But based on customer's SLA (Service Level Agreement), the developers selected the feasible one. In any approach, we need a to and fro converter on both server and client. In server, the result of a process (generally business entities or value objects) is converted to anyone of the above approach. In client, based on the approach we need to write JavaScript code to parse these values. We cannot fully say this approach is MVC's (Model-View-Controller) baby because the OO is missing here.

Then now, is there any Ajax implementation to resolve this? Solution is available. But it is not an invention of Ajax. It is a feature of JavaScript. What is that?

In JavaScript specification, it is called as object literals.

Let us take one example. NJS Shopper is an online application for a grocery shop. After a customer placed list of items and paid online, the system finally shows him what are all items he ordered and price for these. The application server returns these information as a business entity named "OrderDetails". The figure 1 shows the details of this entity.

Figure 1

I am not going to explain the business details of the above. Before going further on how can we implement a protocol to speak both server and client in "object" context, let us see what Object Literals is?

Object Literals

We can create a JavaScript object (again object, not class) using object literals. All the members of an object can be declared as name-value pair with color separated. Each members are separated by commas and enclosed within {} as like arrays. For example,

var orderDetails = {orderID:19092, customerName:"Sheik", netAmount:2184.00};

Unlike C++/C#/Java, in JavaScript, we can create an object without any class declaration. One more proof of "Anything can be defined…" slogan.

Now think that, instead of passing HTML, XML or plain text from server to client, we can create object literals at server side and send it to client. Then, JavaScript can process the object literals. At server side, we have to write a converter for the above entity to JavaScript object literals. For example, here I've written a very basic server side code snippet for OrderDetails excluding orders field in ASP.NET 2.0.

StringBuilder orderDetailsBuilder = new StringBuilder();

orderDetailsBuilder.Append("{");

orderDetailsBuilder.AppendFormat("orderID:'{0}', customerName:'{1}', netAmount:{2}}}",

orderDetails.OrderID, orderDetails.CustomerName, orderDetails.NetAmount);

Response.Write(orderDetailsBuilder.ToString());

Response.End();

Caution: In .NET, using reflection we can generate object literals more general and in abstract manner. The above code snippet is just for example.

The following code snippet shows that how to handle the returned object.

var asyncReq = new ActiveXObject("Msxml2.XMLHTTP");

asyncReq.onreadystatechange = function()

{

    if (asyncReq.readyState == 4)

    {

        if (asyncReq.status == 200)

        {

          var resultString = asyncReq.responseText;

          var orderDetails = eval("(" + resultString +")");

          alert("Customer: " + orderDetails.customerName +

              " Order ID: " + orderDetails.orderID +

              " Net Amount: " + orderDetails.netAmount);

         }

    }

};

asyncReq.open("GET", "Default.aspx?a1=od", true);

asyncReq.send(null);

In AJAX period, this is called as JSON – JavaScript On Notation, a best protocol for server to client transmission.