看看baidu是如何AJAX跨域的
2013-12-20 17:27
375 查看
看看baidu是如何AJAX跨域的
最近做个人网站遇到AJAX跨子域名的问题。偶尔看到baidu的通行证处理都是在二级域名passport.baidu.com中处理的,
但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧。
不防让大家也借鉴一下。
在http://zhidao.baidu.com/ 未登录用户回答问题时会用iframe调用http://zhidao.baidu.com/userlogin.html
userlogin.html有下面的javascript
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<SCRIPT LANGUAGE="JavaScript">
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
document.domain="baidu.com";
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!--
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function G(id){if(typeof(id)=="string"){return document.getElementById(id);}return id;}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function showInfo(obj){
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(obj.checked == true){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
G("memInfo").style.display="block";
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else{
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
G("memInfo").style.display="none";
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function request(id,url){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
oScript = document.getElementById(id);
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var head = document.getElementsByTagName("head").item(0);
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (oScript) {
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
head.removeChild(oScript);
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
oScript = document.createElement("script");
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
oScript.setAttribute("src", url);
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
oScript.setAttribute("id",id);
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
oScript.setAttribute("type","text/javascript");
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
oScript.setAttribute("language","javascript");
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
head.appendChild(oScript);
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return oScript;
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var loginTimer=null;
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var loginState=-1;
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var tryTime=0;
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function PSP_ik(isOk){
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(isOk==0){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
G("errorInfo").style.display="none";
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
loginState=1;
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(parent.loginSuccess){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
parent.Pop.hide();
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
parent.loginSuccess();
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
loginFalse();
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function loginFalse(){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
loginState=0;
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var err=G("errorInfo");
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
err.innerHTML="用户名或密码错误,请重新登录";
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
err.style.display="block";
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
G("username").focus();
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
tryTime++;
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(tryTime>1){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
onLoginFailed();
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function onLoginFailed(){
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(parent.onLoginFailed){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
parent.Pop.hide();
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
parent.loginFailed();
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else{
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.login.u.value=escape("http://zhidao.baidu.com/q"+parent.location.search);
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
doucment.login.submit();
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function loginTimeout(){
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(loginState==-1){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var err=G("errorInfo");
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
err.innerHTML="操作超时,请重新登录";
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
err.style.display="block";
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
G("username").focus();
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function userLogin(){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var username=G('username').value;
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var password=G('password').value;
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var memPassport=G('memPassport').checked?"on":"off";
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(username.length<=0||password.length<=0){G("username").focus();return false;}
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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();
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
loginState=-1;
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var login=request("loginScript",url);
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
loginTimer = setTimeout(loginTimeout, 5000);
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
window.onload=function(){
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.loginForm.username.focus();
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.getElementById("username").focus();
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//-->
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</SCRIPT>
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
我们可以看到request方法处理异步请求使用动态往head中添加script而不是用xmlhttp发送get请求。
妙就妙在这。我们知道调用javascript是没有域的限制的。当加载完成时一样会执行。
当然请求参数只能通过拼url的方式了。
url通过服务器处理后直接输出loginFalse()或者PSP_ik();
非常优雅的解决了跨域的问题。
这让我们想到了用iframe当ajax上传文件一样异曲同工。
如果不需要服务器反馈,google的点击计数用new img().src=...;
当然baidu这段脚本中还有一些小的技巧也值得我们学习。
相关文章推荐
- 看看baidu是如何AJAX跨域的
- 看看baidu是如何AJAX跨域的
- 看看baidu是如何AJAX跨域的
- 看看baidu是如何AJAX跨域的[转]
- 看看baidu是如何AJAX跨域的
- 看看baidu是如何AJAX跨域的
- baidu是如何AJAX跨域的
- $.ajax结合node如何实现跨域请求
- 谷歌浏览器如何设置可以解决Ajax跨域问题
- ajax如何跨域请求
- 用最简单的例子演示如何使用js或者$.ajax进行跨域请求
- Ajax 的概念及过程?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?
- ajax如何解决跨域问题
- 如何解决AJAX中跨域访问出现'没有权限'的错误
- ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
- ajax 有那些优缺点-如何解决跨域问题-ajax过程
- ajax跨域post请求,如何实现呢
- Ajax如何解决跨域问题
- Ajax 跨域如何实现
- 如何解决AJAX中跨域访问出现'没有权限'的错误