Raheel Hussain : AJAX

Working with AJAX - Part 2 - Speed & Page Size

Raheel Hussain — Thu, 03 Jan 2008 07:22:00 GMT

The Purpose of the AJAX (as also discussed by many writters and many websites) is to improve the user experience, as well as client centric operations and development. Instead of fetching the entire page contents, or displaying a completely new page, AJAX enables browsers to fetch and update/alter particular sections of page through the HTML, XML or through Javascript.

I launched my website all full with AJAX, though a very simple one, but it appeared to be very expensive in sense of it's loading time as well as data size.

I received couple of comments on my Guest Book as well as some of my collegues verbally told me of reducing the page load time, for atleast the home page.

Since then, I started doing my research on particularly reducing the page size and then in general, the appropriate combination of AJAX.

Consider the following general Scenario for your website size and images : -

Bigger than 60k in size : Your visitors will be unlikely to wait around and see your homepage.
50k to 60k : You visitors may see your first page, but may wary to wait and see second page.
40k to 50k : Better, but you may still loose visitors.
30k to 40k : Absolute, largest and serious sites would be.
20k to 30k : Responsive, and likely to get second visit.
10k to 20k : Very responsive and a pleasure for your visitors.

Obvisouly! my website had gone above 500k and it was Huge difference, and to make it shorter upto the mark, lots of changes were required.

Since the HomePage of your web-site is considered as a Gateway, that would lead you to the ( text and graphics based ) content. If the HomePage is very heavy just like what I have at http://www.raheelhussain.com/ , it is possible that the Search Engine Spider that might want to index your HomePage and entire site, might skip you (I mean your website) if it gets Timed Out while loading your page.

The page size of your HomePage for such a case (recommended by many experience webmasters) should be less than 125k.

While analysing my website, I found of couple of more things :

A huge amount of ViewState - Hidden Data
Due to AJAX implementation, the View State gets increased, unless we explicitly disable it on all occurances except wherever required.

Script Source Files with AJAX may increase your page size
When you use AJAX in your site, it includes lots of Script Sources files in the page sources, to support the functionalities like as follows :

<script src="/ScriptResource.axd?d=e0Z5w1xlI94kfI-ca3Wnd_wh0&t=633309435532426250" type="text/javascript"></script>

You will find a big number of References to such files... the more you use different AJAX functionalities on to the site.
So the recommendation is that you may use very less AJAX functionality on the HomePage at least.

Too many External Http Objects references.
To further explain this, each reference to an external file is refered as an external HTTP Object, You may take the example of http://www.google.ae/ or
http://www.yahoo.com/ as these sites are with very less references to external object and are really fast loading.

To demonstrate this, I went to http://www.websiteoptimization.com/services/analyze/ which is a free tool to analyze your site.
I did that for http://www.yahoo.com/ , http://www.google.ae/ and finally for my website http://www.raheelhussain.com/ for comparision.

Though the site for http://www.asp.net/ is also heavy, but my website (being very simple) was more havier than it.

You when you do it, you'll see the external object references, listed in a separate table.

Above is for http://www.yahoo.com/ and http://www.google.ae/ is even better with less load time.

Image sizes
Offcourse the image sizes need to be lesser unless there's really a need to put a bigger image file on the homepage.

And the Important One - The GuestBook
Since the Guestbook consumes/implements most of the AJAX functionalitiy. The conclusion to this is, that unless you do not have a requirement, keep all the
functionality in the inside pages, rather than keeping it on the Homepage.

Working out further, I gathered following Tips and Tricks to make a website, or at least the home page efficient and fast loading.

Fewer external Objects, means try to group them maximum into one combined, rather than many.

Turn on HTTP keepalives for external objects. Otherwise you add an extra round-trip to do another TCP three-way handshake for every HTTP request. If you are worried about hitting global server connection limits, set the keepalive timeout to something short, like 5-10 seconds. Also look into serving your static content from a different webserver than your dynamic content. Having thousands of connections open to a stripped down static file webserver can happen in like 10 megs of RAM total, whereas your main webserver might easily eat 10 megs of RAM per connection.

If your users regularly load a dozen or more uncached or uncacheable objects per page, consider evenly spreading those objects over four hostnames. This usually means your users can have 4x as many outstanding connections to you. Without HTTP pipelining, this results in their average request latency dropping to about 1/4 of what it was before.
Minimize HTTP response size by enabling gzip compression for HTML and XML for browsers that support it. For example, the 17k document you are reading takes 90ms of the full downstream bandwidth of a user on 1.5Mbit DSL. Or it will take 37ms when compressed to 6.8k. That's 53ms off of the full page load time for a simple change. If your HTML is bigger and more redundant, you'll see an even greater improvement.

I've implemented most of the changes on my website but it is yet to go live again.
Possibly by the end of this month.

Regards - raheel Hussain

References :
http://www.websiteoptimization.com/services/analyze/wso.php
http://www.websiteoptimization.com/services/analyze/

Page Load with AJAX & XML

Raheel Hussain — Mon, 03 Dec 2007 09:01:00 GMT

With the arrival of AJAX, lots of things have improved as well as it also adds interactivity and fanciness in your applications.

Here it is about no rocket science but an interesting scenario, that is to display the data received from the web service in the XML format the AJAX way during the page loading of a website.

Scenario : -

I've a web service, which returns a XML data. The requirement is to display that XML in tabular format during the page_load of your web site as well as with the AJAX style of fanciness with some update progress animations etc.

There were two reasons for which I had to go with the client side script rather than returning a dataset and binding it with a GridView.

First was that a I was unable to find way to control or manipulate a DataSet through javascript, and second was that it is something about incremental page load which involve AJAX style loading of the page involving update progress animation, and hence requires a client side script to come into action.

Lets start with a simple web service which returns XML records, Here's the code which I did

Imports System.Data
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class WebService
    Inherits System.Web.Services.WebService
    <WebMethod()> _
    Public Function getIndianTeam() As String
        Dim ds As New DataSet
        System.Threading.Thread.Sleep(2000)
        ds.ReadXml(Server.MapPath("App_Data/IND.xml"))
        Return ds.GetXml()
    End Function

    <WebMethod()> _
    Public Function getPakistanTeam() As String
        Dim ds As New DataSet
        System.Threading.Thread.Sleep(4000)
        ds.ReadXml(Server.MapPath("App_Data/PK.xml"))
        Return ds.GetXml()
    End Function
End Class

Note: In my application, I'm retreiving the records (into the DataSet) from the database though, but here I'm reading an XML file rather (for example purpose).
Another thing to notice is that you need to add

"Imports System.Web.Script.Services"

statement on the top of your code file in the webservice. as well as the following code

"<System.Web.Script.Services.ScriptService()> _"

which can be seen in the code given above. These two statements are not by-default part of the code, when you add a new webservice page into your project.
We are going to consume the web service in the default.aspx page.

The image above describes you what you need to do in your default.aspx page. I've placed an HTML Table with four rows. Row1 and Row3 has labels with headings "Pakistan Team" and "Indian Team" respectively. Row2 and Row4 has Label controls as well as an animated GIF (can be of your choice) which will act as what the name suggests the Update Progress animation.

Also note that the cell at Row2 and that of Row4 has been named as "tdPak" and "tdInd" respectively.

For this example, I've placed two XML files PK.xml and IND.xml inside the App_Data folder of the project. following image shows the solution explorer with the complete file and directory structure of this project.

Next thing we need to do is to write client side code which will interact with the webservice. Before doing that select the Script Manager in the design mode of your default.aspx file and click on properties (or press F4) and click on the Service Collection, which will open up the following window.

Click the Add button to add a new service reference to your Script Manager, this will enable you to use the web service in your code. Also since the webservice.asmx file is a part of your project, hense there's no need to write the whole path i.e. http://www.xyz.com/services/myservice.asmx etc. but you may only specify the name of the webservice file that is webservice.asmx.

Now you are able to use the webservice in your client script. Here's what we need to do now.

<head runat="server">
    <title>AJAX With XML</title>
    <LINK rel="stylesheet" type="text/css" href="StyleSheet.css" />
    <script language="javascript">
        function pageLoad() {
        vResult = WebService.getPakistanTeam(onRetreivePK,onError);
        vResult = WebService.getIndianTeam(onRetreiveIN,onError);        
        }
        
        function onRetreivePK(vResult){
            loadXML(vResult,1);
            }
            
        function onRetreiveIN(vResult){
            loadXML(vResult,2);
            }
            
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        function loadXML(xmlString,obj) { 
          xmlDoc.async="false";
          xmlDoc.onreadystatechange=verify;
          xmlDoc.loadXML(xmlString);
          displayXMLGrid(xmlDoc,obj);
        }
        
        function displayXMLGrid(xmlDoc,obj) {
            var root = xmlDoc.firstChild;
            var i=0;
            var strResult="<table border='0' style='width:100%'>";
            var tClass = "tdA";
            
            if (root.hasChildNodes) {
                var v = root.childNodes[0];
                while (v != null) {
                    v = root.childNodes[ i ];
                    if      (v==null) break;
                    if (tClass=="tdA") tClass = "tdB";
                    else tClass = "tdA";
                    
                    strResult +="<tr>";
                    strResult +="<td class='" + tClass + "'>" + v.attributes[0].text + "</td>";
                    strResult +="<td class='" + tClass + "'>" + v.attributes[1].text + "</td>";
                    strResult +="</tr>";
                    i++;
                    }                    
                }
                strResult += "</table>";
                
                if      (obj==1)    document.getElementById("tdPak").innerHTML=strResult;
                else if (obj==2)    document.getElementById("tdInd").innerHTML=strResult;
            }
            
        
        function verify() {
          // 0 Object is not initialized // 1 Loading object is loading data // 2 Loaded object has loaded data
          // 3 Data from object can be worked with // 4 Object completely initialized
          if (xmlDoc.readyState != 4) {
            return false;
          }
        }        
        function onError(vResult){  alert(vResult);  }
    </script>
</head>

In the above code, as you can see that I'm calling the Webservice methods to retreive the data in the form of XML. while the function calls have two arguments one is OnRetreivePK and second is OnError. These are basically sub routines ( or events ) rather than arguments, telling the method call that to call the OnRetreivePK method upon successfully receiving data and go to the OnError event if some error occurs.

I've used Microsoft.XMLDOM class with couple of methods of it to iterate through the nodes of the XML data retreived which very easy to understand, and then populating the cells of the table depending on the argument received.

Your application is ready to perform now.
You can now run the application and it will show up with some nice and fancy style loading that is light weight as well as faster.

You can download the source code by clicking on the Following link. AJAXWeb2.zip

Happy Coding & Regards - raheel

Working with AJAX - Part 1

Raheel Hussain — Sat, 24 Nov 2007 09:23:00 GMT

If you have not yet started working with AJAX, then this article will help you quick with it. You will AJAX style of development a fun-to-do. Lets have a look.

The Installation

The installation of AJAX extensions 1.0 is fairly easy.

We need to install the "ASPAJAXExtSetup.msi" this can be downloaded from http://www.asp.net/ajax/downloads/

Note that the AJAX Extensions 1.0.11119.0. are meant to be used with ASP.NET 2.0 and with Visual Studio 2005, while AJAX Library 3.5 is now also available for .NET framework 3.5 and Visual Studio 2008. However, we will still talk about AJAX 1.0 extensions.

When you run the AJAX 1.0 extensions setup, this will instal the "System.Web.Extensions.dll" and System.Web.Extensions.Design.dll" to your machine or to the your Global Assembly Cache of your machine.

You can go an see both of the files under the following path C:\Windows\Assembly\

Congratulations ! your Visual Studio 2005 is ready for doing AJAX style of development. Start your VS 2005 right a way and start a new website. You will notice that the toolbox now has an additional Tab by the name of AJAX Extensions

Making the First Program .. Hello AJAX World

Start a new website and double click on default.aspx (from project explorer view) to open it in design mode.

Place a label control, and a button on the page. Name the label control as "lblMessage" and the button as "cmdTest" or whatever you like.

Change the text of the button as "Test the AJAX".

Double click on the button, to go to the code view and write the following code:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdTest.Click
        lblMessage.Text = "Hello to AJAX World. Today's Date is " & System.DateTime.Now.ToString("dd-MMM-yyyy hh:mm:ss")
    End Sub

Now, press F5 to run the project,

Click the Button on the page to test the results.

You will notice that as soon as you click the button, the page Posts back itself (or the page Refreshes) to display the Message with date/time.

However, this is not the end of the story because AJAX has not yet come into the picture.

While the page open in design mode, go to the toolbox and double click on Script Manager under the AJAX extensions
This will put a Script Manager control on your page, which is responsible for managing/handling all AJAX scripts at the runtime

Select an UpdatePanel from the toolbox (under the AJAX Extensions menu) and place it on the form

Next, drag and place the Label control as well as the Button inside the UpdatePanel as shown in the figure below

Now Press F5 to run the application again. This time you'll notice that the page doesn't post back, but still displays the results on each click. This is basically running the server side code you've written under the click event of the button but, since we've used the UpdatePanel in the page and the purpose of the update panel is to tell the scriptmanager that which particular section of the page needs to be updated rather than the whole Page Postback.

With the AJAX tecnique, the data is posted back and retreived using the XMLHTTP (or XML over HTTP protocol).

Also, It is not necessary that you should place the button inside the Updatepanel, but you can put the button outside the Panel and control the Postback by specifying the Triggers inside the UpdatePanel triggers collection property.

Here's how we do it.

Put the button somewhere outside the Updatepanel (Drag it outside)

Click on the updatepanel in the design mode of the page, and then press F4 to open the properties window.

Click the Trigges property to open the "UpdatepanelTriggers Collection Editor" window shown in below image

The above diagram shows that when you click on the Add button it will show you two triggers, AsyncPostBackTrigger and PostBackTrigger.
You need to add the AsyncPostBackTrigger, we will talk about the PostbackTrigger later discussions.

The diagram exaplains you everything, that you need to select the ControlID and the Event of the TargetControl.

After setting all up, press Ok, and then press F5 to run the application. You will notice that, even though the button is outside the Updatepanel, but has the same result.

Conclusion

AJAX stands for Asynchronous JavaScript and XML.

AJAX fine tunes your pages to have greater user experience.

Particular parts or section of the page can be loaded without posting back the whole page with the help of XMLHttp (the technique of AJAX)

If a button is inside the Updatepanel, there is no need to define a trigger for that button inside the Updatepanel.

There can be more than one Updatepanel inside a page, each of which can be used for updating and retrieving content separately without page postback.

In working with AJAX Part 2, we are going to discuss about the AJAX Control and Control extenders shipped with the AJAX Control Toolkit.

Regards - raheel

Lets Go AJAX !

Raheel Hussain — Fri, 05 Oct 2007 21:28:00 GMT

It had been long since I last planned to update my skills on AJAX

I did work on it while when I was in my previous firm, since I had to start couple of new applications and got a chance to implement AJAX

But that was past, and in current organization ( 6+ months now ) I had to work on some existing software which were huge applications but in .NET 1.1.

So, finally and fortunately now I got chance to work again with AJAX when we planned to migrate one of our application from ASP.NET 1.1 to ASP.NET 2.0

Hope that everybody know that NET 1.1 doesnt support AJAX.

Some next posts of mine will be on AJAX sharing my experiences and some useful links and works by other developers in the industry....etc.

Stay tuned...

Microsoft's Project codename Astoria - online service

Raheel Hussain — Sun, 09 Sep 2007 05:28:00 GMT

My experience to use ASTORIA online service was good !

For using the online service, it requires Microsoft .NET Passport login. After logging in .. I created my entity model, a simple one by creating four tables.

Books
Borrowers
Librarians
Transactions

You also need to specify the User ID, Password and the Service name through which the URI for your service will be decided.

With the simple interface for creating the Entities, and Properties (Data Base Fields) of the Entities and the Associations (Relationships)
Following Images will show you the steps

In the above image, you can see the Button for Creating a new Entity as well as for Creating Properties and Associations.

You can find all of the instructions for creating the EDM on the same page. You can click on the "Finish" button at the bottom of the page to proceed further.

After finishing, you'll be shown the conceptual model (CSDL) file for your EDM, as you can see below the one which I created.

The above image shows the URI to test the above service. this is

https://astoria.sandbox.live.com/users/MYTESTDBSERVICE/MYTESTDBSERVICE.rse

Note that the service can only be access through the secure HTTP channel, and your UserID/Password is required to access it.
That is, in my case I've to enter my User ID and Password, while others cannot access my EDM through their login credentials.

For the demonstration, you can have a look at NWind Data Service, Adventure Works Data service etc. which can be accessed through
Project Astoria Website http://astoria.mslivelabs.com/OnlineService.aspx

Also the service which I created, can be accessed through a simple tool which allows to interact with the service is as follows:

https://astoria.sandbox.live.com/Tools/raw.htm

The tool allows for the following Http-Verbs ( or Actions)
GET = Retreive
PUT = Update
POST = Insert
DELETE = Insert

While in the above image, you can see in the Request Data Section, that I did put a test XML with the HTTP Verb as Post to insert data.
Currently in the Image you can see HTTP Verb = Get, but the Request data is not subject to use with GET, but only PUT & POST.

You can see in the Output section that the data is displayed as the result of HTTP-GET operation along with the URI value which I have specified as
https://astoria.sandbox.live.com/users/MYTESTDBSERVICE/MYTESTDBSERVICE.rse/Books

The "Books" refers to the Entity which was created earlier.

I hope this gave enough insight to you about the Project "Microsoft codename Astoria" and lets stay tuned for more updates to come as the project is under
active development and we expect major security features and certain more features to be added to it.

Best Of Luck

raheel Hussain

Microsoft Codename Astoria !

Raheel Hussain — Wed, 05 Sep 2007 09:18:00 GMT

Hello folks !

A recommended read about Microsoft codename "Astoria", an experimental project by Microsoft.

I'm listing down some of the highlights, I was able to understand from the mannual I downloaded.

This is a very interesting read, as well as the you can make your own data store upto 100 MB and use the Astoria
service to build the data service and access it from any where on the internet, while the toolkit can also be
downloaded to be used on your system with VS & AJAX enabled.

Here are the few extracts/highlights for your ease!

Project Astoria consists of a combination of patterns, libraries and an online service that explores the concept of data services for the web.

The goal of Astoria is to facilitate the creation of flexible data services that are naturally integrated with the web.
Astoria uses URIs to point to pieces of data and simple, well-known formats to represent that data, such as JSON (Javascript Simple Object Notation) and plain XML, while the default representation is XML.

JSON format is naturally and simply integrated with Javascript environments such as AJAX, can be retreived by simply setting a Acceptheader to application/json.

Codename Astoria is released in two forms, A downloadable toolkit and an online service. Both are focused on creation and operation of data services, but are aimed at difference scenarios.

The Astoria toolkit is a downloadable package that contains the Astoria runtime, documentation and examples that show how to use the toolkit. The toolkit is designed to allow ASP.NET developers to create data services directly in their ASP.NET applications, accessing their own database.
The Astoria online service is an experimental service that aims at exploring programming models for data on the web, offered in the form of a service.

Using the Astoria online service, web developers can create custom structured data stores on the web and access them from anywhere that they have internet access, This experimental release also includes a set of sample data-sets that are preloaded and readily accessible as data services.

Please you can visit http://astoria.mslivelabs.com for further information about the project.
Also, visit the Astoria Blog at Microsft MSDN.Regards !
raheel Hussain