Ajax系列之XMLHttpRequest对象

Ajax系列开篇----有兴趣的同学可以看看《Ajax实战：实例详解》

 

简单记录，个人学习。

 

1. Ajax的名片

 

• Asynchronous JavaScript and XML (异步JavaScript和XML)。
• 是Jesse James Gaiiett创造的名词，是指一种创建交互式的网页应用的网页开发技术。

2. Ajax的优势

• Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

• 使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信，这样可在不重载页面的情况与Web服务器进行数据的交换。

• 在浏览器与Web服务器之间使用异步数据传输（HTTP请求），使网页从服务器请求少量的信息，而不是整个页面。（其实简单通俗地讲就是局部刷新，非全屏刷新）

3. 开发模式

• Ajax开发和传统的CS开发有不同，最大的问题在于易用性。由于Ajax依赖浏览器的JavaScript和XML，浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要。

• Ajax开发人员需要理解传统的MVC架构，也需要考虑CS环境的外部和使用Ajax技术来重定型MVC边界。

• Ajax开发人员必须禁止以页面集合的方式来考虑Web应用而需要将认为是单个页面

     一些常识性的东西就简单地介绍到这里，有兴趣的同学可以看看文章后面的链接还有我推荐的那本书，或者差异网上的各种资料。

下面我要重点说明的是XMLHttpRequest。

1 . 什么是XMLHttpRequest对象？

    ------------它是用于在后台与服务器交换数据。

    XMLHttpRequest对象在大部分浏览器上已经实现而且拥有了一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议XML格式的数据。

2. 如何创建XMLHttpRequest对象？

   我先讲一下我的创建思路是这样的，我会展示一些框架封装的创建过程例如jQuery，也会直接贴出一些网上人自己总结的版本，让大家在学习或者编写自己脚本库的时候参考一下。

/*
创建的过程主要还是浏览器的兼容问题
IE浏览器的多个版本
FF和其他原生支持XMLHttpRequest
*/
function createXMLHttpRequest(){
       var xmlrequest;
       //判断语句创建
       if(window.XMLHttpRequest){
          xmlrequest = new XMLHttpRequest();
           }else{
          //各个版本考虑进去
         var MXML = ["MSXML2.XMLHTTP.7.0","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0"，

"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
          //for循环
          for(var i = 0;i<MXML.length;i++){
               try{
                      xmlrequest = new ActiveXObject(MXML[i]);
                      break;
                  }catch(e){}
         }
    }
}

 

可能有的人看到上面的代码就烦躁了，呵呵，我打的也酸啊。如果是我的话，我能不用判断语句的话就不用（I mean if...）

回来看看JQuery的创建过程。你会发现差距就出现了。

//先看一个早期的版本1.3.1
//源码地址http://code.jquery.com/jquery-1.3.1.js
//抽取其中的一段

/*Create the request object;Microsoft failed to properly(正确)
   implement(实现) the XMLHttpRequest in IE7,so we use the ActiveXObject       when it is available（可用）
*/
xhr:function(){
      return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();   
}

 

再来一个版本

/*
这是1.4.1的版本
地址 http://code.jquery.com/jquery-1.4.1.js
*/
xhr  : window.XMLHttpRequest && (window.location.protocol !== "file:"
                 || !window.ActiveXObject) 
             ? function(){return new window.XMLHttpRequest();
             } : 
                function(){
                       try{
                          return new window.ActiveXObject("Microsoft.XMLHTTP");
                     }catch(e){}
                  }

 我们停一下，如果是你，你会对这段代码进行怎样的重构？？

/*
1.4.4的版本
*/
if(window.ActiveXObject){
     jQuery.ajaxSettings.xhr = function(){
                   if(window.location.protocol !== "file:"){
                           try{
                                     return new window.XMLHttpRequest();
                                  }catch(e){}
                    }
                   try{
                         return new window.ActiveXObject("Microsoft.XMLHTTP")；
                    }catch(e){}
           }
}

 

其实当初在研究这个版本差异的api的时候，1.4.4的版本的写法让我有点诧异，如果是我去做这个重构的话，我可能选择的还是直接到下面这个版本。

/*
版本为1.5.1
*/
jQuery.ajaxSettings.xhr = window.ActiveXObject ? 
         function(){ 
         return !this.isLocal && createStandardXHR() ||  createActiveXHR() ;    
          } :  createStandardXHR;

function createStandardXHR() {
	try {
		return new window.XMLHttpRequest();
	} catch( e ) {}
}

function createActiveXHR() {
	try {
		return new window.ActiveXObject( "Microsoft.XMLHTTP" );
	} catch( e ) {}
}

 var rlocalProtocol = /(?:^file|^widget|\-extension):$/,
       ajaxLocParts,
       rurl = /^([\w\+\.\-]+:)\/\/([^\/?#:]*)(?::(\d+))?/;
       ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() );
 function isLocal {
  rlocalProtocol.test( ajaxLocParts[ 1 ] )
}           

 

当然有兴趣挖掘和研究技术的同学可用看看，很多人在研究jQuery源码的时候可能是按照某一个特定的版本，我个人觉得，如果你是基于jQuery做一套框架的话，你可用性能调研选择一个稳定的版本，但是如果你做某一个api的调研，你可用查看各个版本的差异， 这样你会发现重构了那些？思考一下为什么这么做？如果是你你会咋改？

说的好多。希望能帮助到大家学习。

参考资料如下

1. http://baike.baidu.com/view/1641.htm

2. http://tech.163.com/special/00091SVT/ajax.html

3. http://www.w3school.com.cn/xml/xml_http.asp

4. http://www.w3school.com.cn/xmldom/index.asp