Question

I’m wondering how can google translator (translate.google.com) save user rate without postback, also there are similar behaviors else where (for instance in Stack Overflow) where user views no postback (everything is so fast and smooth) but there is some database interaction, for instance voting questions/answers or comments in Stack Overflow, is it Ajax? or it is just JavaScript? It is really nice, how can I implement these type of operations using VS2010,C#, ASP.NET?

thanks

Answer 1

Overview

Two aspects of this:

• When you do something that needs to be recorded on the server
• When you’re just looking at things and notice that stuff updates even though you didn’t do anything (the vote indicators change, you see things like "this post has been revised, click to load", "This question has been closed, no more answers will be accepted.", etc.)

When you do something that needs to be recorded server-side (e.g., vote)

It’s JavaScript code sending ajax messages to the server. The server end of the conversation can be implemented with any technology you like (one of the joys of the web, the client and server sides are decoupled). Specifically, the page is loaded with the vote information as it was then, and when you click the vote button, the JavaScript code updates the vote display immediately, and then afterward sends an ajax request to the server to record the vote (hence the instant visual feedback). Normally that request completes in a reasonable time and all is well. Sometimes there’s an error processing the request (either an HTTP error — e.g., something went wrong — or a logic error where the server rejected the vote); when that happens, you see an error message and the code reverts the display of the vote (because it wasn’t registered on the server).

In Stack Exchange’s case, they use the jQuery library in their JavaScript code. To give you an idea just how easy this is, here’s the client side of a straight-forward ajax call using jQuery:

$.ajax({
    url:    "/path/to/server/resource",
    method: "POST",
    data:   {action: "voteup"},
    success: function(data) {
        // Do something with the successful response from the server,
        // which can send back data
    },
    error:   function(jqXHR, textStatus, errorThrown) {
        // Do something with the error that occurred
    }
 });

The server side just responds to the POST operation in whatever way makes sense.

That example is using jQuery, but there are lots of other JavaScript libraries that also make ajax really simple, such as YUI, Closure, Prototype, or any of several others. jQuery is currently (by far) the most popular library for browser-based JavaScript tasks, but it’s not the only one.

When you’re just looking at things

I can only speak to this from the outside, but I expect Stack Exchange uses any of several "comet" techniques (web sockets, long polling, hidden iframes, etc.).

I expect web sockets are the first choice. For instance, if I open a question using Chrome with the Network tab open, I see a request to ws://sockets.ny.stackexchange.com/, and ws is one of the two schemes covered by the wire protocol RFC6455 associated with web sockets (the other being wss, the SSL-secured version). The joy of web sockets is that they officially and robustly allow persistent two-way communication between the client and server, allowing the server to push data to the client as appropriate.

Web sockets are reasonably well supported now with the glaring omission of IE9 and earlier, so SE presumably falls back to one or more of the older techniques mentioned in the above link for browsers that don’t have them.