baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧。

在http://zhidao.baidu.com/ 未登录用户回答问题时会用iframe调用http://zhidao.baidu.com/userlogin.html,userlogin.html 有下面的 javascript:

<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="用户名或密码错误,请重新登录";
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="操作超时,请重新登录";
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>

我们可以看到request方法处理异步请求使用动态往head中添加script而不是用xmlhttp发送get请求。妙就妙在这。我们知道调用javascript是没有域的限制的。当加载完成时一样会执行。

当然请求参数只能通过拼url的方式了。url通过服务器处理后直接输出loginFalse()或者PSP_ik();非常优雅的解决了跨域的问题。

这让我们想到了用iframe当ajax上传文件一样异曲同工。如果不需要服务器反馈,google的点击计数用new img().src=...;

当然baidu这段脚本中还有一些小的技巧也值得我们学习。

JavaScript是没有域的限制的更多相关文章

  1. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  2. 百度的一个Ajax跨域方法 JavaScript是没有域的限制

    baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...

  3. 原生JavaScript实现跨域

    为什么需要跨域呢?这是因为我们一般的请求都是使用xhr的,但是它只能调用同一个域里面的接口,有时候,我们想要在自己的站点中调用其他站点的接口,这时候就要用到跨域了.其实,跨域并不难,我们可以通过Jav ...

  4. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  5. JavaScript(9)--- 跨域

    JavaScript(9)--- 跨域 一.跨域原理(同源策略) 在项目搭建的初期,因为现在项目基本上都是前后端分离,所以不可避免地会遇到跨域问题,而造成跨域的罪魁祸首就是浏览器的同源策略.所以要解决 ...

  6. javascript:cors跨域postMessage、xhr2和xmldomain

    一.h5 postMessage node http-server配置服务器 有关配置:请参考我的http://www.cnblogs.com/leee/p/5502727.html 我把文件夹a配置 ...

  7. JavaScript:文本域事件处理

    文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态: ...

  8. arcgis api for JavaScript _跨域请求

    arcgis api for JavaScript  中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...

  9. 深入浅出JavaScript之跨域总结

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

随机推荐

  1. Jenkins构建完成后实现自动将war包部署到指定服务器

    首先我们需要确定我们的jenkins安装了:publish over ssh 插件,如果没有安装,到-->jenkins首页-->系统管理-->插件管理-->可选安装里面去搜 ...

  2. TPO-14 C1 Locate a political book

    TPO-14 C1 Locate a political book 第 1 段 1.Listen to a conversation between the student and librarian ...

  3. 教你一招,提升你Python代码的可读性,小技巧

    Python的初学者,开发者都应该知道的代码可读性提高技巧,本篇主要介绍了如下内容: PEP 8是什么以及它存在的原因 为什么你应该编写符合PEP 8标准的代码 如何编写符合PEP 8的代码 为什么我 ...

  4. 407. Plus One【LintCode java】

    Description Given a non-negative number represented as an array of digits, plus one to the number. T ...

  5. 227. Mock Hanoi Tower by Stacks【LintCode java】

    Description In the classic problem of Towers of Hanoi, you have 3 towers and N disks of different si ...

  6. android课程第一节(TextView控件使用)

    TextView控件使用 一.TextView基本使用(创建方式) 1.在程序中创建TextView对象 如下代码: @Override protected void onCreate(Bundle ...

  7. Thunder团队第六周 - Scrum会议1

    Scrum会议1 小组名称:Thunder 项目名称:i阅app Scrum Master:王航 工作照片: 参会成员: 王航(Master):http://www.cnblogs.com/wangh ...

  8. 20162328蔡文琛week02

    学号 20162328 <程序设计与数据结构>第2周学习总结 教材学习内容总结 这周学习了课本中的第二章内容,比起第一章,本章难度有略微底稿,从刚开始的显示字符转变为简单的加减乘除运算,经 ...

  9. 《梦断代码Dreaming In Code》阅读笔记(三)

    最后这几章感觉上更多是从软件完成整体上来讲的.比如说技术.方法等. 在我看来,其实一个团队一直坚持一种好的.先进的方法是不可少的.如果一个优秀的团队刚愎自用,只随着成员们喜好发展,那不能长久.比如说, ...

  10. dataTables基础函数变量

    DataTable下有四个命名空间(namespace),分别是defaults,ext,models,oApi. Defaults:主要是用于初始化表格的一些选项. Ext:拓展项,提供额外的表格选 ...