Art, ASP.NET, LawDeed, LINQ will appear as:
ASP.NET
Art
LawDeed
LINQ

To get this working correctly you need the following function:

    charOrdA: function(a, b) {
        a = a.toLowerCase(); b = b.toLowerCase();
        if (a > b) return 1;
        if (a < b) return -1;
        return 0;
    }

This function will make sure your alphabetical sortorder is correct so that the list appears like this:
Art
ASP.NET
LawDeed
LINQ

You have to pass the function name to the sort function like this:

arrCategories.sort(charOrdA);

Note that there are no parenthesis.

So which one do you use? What determines which one you use? Well personally I would take a pragmatic approach and say that no matter which library you choose, you still have to learn the basic concepts such as how HTTP requests work and how things are executed. Once these things are understood you can pick a library and make sure you learn it. Whether you pick jQuery or Microsoft Ajax is irrelevant, because with both you will have to spend time learning how the API works. I often find myself in a situation where I want to jump between libraries because I feel that there is a wow feature in the one and not the other. I also find myself creating my own JavaScript at times because I just don’t need the entire library. The most important thing to know though is that you have to commit your time and energy to learning JavaScript with or without the use of a library.

So back to the topic of the post and the first thing that needs to be understood is that you CANNOT upload files with AJAX/JavaScript. This is because of you cannot retrieve the contents of a file off a local system, and if this was so it would cause major security headaches. So what I ended up doing is following the IFRAME approach, by which you make it look as if the upload is happening all AJAX-like when in actual fact its not. So what I did was create an IFRAME:

        
    
busy

Notice that I added a div called divTimerValue, which I use to display some progress indicator, in my case it will be busy that will grow and subside with dots. In the source file (where the IFRAME points to) I create a form:

    
        Filename:


    

Notice that it has the ReturnValue.ashx action and that I have added an onclick function to the submit button, which looks like this:

        function dotsAnimate() {
            parent.document.getElementById("divFrame").style.display = 'none';
            var dotspan = parent.document.getElementById("divTimerValue");
            dotspan.style.display = '';
            setInterval(function() {
                if (dotspan.innerHTML == 'busy...') {
                    dotspan.innerHTML = 'busy.';
                }
                else {
                    dotspan.innerHTML += '.';
                }
            }, 1000);
        };

The dotsAnimate function uses the setTimeout function to create the animation. The generic handler then returns some HTML that contains a javascript function that clears the timeout and prints a message in the divTimerValue div:

        context.Response.Write(@"");
        context.Response.Write(savedFileName);

And this code produces the desired result.

It’s amazing then to hear an experienced JavaScript developer then speak of JavaScript being object oriented because it supports basic dot notation, even though the language itself is not object oriented in the classical sense.

I started this week by looking at a SOAP client written in JavaScript that makes calls to web services. What the SOAP client basically does is cache the WSDL with all the functions in it, from a web service (in this case an asmx file), and then it sends SOAP requests, processes the request and if there is a callback it does the callback function. The code for the SOAP client is based on this code.

I havent been doing a lot of JavaScript recently but you cannot really avoid it, but you can also not build an entire website with JavaScript and HTTPRequests alone (not search engine friendly), but you can also not rely entirely on server side code to do all the magic for you.

The other issue that has been bugging me of late is the idea of creating a session-less shopping basket, a shopping basket that uses a combination of web services and traditional classes. Within the .NET environment the only reason you might need to use sessions is to store DataTables or DataSets, but the question is how expensive is that on server resources. Would I be able to create the same session-based application with web services and traditional classes? After all you are adding web references to your web applications, and those web references all contain class declarations.

1. JavaScript
2. CSS and Images

What are the benefits of both or either method? ASP.NET Ajax provides a rounded corner control that is extremely easy to implement on an ASP.NET website. What if you do not use ASP.NET? Well then you can use Nifty Corners to add rounded corners to your website.

After searching Google for articles on rounded corners, I came across an article on 456 Berea Street that explains how to use Javascript and CSS to achieve the rounded corner effect. Strangely enough they don’t seem to use that effect immediately on their own website. How important is it to use rounded corners on a website?

CSS Balanced Columns
This is another technique worth knowing. Faux columns without using images? Now thats interesting. Balance your CSS Columns with JavaScript

AJAX uses the XMLHTTPRequest JavaScript object to communicate directly with the web server and has three important properties:

• the onreadystatechange property
• the readystate property
• the responsetext property

It’s important to note that the XMLHTTPRequest object is not supported by Internet Explorer which uses an ActiveX object, and for that reason when you create an XMLHTTPObject in JavaScript you have to add a few try/catch statements so that it returns the correct object for the correct browser.

If you want to use AJAX on a webpage it is thus important to understand that you need an XMLHTTPRequest object to make it possible. JavaScript is used to create the XMLHTTPRequest object and looks like this:

function GetXMLHTTPObject()
{
     var xmlHttp = null;
     try
     {
          xmlHTTP = new XMLHttpRequest();
      }
      catch(e)
      {
          try
          {
              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch(e)
          {
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
      }
     return xmlHttp;
}

What is AJAX? I know it’s an acronym for Asynchronous JavaScript and XML, but what does it really mean and how does it work. Client- and Server-side scripting is easy to understand on their own and its easy to understand how both technologies are used, but where it becomes tricky for myself is when the server-side and client-side code need to interact with each other. Developing web applications with ASP.NET does not always expose a developer to the inner workings of that specific technology. AJAX is not unique to PHP or ASP.NET. Both ASP.NET and PHP are server side scripting languages. The first thing to understand is that AJAX is not a technology on its own, nor is it something that has not been there before, because it uses existing technologies (JavaScript, XML) to do what it does. AJAX uses a combination of programming tools to create web-based applications that react more like software applications – this means that the web-based application responds much smoother and nicer and the page does not reload to retrieve new content.

I still have not defined what AJAX looks like or what it exactly does. AJAX is based on open standards such as HTML, CSS, XML and JavaScript. AJAX uses XML and HTTP Requests to communicate with a web server. Another important thing to note is that with AJAX web applications do not re-submit a web page every time a user makes a request. If for example a user enters data on a form and submits the information to a web server, the web server will traditionally create a new page after the submit has occurred, but AJAX communicates with the web server in such a way that updates to the page only happen to the sections of the page that are affected.

So the contact form on my website should allow visitors to send an email with their name, email address and a message. All three fields are required and should not contain empty values. The validation will be done server side, so that the user can see what they are doing wrong immediately and take any necessary steps to correct the information they entered.

One thing that has been bugging me recently has been to find an easy way to validate forms, and I came across LiveValidation. It’s pretty easy to setup and use, and I will be using it to create the form described above.

I also downloaded Amaya, an free XHTML editor, since I am extremely keen on sticking to Web Standards and all.

The basic structure for the form can be seen here. The form requires all three fields and validates the email address field, and if the email address field is found to be valid a alert message box appears on the screen. The underlying JavaScript code is quite interesting to note:

var fld_name = new LiveValidation( 'fld_name', {onlyOnSubmit: true } );
fld_name.add(Validate.Presence);
var fld_email = new LiveValidation( 'fld_email', {onlyOnSubmit: true } );
fld_email.add(Validate.Email);
fld_email.add(Validate.Presence);
var fld_msg = new LiveValidation( 'fld_msg', {onlyOnSubmit: true } );
fld_msg.add(Validate.Presence);
var automaticOnSubmit = fld_email.form.onsubmit;
fld_email.form.onsubmit = function(){
    var valid = automaticOnSubmit();
    if(valid)alert('Thank you for submitting your message!');
    return false;
}