Updating view dynamically, loading model using ajax and more

This is a kind of weird question but I'm really really new to web development and it feels so weird for me (as a Desktop dev).

I created a dummy project to test things:

I want a list with notes (<li> items) and want to add more notes using Ajax.

I'll show my jquery (sorry for the spanish / english mixing, is just dirt code I throw without thinking on names):

<script type="text/javascript">
$(function () {

    AddNotes();

    $("#NuevaNotaForm").submit(function (event) {
        event.preventDefault();

        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            success: function (data) {
                AddNotes();
            }
        });
    });
});

function UpdateNotes(notes) {
    $(".Nota").each(function (index, element) {
        var fecha = $(element).find(".Nota-fecha");
        var nota = $(element).find(".Nota-Derecha");

        fecha.height(nota.height());

        fecha.css('background-color', ($(notes).get(index)).Fondo);
        nota.css('background-color', ($(notes).get(index)).Fondo);

        fecha.css('color', $(notes).get(index).Texto);
        nota.css('color', ($(notes).get(index)).Texto);
    });
}

function GetNotes() {
    $.ajax({
        url: '@Url.Action("GetNotes")',
        dataType: 'json',
        data: '{}',
        success: function (data) {
            UpdateNotes(data);
        }
    });
}

function AddNotes() {
    $.ajax({
        url: '@Url.Action("RenderNotes")',
        success: function (data) {
            $("#cajaNotas").empty().append(data);
            GetNotes();
        }
    });
}

So, I have a partialview (#cajaNotas) where I render the list of 开发者_开发知识库notes so:

I start making a query to "RenderNotes" who render the partialview so I clean the div and put the partialview (I do this because when I need a new note, I have to "refresh" the div and for the first time, just show the notes).

When I render the notes I make another ajax to get a Json (the list of notes) and I use that list to update some CSS).

I feel weird because all those ajax calls is making my web slow as hell. The notes takes half second to show up and when I add a new note (using the form (#nuevaNotaForm") it flicks harder (because of the refresh).

So the question is: Is web development weird? Im doing it bad as hell? I think that is weird to make 3 ajax calls for this little example.

When I look at firebug, it wait until the page load (I have to wait to append the partialview, right?) and then call to get the partial view and when it finishes, it wait to get the notes, in short, like 1 secs of calls.

Anyway, can someone give me some light? (The code is not clean but I need to know what Im doing wroing)

---

When you first load up the page, render the partial view on the server side first, using one of the built in helpers such as @Html.Partial.

---

The answer was Knockoutjs. The code have been simplified and is working perfectly.