看看baidu是如何AJAX跨域的 
最近做个人网站遇到AJAX跨子域名的问题。

偶尔看到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这段脚本中还有一些小的技巧也值得我们学习。

总结一句 活学活用 不要钻牛角尖,要不等我们解决ajax跨域的时候花儿也谢了

 
 
 
 

看看baidu是如何AJAX跨域的[转]的更多相关文章

  1. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  2. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  3. ajax跨域往php程序post数据时,php程序总是执行两次的解决方法

    php程序是部署在IIS7上面,ajax提交数据时,遇到了两个问题,一个就是跨域,一个php程序总会被执行两次. 第一个问题的解决方法,是百度出来的,添加下面几行代码就可以了: header('Acc ...

  4. 以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  5. 使用mvc3实现ajax跨域

    ajax跨域一般两种方式   1:cors,2:jsonp, 1:cors jsonp是get形式,承载的信息量有限,所以信息量较大时CORS是不二选择 在请求消息头添头 Access-Control ...

  6. ajax 跨域解决 网上资料

    PHP中运用jQuery的Ajax跨域调用实现代码,需要的朋友可以参考下   可以在页面定义一个调用方法,如下: 复制代码代码如下: function getData(){ $.getJSON(&qu ...

  7. 总结Ajax跨域调用问题

    原文:http://blog.csdn.net/wangxiaohu__/article/details/7294842 (一):动态脚本注入的方法.即在页面中动态生成<script>脚本 ...

  8. 关于Ajax跨域

    本人因工作需求,编写了一个测试页面,在页面填写完信息之后去向一个站点请求数据,然后返回结果!一开始是直接用Ajax在脚本中去访问,没有大碍(因为目标地址是本机上的一个网站),但是当站点去外部的网站时, ...

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

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

随机推荐

  1. 在centos 64bit 系统中安装使用WPS office的方法

    1. 安装32位开发库: yum install xulrunner.i686 yum install libXtst.i686 2. 在官网下载 wps-office-8.1.0.3724-0.1. ...

  2. 주기적으로 php파일 실행시키기 (PHP 파일 cron 으로 돌리기)

    크론탭에 추가 ]# crontab -e       한시간에 한번씩 원하는 페이지를 실행시키는 코드 0 * * * * wget -O - -q -t 1 http://domain.com ...

  3. 本地缓存下载文件,download的二次封装

    来源:http://ask.dcloud.net.cn/article/524 源码下载链接 说明: (1)由于平时项目中大量用到了附件下载等功能,所以就花了一个时间,把plus的downlaod进行 ...

  4. hdoj1285 拓扑排序

    题目链接 分析: 很明显,一看就是拓扑排序. 看似简单, 暗藏武器啊. 第一次做的时候一边拓扑排序一边标记他们的深度, 例如题中给的例子 {1 2:2 3:4 3 }.1的深度为1. 2.4的深度为2 ...

  5. 从CSDN转战于此

    平时喜欢写博客,开始是再CSDN,但CSDN博客功能实在不是很好.听说博客园的博客功能很不错,今天就来到此地.实际上很早就注册了博客园,但博客今天才申请的. 博客园,来了!

  6. Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel

    Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只 ...

  7. gradle使用国内源

    // 设置 maven 库地址 repositories {     maven { url 'http://maven.oschina.net/content/groups/public/' } } ...

  8. ASP.NET 5 初识

    ASP.NET 5 是一个跨平台的全新框架,不再依赖IIS.下面介绍一下简单的Hello World 例子. 1. 安装kvm 用管理员权限打开cmd .如下图: 执行如下的脚本: @powershe ...

  9. windows下vs2013使用C++访问redis

    刚开始在windows下使用c++访问reids各种报错,经过网上到处搜方案,终于可以在windows下访问redis了,特将注意事项记录下来: 1.获取redis Window下的开发库源码,从gi ...

  10. Head First 设计模式系列之二----备忘录模式(java版)

    申明:这几天无意中关注到备忘录模式,比较陌生回家一番参考书,只在附录里记录了该模式.后来在园子里有发现了有专门写设计模式的博客,并且写的也得牛逼.附上链接 http://www.cnblogs.com ...