建站学院（LieHuo.Net）AJAX教程 大家在做网站时可能会遇到AJAX跨子域名的问题，这个问题对于技术高手来说可能并不难，但是对于新手来说可能是难题了，偶尔看到baidu的通行证处理都是在二级域名passport.baidu.com中处理的，但是baidu很多地方登录都好像是用ajax处理的，他是怎么做的呢？研究了一下，发现一个小技巧。 咱们也借鉴一下。
在http://zhidao.baidu.com/ 未登录用户回答问题时会用iframe调用http://zhidao.baidu.com/userlogin.html，userlogin.html有下面的javascript，代码如下：
| 以下为引用的内容：@H_502_13@<SCRIPT LANGUAGE="JavaScript"> @H_502_13@document.domain="baidu.com"; @H_502_13@<!-- @H_502_13@function G(id){if(typeof(id)=="string"){return document.getElementById(id);}return id;} @H_502_13@function showInfo(obj){ @H_502_13@ if(obj.checked == true){ @H_502_13@ G("memInfo").style.display="block"; @H_502_13@ }else{ @H_502_13@ G("memInfo").style.display="none"; @H_502_13@ } @H_502_13@} @H_502_13@function request(id,url){ @H_502_13@ oScript = document.getElementById(id); @H_502_13@ var head = document.getElementsByTagName("head").item(0); @H_502_13@ if (oScript) { @H_502_13@ head.removeChild(oScript); @H_502_13@ } @H_502_13@ oScript = document.createElement("script"); @H_502_13@ oScript.setAttribute("src",url); @H_502_13@ oScript.setAttribute("id",id); @H_502_13@ oScript.setAttribute("type","text/javascript"); @H_502_13@ oScript.setAttribute("language","javascript"); @H_502_13@ head.appendChild(oScript); @H_502_13@ return oScript; @H_502_13@} @H_502_13@var loginTimer=null; @H_502_13@var loginState=-1; @H_502_13@var tryTime=0; @H_502_13@function PSP_ik(isOk){ @H_502_13@ if(isOk==0){ @H_502_13@ G("errorInfo").style.display="none"; @H_502_13@ loginState=1; @H_502_13@ if(parent.loginSuccess){ @H_502_13@ parent.Pop.hide(); @H_502_13@ parent.loginSuccess(); @H_502_13@ } @H_502_13@ } @H_502_13@ else @H_502_13@ { @H_502_13@ loginFalse(); @H_502_13@ } @H_502_13@} @H_502_13@function loginFalse(){ @H_502_13@ loginState=0; @H_502_13@ var err=G("errorInfo"); @H_502_13@ err.innerHTML="用户名或密码错误,请重新登录"; @H_502_13@ err.style.display="block"; @H_502_13@ G("username").focus(); @H_502_13@ tryTime++; @H_502_13@ if(tryTime>1){ @H_502_13@ onLoginFailed(); @H_502_13@ } @H_502_13@} @H_502_13@function onLoginFailed(){ @H_502_13@ if(parent.onLoginFailed){ @H_502_13@ parent.Pop.hide(); @H_502_13@ parent.loginFailed(); @H_502_13@ }else{ @H_502_13@ document.login.u.value=escape("http://zhidao.baidu.com/q"+parent.location.search); @H_502_13@ doucment.login.submit(); @H_502_13@ } @H_502_13@} @H_502_13@function loginTimeout(){ @H_502_13@ if(loginState==-1){ @H_502_13@ var err=G("errorInfo"); @H_502_13@ err.innerHTML="操作超时,请重新登录"; @H_502_13@ err.style.display="block"; @H_502_13@ G("username").focus(); @H_502_13@ } @H_502_13@} @H_502_13@function userLogin(){ @H_502_13@ var username=G('username').value; @H_502_13@ var password=G('password').value; @H_502_13@ var memPassport=G('memPassport').checked?"on":"off"; @H_502_13@ if(username.length <=0||password.length <=0){G("username").focus();return false;} @H_502_13@ 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(); @H_502_13@ loginState=-1; @H_502_13@ var login=request("loginScript",url); @H_502_13@ loginTimer = setTimeout(loginTimeout,5000); @H_502_13@} @H_502_13@window.onload=function(){ @H_502_13@ document.loginForm.username.focus(); @H_502_13@ document.getElementById("username").focus(); @H_502_13@} @H_502_13@//--> @H_502_13@</SCRIPT> |
@H_502_13@ 我们可以看到request方法处理异步请求使用动态往head中添加script而不是用xmlhttp发送get请求。妙就妙在这。我们知道调用javascript是没有域的限制的。当加载完成时一样会执行。当然请求参数只能通过拼url的方式了。url通过服务器处理后直接输出loginFalse()或者PSP_ik()； @H_502_13@非常优雅的解决了跨域的问题。
这让我们想到了用iframe当ajax上传文件一样异曲同工。 如果不需要服务器反馈,google的点击计数用new img().src=...; 当然baidu这段脚本中还有一些小的技巧也值得我们学习。
