假如你的脚本只针对某个浏览器开发,那么创建XMLHTTP是很简单的一件事,用XMLHttpRequest或者ActiveXObject即可。但事实上绝大多数的时候,我们都要考虑兼容,于是我们通常写成:

var x;
if(window.ActiveXObject)
x = new ActiveXObject("Microsoft.XMLHTTP");
else
x = new XMLHttpRequest();

当然,熟练的朋友更倾向于简练的代码:

var x = window.ActiveXObject?
new ActiveXObject("Microsoft.XMLHTTP"):
new XMLHttpRequest();

但也到此而已。这段代码还能继续压缩吗?我们不妨来探索下。

现在我们把一堆单词: ActiveXObject, "Microsoft.XMLHTTP", XMLHttpRequest, window 配上几个符号重新排列起来,组合出一个语法正确并且能正常运行的表达式。

首先我们最容易想到的就是共用一个new。因为JS里面有个很强大的运算符“||”,相信大家都用过。所以我们先用||得出Class,然后用new实例化出instance。于是:

new (window.XMLHttpRequest || ActiveXObject("Microsoft.XMLHTTP"))

很不幸,它没能通过IE6,7的考验。(IE8+已经支持XMLHttpRequest了)错误很简单,就在ActiveXObject("Microsoft.XMLHTTP")上。Automation 服务器不能创建对象。

在IE里,ActiveXObject(...)之前必须带上new,否则就会出现上面的错误。但请注意了,ActiveXObject后面是带参数调用的。如果我们单独反射出ActiveXObject这个函数,然后再实例化,结果会如果呢?我们测试下:

var ref = ActiveXObject;
var x = new ref("Microsoft.XMLHTTP"); x.open("GET", "1.html", true);
x.send();
alert(x.responseText)

结果不但没有报错,并且成功的显示出了文字。这说明window.ActiveXObject这个方法是可以反射调用,但必须用new才能创建组建。这很好理解:function ActiveXObject(){}的Native Code会判断当前是new call还是direct call,如果不是new call就报错。这意味着你不能预先创建出XMLHTTP的Class,而必须用ActiveXObject的工厂形式。

既然事实如此,我们只能用XMLHttpRequest || ActiveXObject这样的逻辑。如果带上new,我们就得到这样的代码:

new (window.XMLHttpRequest || ActiveXObject)

这对XHR的创建已经够了,但是ActiveX还需要提供一个参数指定组件名。这个参数加在哪里好呢?不用多虑,就放在最后。

因为XMLHttpRequest的构造函数是不带参数的,而JS是个弱类型语言,所以你即便给他指定一个参数也不会出问题。于是最后,我们用一行表达式即可创建:

new (window.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP")

因为IE8+即支持 XMLHttpRequest 和 ActiveXObject,因此上面 || 左右顺序决定了IE8+优先使用哪种。

不过,这还不是最简短的!没错,还有更精简的,但显得不是特别正规,甚至有点晦涩。

纵观上述代码,其中的window显得有点多余,但又不能去掉。假如有个简单的办法判断是(或者不是)IE浏览器,我们就可以用 ?: 运算符来代替 || 了。

曾经有个老外写过最简短判断IE的办法,只需6个字节 !-[1,] 原理就是IE特有的特征,数组处理最后项的bug。利用这个办法,我们还可以进一步压缩代码:

new(-[1,]?XMLHttpRequest:ActiveXObject)("Microsoft.XMLHTTP")

无疑,这是最简短的XMLHTTP创建代码了!正好60个字节。 但相比规范性和可读性,还是推荐之前那种。

其实用self对象完全可以代替window。self是window的只读属性,并且永远指向window,所以用:

new(self.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP")

也正好是60字节,并且更规范:)

简短的创建Ajax对象代码的更多相关文章

  1. Ajax--Ajax基于原生javascript:创建Ajax对象、链接服务器、发送请求、接受响应结果

    Ajax概述 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 同步请求: 请求是由浏览器发送 页面会刷新 异步请求: 请求是由浏览器的一 ...

  2. 创建ajax对象并兼容多个浏览器方法简单记录

    这篇文章主要介绍了如何创建ajax对象并兼容多个浏览器,需要的朋友可以参考下<script> function createAjax(){ var request=false; //win ...

  3. 创建Ajax对象

    针对不同版本浏览器插件Ajax对象. <script> function createAjax(){ var request=false; //window对象中有XMLHttpReque ...

  4. JavaScript之Ajax(一)创建Ajax对象

    // 支持浏览器的源码 function AjaxObject() { var AjaxRequest; // 缓存XHR对象便于 Ajax 使用 try { // Opera 8.0+, Firef ...

  5. 如何创建ajax对象?

    1.IE低版本 2.非IE和高版本 <script> function createAjax(){ var request=false; //window对象中有XMLHttpReques ...

  6. Ajax详解及其案例分析------如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  7. 几种创建XMLHttpRequest对象的方法

    XMLHttpRequest对象,也就是Ajax交互的核心对象. 这里列举三种创建Ajax对象的方法. 第一种: <!DOCTYPE html> <html> <head ...

  8. ajax分页代码

    <meta charset="utf-8"><?php//连接数据库$link = mysqli_connect('127.0.0.1','root','root ...

  9. 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结

    XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...

随机推荐

  1. 初学node.js-npm使用(2)

    1.安装Node封装模块 安装Node封装模块很重要,因为开发项目中会用到各种各样的功能,这时就需要去下载开源的模块 使用npm install <module_name> module_ ...

  2. spring-boot rabbitMq 完整项目搭建,包括创建、发送、监听

    写在开始 rabbitMq 代码按照三部分介绍 第一部分 交换机和队列的创建 第二部分 消息发送 第三部分 消息监听 第一部分 1 建立queue 2 建立exchange 3 exchange绑定q ...

  3. php 常用英语小汇

    bstract抽象的 -挨伯丝拽克特 access存取.访问 -挨克色丝 account账户 -厄靠恩特 action动作 -爱克身 activate激活 -爱克特维特 active活动的 -爱克得 ...

  4. 奔跑吧DKY——团队Scrum冲刺阶段-Day 1-领航

    各个成员在 Alpha 阶段认领的任务 修改 序号 修改 具体描述 1 游戏过程 取消原来的跳跃和俯身按钮,保留跳跃的功能,可以触屏滑动来躲避地面障碍物,也可以躲避另一种陷阱障碍物 2 闯关功能 取消 ...

  5. spring冲刺第六天

    昨天编写地图代码,完善地图界面,使其变得美观. 今天把地图界面初步完成,和其他团队成员的成果进行结合,整合人物和地图代码. 遇到的问题:在整合时遇到的问题比较多,今天没有整合成功.

  6. gdb调试器学习链接

    首先要带 -g 选项用gcc编译 常用指令:http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/gdb.html#gdb 带main的命令行参 ...

  7. 29_Java_数据库_第29天(JDBC、DBUtils)_讲义

    今日内容介绍 1.JDBC 2.DBUtils 01JDBC概念和数据库驱动程序 * A: JDBC概念和数据库驱动程序 * a: JDBC概述 * JDBC(Java Data Base Conne ...

  8. 由于MDK5.0A没有STM32F103程序错误 stm32f10x.h(298): error: #67: expected a "}"

    转自:http://blog.163.com/lby147612@126/blog/static/17041045220150130438428/ 由于MDK4.72A没有STM32F030,所以升级 ...

  9. source和sh

    写了一个脚本[xxyScript.sh],用于判断tomcat是否启动 #!/bin/bash if [ -z "$(ps -ef | grep tomcat | grep -v 'grep ...

  10. 11git更改提交

    .将不必要的文件add .上次提交觉得是错的 .不想改变暂存区内容,只是想调整提交的信息 .版本回滚 git reset HEAD 文件名 移除不必要的添加到暂存区的文件 git reset HEAD ...