Как Facebook и Quora возвращают JavaScript на ответы Ajax? Как они обрабатывают ответы?

Question

Я заметил, что некоторые новые веб-сайты возвращают javascript в своих ответах ajax с помощью html и других материалов. Например, когда вы хотите отправить сообщение из facebook, появляется всплывающее окно, входы и другие элементы привязываются к событиям при отправке, зависании и т. Д. Quora то же самое.

Есть ли у него преимущество в этом?

Вы можете наблюдать с инспектором (конечно), но я кладу пример ответа:

 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 
    } 

Answer 1

Makinde из Facebook говорит о таком подходе в этом видео и объясняет преимущества:

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

Подводя итог: В Facebook они достигли точки, где у них было 1 М javascript, и это сделало сайт медленным и был кошмаром для поддержания. Они выяснили, что большинство случаев использования заключалось в отправке запроса на сервер и визуализации разных HTML. Таким образом, подталкивая бизнес-логику к серверу и позволяя ему возвращать html, который будет отображаться, им удалось удалить огромное количество javascript и сделать сайт быстрее. Оказывается, что возвращение HTML в ответ не добавляет слишком много задержек за возвращение только json и использование javascript для его рендеринга. Тем не менее, гораздо больше деталей в видео. Я работаю над библиотекой, которая делает часть этого и использует его в моих собственных проектах.

Answer 2

его довольно просто о том, как обращаться с JavaScript через AJAX .. они, вероятно, использовать некоторый код, как это, чтобы добавить код JS к 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); 

относительно того, почему они делают это, вероятно, отправить в сценарий см контент, который, по их мнению, первоначально не требовался пользователю, но когда он выполняет некоторые действия, например, он не может аутентифицироваться, возможно, они могут отправить код javascript sm, который будет отвечать за создание разметки новой учетной записи Register, а также добавить с ней некоторые правила проверки ..

Таким образом, загрузка скрипта на стороне клиента может быть забавной шляпа выполняется, когда им динамически необходимо вставить какой-либо скрипт.