Как 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

Макинде из 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);

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

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