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对象池。