How do Facebook and Quora return JavaScript on Ajax responses? How do they handle the responses?

I have been noticed that some new websites are returning javascript on their ajax responses with the html and other stuff. For example, when want to send message from facebook, a popup appears, inputs and other elements get binded with events when submit, hover etc.. Quora the same thing.

Has it advantage doing this way?

You can watch with inspector (of course) but I'm putting a response example:

     HeadersContentCookiesTiming {
        "value": {
            "html": "<div class=\"dialog_tabs\"><a class=\"tab\" group=\"__w2_PHfxEJe_tabs\"
    href=\"#\" show=\"signup\" id=\"__w2_PHfxEJe_signup_select\"><span class=\"no_icon 
    signup\">Create an Account</span></a><a class=\"tab\" group=\"__w2_PHfxEJe_tabs\" 
    href=\"#\" show=\"login\" id=\"__w2_PHfxEJe_login_select\"><span class=\"no_icon 
    login\">Login</span></a></div><div group=\"__w2_PHfxEJe_contents\" 
    id=\"__w2_PHfxEJe_signup\"><div class=\"row live_login_signup_form\"><div class=\"row 
    p0_5\开发者_高级运维">Sorry, you must have an invitation to create an account on Quora.</div></div></div><div class=\"hidden\" group=\"__w2_PHfxEJe_contents\" id=\"__w2_PHfxEJe_login\"><div class=\"row form_row\" id=\"__w2_PHfxEJe_inline_login\"><div id=\"ld_LIJSXr_1\"><div id=\"__w2_b5Jr0f0_associated\"><div id=\"ld_LIJSXr_2\"></div></div><div class=\"w3_5 p1\"><form class=\"row w2_5 col inline_login_form\" method=\"POST\" id=\"__w2_b5Jr0f0_login_form\"><div class=\"form_inputs\"><div class=\"form_row\"><label for=\"__w2_b5Jr0f0_email\">Email Address</label><input class=\"text\" group=\"__w2_b5Jr0f0_interaction\" type=\"text\" name=\"email\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_email\" /><p class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_email_not_confirmed_error\">You need to confirm your email address\n                               before you can login. <br /><a hred=\"#\" id=\"__w2_b5Jr0f0_resend_confirmation\">Resend Confirmation Link</a></p><span class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_email_not_found_error\">No account matching that email address was found.</span></div><div class=\"form_row\"><label for=\"__w2_b5Jr0f0_password\">Password</label><input class=\"text\" group=\"__w2_b5Jr0f0_interaction\" type=\"password\" name=\"password\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_password\" /><span class=\"hidden input_validation_error_text\" id=\"__w2_b5Jr0f0_incorrect_password_error\">Incorrect password.  <a href=\"#\" id=\"__w2_b5Jr0f0_reset_password_link\">Reset Password</a></span></div></div><div class=\"form_buttons p1\"><input class=\"col p0_5\" group=\"__w2_b5Jr0f0_interaction\" type=\"checkbox\" checked=\"checked\" name=\"allow_passwordless\" value=\"allow_passwordless\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_allow_passwordless\" /><label class=\"login_option\" for=\"__w2_b5Jr0f0_allow_passwordless\">Let me login without a password on this browser</label><input class=\"submit_button\" group=\"__w2_b5Jr0f0_interaction\" type=\"submit\" value=\"Login\" w2cid=\"b5Jr0f0\" id=\"__w2_b5Jr0f0_submit_button\" /></div></form><div class=\"hidden e_col inline_login_preview_box\" id=\"__w2_b5Jr0f0_preview\"><img id=\"__w2_b5Jr0f0_pic\" /><br /><span id=\"__w2_b5Jr0f0_name\"></span></div></div></div></div></div>",
            "css": "",
            "js": "W2.addComponentMetadata({parents: {\"b5Jr0f0\": \"PHfxEJe\", 
\"PHfxEJe\": \"*dialog*_1\", \"NqeVUG8\": \"b5Jr0f0\"}, children: {}, knowsAbout: 
{\"b5Jr0f0\": {\"inline_login\": \".\"}, \"PHfxEJe\": {\"signup_form\": \"signup_form\"}}, 
groups: {\"__w2_PHfxEJe_contents\": [\"__w2_PHfxEJe_signup\", \"__w2_PHfxEJe_login\"], 
\"__w2_b5Jr0f0_interaction\": [\"__w2_b5Jr0f0_email\", \"__w2_b5Jr0f0_password\", 
\"__w2_b5Jr0f0_allow_passwordless\", \"__w2_b5Jr0f0_submit_button\"], 
\"__w2_PHfxEJe_tabs\": [\"__w2_PHfxEJe_signup_select\", \"__w2_PHfxEJe_login_select\"]}, 
domids: {\"b5Jr0f0\": \"ld_LIJSXr_1\", \"NqeVUG8\": \"ld_LIJSXr_2\"}});var _components = 
[new(LiveLoginDialog)(\"PHfxEJe\",\"\",{\"default_tab\": \"signup\", \"autostart\": 
null},\"cls:a.app.view.login:LiveLoginDialog:OuWttII3ndCni7\",{}), new(InlineLogin)
(\"b5Jr0f0\",\"\",{},\"live:ld_LIJSXr_1:cls:a.app.view.login:InlineLogin:zLqmkvFx8WJgk2\",
{})];W2.registerComponents(_components);W2.onLoad(_components, false);"
        },
        "pmsg": null
    }

Makinde from Facebook talks about this approach in this video and explains the benefits:

http://www.facebook.com/video/video.php?v=596368660334&oid=9445547199

In summary: At Facebook, they reached a point where they had 1M of javascript and it made the site slow and was a nightmare to maintain. They found out that the majority of use cases were about sending a request to the server and rendering different HTML. So by pushing the business logic to the server and letting it return the html to be rendered, they managed to remove a huge amount of javascript and make the site faster. It turns out that returning HTML in the response doesn't add too much delay over returning only the json and using javascript to render it. A lot more details in the video, though. I'm working on a library that does some of that and using it in my own projects now.

its pretty simple on how to handle javascript through ajax.. they will probably use some code like this to append the js code to the dom:

var d =
document.getElementById('divContents').getElements ByTagName("script")
var t = d.length
for (var x=0;x<t;x++){
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.text = d[x].text;   //will refer to the js property of the json
document.getElementById('divContents').appendChild (newScript);

regarding why they do it probably send in sm script content that they thought wasnt initially required by the user but when he performs some action like say he fails to authenticate himself probably they might send in sm javascript code that will be responsible for generating a Register new account markup and also add some validation rules with it..

Thus loading script on the client side may be smthing that is done when they dynamically need to insert some script.