AJAX的兼容使用

AJAX 全称为“Asynchronous JavaScript and XML ”（异步JavaScript 和XML ），是一种创建交互式网页应用的网页开发 技术。在web2.0时代，这一技术得到了广泛使用，它能够有效地提升用户体验。

最近几天在实现一个opsdb的wrapper时，我选择使用了这一技术，由于很长时间没有用Javascript编写代码了，预计两天写完的代码，硬是搞了四天时间。现在将需要注意的一些地方写出来。

1.创建xmlhttp对象

xmlhttp对象的创建对于不同的浏览器，方法是不一样的，为了兼容，你要处理多种情况，以下代码，我在IE8及Firefox3.6上运行没有问题。

function create_xmlhttp() {     var result = false;     try     {         result = new XMLHttpRequest();     }     catch (trymicrosoft)     {         try         {             result = new ActiveXObject("Msxml2.XMLHTTP");         }         catch (othermicrosoft)         {             try             {                 result = new ActiveXObject("Microsoft.XMLHTTP");             }             catch (failed)             {                 result = false;             }         }     }     return result; }

 

2.异步调用

异步调用是ajax最常使用的一种方式，以下是一段异步调用代码：

    request.open("GET", url, true);     request.setRequestHeader("If-Modified-Since","0");     request.onreadystatechange = parse_response_hosts;     request.send(null);

open的第三个参数用来标识这个调用是同步还是异步，true代表是异步，在异步调用时要在send方法前设置回调函数，回调函数是通过给onreadystatechange赋值一个函数名称来实现的，当然你也可以通过request.onreadystatechange =function(){回调处理逻辑}这种方式，以下是一个回调函数的实现：

function parse_response_hosts() {     if (request.readyState != 4) return;     if (request.status == 200)     {         var jsonobjs = JSON.parse(request.responseText);         hosts = new Array();         for(var obj in jsonobjs)         {             hosts.push(jsonobjs[obj]);         }         refresh_hosts_table();     }     else         show_error("API Error:" + request.status); }

request.readyState有多个值来标识不同的状态，每种状态都会通知回调函数，对各个值的定义如下：

0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loading) the send( ) method has been invoked, request in progress. 2: (Loaded) the send( ) method has completed, entire response received. 3: (Interactive) the response is being parsed. 4: (Completed) the response has been parsed, is ready for harvesting.

因为这段代码是对返回结果进行处理，所有只关心4状态。

3.同步调用

同步调用很简单，将open的第三个参数设置为false,但不同的浏览器对onreadystatechange的处理是不一样的，考虑到兼容，最好是将回调函数置为空，如以下代码：

request.open("GET", url, false); request.setRequestHeader("If-Modified-Since","0");

request.onreadystatechange = function(){}; request.send(null); parse_groups();

 

function parse_groups() {     if (request.status == 200)     {         groups = JSON.parse(request.responseText);         for (var i=0;i<groups.length;i++)         {             groups[i].id = groups[i].device_group_id;             groups[i].name = groups[i].device_group_name;             groups[i].owner = unescape(groups[i].owner);             groups[i].owner_bk = unescape(groups[i].owner_backup);         }     }     else          show_error("API Error:" + request.status); }

3.其它相关

ajax是不支持跨域访问的，最简单的办法是通过服务端封闭一下，当然还有很多其它办法，并行异步调用可以考虑xmlhttp对象池。