Q:

Why do we need  when we have AJAX?

I just started to learn JavaScript, and in my projects I found that wherever a form is used AJAX could be used instead.
A simple example is:
<form id="demo_form" action="demo" method="post">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

And ajax could be used like this:
$('#demo_form input[type="submit"]').click(function(){    
    $.ajax({
        type: "POST",
        url: "/demo",
        dataType: "text",
        data: {
            username: $('#demo_form input[name="username"]').val()
        }
    });
});

And an advantage of ajax is that it could be asynchronous, and I found it really sweet since you can still do something else while waiting for the response from server, and can probably keep the current page and do not lose your input.(when I submit a form, I have to either transfer all inputs to the server and back to the interface all again and just lose them).
Since form is still used and popular nowadays, I guess there are some advantages of it that I do not know.

A:

First and foremost, the <form> element predates Ajax calls by years. Ajax calls (it's better if you call them XMLHttpRequest) were an addition in Internet Explorer to make it possible to load/post data from JavaScript.
Perhaps most importantly, if you'd stop support either <form> elements or XMLHttpRequest, you'd break basically all existing websites.
Besides the requirement that you need to use JavaScript to issue XMLHttpRequest calls (with JavaScript not always being available), there's also functional and semantic differences:

HTML forms semantically group input elements (otherwise, how would
you know which input elements belong together?)
They support some features
like file uploads which until very recently weren't supported in
JavaScript at all (you couldn't read the contents of files in file upload
fields)
Forms know how to serialize input fields (JavaScript libraries like jQuery reimplement this logic that comes for free with the browser)
Forms aren't affected by CORS restrictions (i.e. they
can post to any server; whereas XMLHttpRequest requires special server-side configuration for this)
Forms have built-in user interface affordances like submitting on pressing the enter/return key.
Forms can post data in different character sets and encodings (via the accept-charset attribute), which is
exceedingly difficult to do in JavaScript (in JavaScript all strings are Unicode)

XMLHttpRequest of course can do things that forms can't, for example set HTTP headers, can use more HTTP verbs (not only post and get), as you mentioned can be asynchronous and they also have a hugely expanded range of events you can react to.
Both technologies have their place, depending on what you'd like to achieve. 

