Example code analysis: How Baidu implements AJAX cross-Origin

Bkjia.com AJAX tutorialWhen you are doing a website, you may encounter the problem of cross-subdomain AJAX. This problem may not be difficult for technical experts, but it may be difficult for new users, occasionally, baidu passes are handled in the second-level domain name passport.baidu.com. However, in many places, the baidu logon process is like ajax. How does it do it? I studied it and found a small trick. Let's also learn from it.

When a http://zhidao.baidu.com/Unlogged user answers a question, iframe will call http://zhidao.baidu.com/userlogin.html,userlogin.htmlhas the following javascript, code as below:

Reference content is as follows: <Script language = "JavaScript"> Document. domain = "baidu.com "; <! -- Function G (id) {if (typeof (id) = "string") {return document. getElementById (id) ;}return id ;} Function showInfo (obj ){ If (obj. checked = true ){ G ("memInfo"). style. display = "block "; } Else { G ("memInfo"). style. display = "none "; } } Function request (id, url ){ OScript = document. getElementById (id ); Var head = document. getElementsByTagName ("head"). item (0 ); If (oScript ){ Head. removeChild (oScript ); } OScript = document. createElement ("script "); OScript. setAttribute ("src", url ); OScript. setAttribute ("id", id ); OScript. setAttribute ("type", "text/javascript "); OScript. setAttribute ("language", "javascript "); Head. appendChild (oScript ); Return oScript; } Var loginTimer = null; Var loginState =-1; Var tryTime = 0; Function PSP_ik (isOk ){ If (isOk = 0 ){ G ("errorInfo"). style. display = "none "; LoginState = 1; If (parent. loginSuccess ){ Parent. Pop. hide (); Parent. loginSuccess (); } } Else { LoginFalse (); } } Function loginFalse (){ LoginState = 0; Var err = G ("errorInfo "); Err. innerHTML = "the user name or password is incorrect. Please log on again "; Err. style. display = "block "; G ("username"). focus (); TryTime ++; If (tryTime> 1 ){ OnLoginFailed (); } } Function onLoginFailed (){ If (parent. onLoginFailed ){ Parent. Pop. hide (); Parent. loginFailed (); } Else { Document. login. u. value = escape ("http://zhidao.baidu.com/q" + parent. location. search ); Doucment. login. submit (); } } Function loginTimeout (){ If (loginState =-1 ){ Var err = G ("errorInfo "); Err. innerHTML = "Operation timeout. Please log on again "; Err. style. display = "block "; G ("username"). focus (); } } Function userLogin (){ Var username = G ('username'). value; Var password = G ('Password'). value; Var memPassport = G ('mempassport '). checked? "On": "off "; If (username. length <= 0 | password. length <= 0) {G ("username"). focus (); return false ;} Var url = 'https: // passport.baidu.com /? Logt & tpl = ik & t = 0 & keyname = ik & mem_pass = '+ memPassport +' & username = '+ username +' & loginpass = '+ escape (password) + '& s =' + (new Date ()). getTime (); LoginState =-1; Var login = request ("loginScript", url ); LoginTimer = setTimeout (loginTimeout, 5000 ); } Window. onload = function (){ Document. loginForm. username. focus (); Document. getElementById ("username"). focus (); } // --> </SCRIPT>

We can see that the request method processes asynchronous requests by dynamically adding scripts to the head instead of sending get requests using xmlhttp. That's wonderful. We know that javascript is called without the limit of the domain. It is executed when the load is complete. Of course, the request parameters can only be spelled by url. After the url is processed by the server, loginFalse () or PSP_ik () is output directly ();
It solves the cross-origin issue elegantly.

This reminds us that using iframe to upload files through ajax is the same. If you do not need server feedback, use new img (). src =... for google's click count. Of course, there are some tips worth learning in the baidu script.