Ajax创建对象以及不同浏览器中的兼容性

1.在传统得到web应用中，采用的都是同步的交互方式，为了等待服务器的响应，可能需要较长的时间，客户体验有时候很不好，而Ajax可以实现异步的交互方式。在交互较多，局部刷新和按需取数据（频繁读取数据和数据分类良好）的情况下使用比较频繁。但是也有自身的缺点，Ajax大量使用javascript和Ajax引擎，这需要浏览器的支持。但是各个浏览器提供的创建Ajax的方式不同，使得我们需要测试各个浏览器的兼容性，这一点比较麻烦。虽然代码比较长，但是固定的，可以单独摘出来。另一方面对于flash等还不支持Ajax，现在手机也不能使用，但是很明显，这只是现在不能，以后一定可以的~

2.在html页面触发js脚本的时候，js脚本根据我们相应的动作去执行php文件，执行后可能会获得一部分结果，而把这些结果再返回到js脚本中，再通过脚本当中的DOM组件直接反映在当前的html页面上，也就是说整个页面没有刷新，只是改变html页面上的某位置的内容。从而也减轻了服务器的压力。

3.创建Ajax对象XMLHttpRequest.由于各个浏览器的创建方式不同，所以我们写一个可以兼容各个浏览器的方法，在方法里我们实现各个浏览器中Ajax对象的创建。

在实现这个以前，我们先简单的分析一下，当前的浏览器分为IE浏览器(（IE5.0 IE5.5 IE6.0, IE7 IE8）)和非IE浏览器(按照W3C标准:FF Mozilla NetScape)两种，但是呢IE浏览器的版本不同在创建Ajax的对象时也不相同，所以Ajax对象的创建种类比较多。

 1 <script type="text/javascript">
 2 function createXMLHttpRequest(){
 3         var request = false;
 4         //一般先判断非IE浏览器
 5         //window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
 6         if(window.XMLHttpRequest){
 7             request=new XMLHttpRequest();//非IE以及IE7，IE8浏览器
 8             if(request.overrideMimeType){
 9                 request.overrideMimeType("text/xml");//重置mime类型
10             }
11         //window对象中有ActiveXObject属性存在就是IE浏览器的低版本
12     }else if(window.ActiveXObject){
13         var versions = ['Microsoft.XMLHTTP',
14                     'MSXML.XMLHTTP',
15                     'Msxml2.XMLHTTP.7.0',
16                     'Msxml2.XMLHTTP.6.0',
17                     'Msxml2.XMLHTTP.5.0', 
18                     'Msxml2.XMLHTTP.4.0', 
19                     'MSXML2.XMLHTTP.3.0', 
20                     'MSXML2.XMLHTTP'];//各种IE浏览器创建Ajax对象时传递的参数
21               for(var i=0; i<versions.length; i++){
22                     try{
23                         request=new ActiveXObject(versions[i]);//各个IE浏览器版本的参数不同
24                         if(request){
25                             return request;
26                         }
27                     }catch(e){
28                         request=false;
29                     }
30                }
31         }
32          return request;
33     }
34 // 注意：必须把创建ajax对象的代码放在show函数里，确保每次点击的时候都创建一个新的ajax对象。
35 var ajax = null;
36 function show(){
37    ajax = createXMLHttpRequest();
38    alert(ajax);
39 }
40 </script>
41 
42 <input type="button" onclick="show();" value="request"/>