六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 196|回复: 0

兼容IE,FireFox,Chrome和Safari的Ajax

[复制链接]

升级  56%

6

主题

6

主题

6

主题

童生

Rank: 1

积分
28
 楼主| 发表于 2013-1-29 08:48:39 | 显示全部楼层 |阅读模式
自己封装的ajax方法,兼容IE,FireFox,Chrome,Fafari等浏览器。方法内包括http请求发送和返回responose xml接收。
  /*    author: linyang    date:  2012-01-30*/var myAjax = (function(){    /*        paramObj:{            url: request url,            method: GET or POST,            encode: character        }        return xmlDOMParser    */    var _send_synchronous = function(paramObj){            var url, method, encode,httpRequest,parser;            url = paramObj.url;            method = paramObj.method;            encode = paramObj.encode;            if(typeof method == 'undefined')                    method = 'GET';            if (window.ActiveXObject) {//IE                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");                } else {//FireFox,Chrome,Safari                    httpRequest = new XMLHttpRequest();                    }            httpRequest.open(method, url, false);            if(typeof encode != 'undefined')                httpRequest.setRequestHeader("Content-Type", "text/html;charset="+encode);            httpRequest.send();            if (window.ActiveXObject) {//IE                parser = new ActiveXObject("Microsoft.XMLDOM");                parser.async = false;                parser.load(httpRequest.responseXML);            } else if (document.implementation.createDocument) {                try {//FireFox                    parser = document.implementation.createDocument("", "", null);                    parser.async = false;                    parser = (new DOMParser()).parseFromString(httpRequest.responseText, "text/xml");                } catch(e) {//Chrome,Safari                    var xmlhttp = new window.XMLHttpRequest();                    xmlhttp.open("GET", httpRequest.responseText, false);                    xmlhttp.send(null);                    parser = xmlhttp.responseXML.documentElement;                }            }            return parser;        }    /*        paramObj:{            url: request url,            method: GET or POST,            encode: character,            param: post param,            isAsync: boolean,            parserHandler: function        }    */    var _send_ajax = function(paramObj){        var url,method,encode,httpRequest,param,isAsync,parser;        var parserHandler;            url = paramObj.url;            method = paramObj.method.toUpperCase();            encode = paramObj.encode;            if(method=='GET')                    param = null;                else if(method=='POST')                    param = paramObj.param;            isAsync = paramObj.isAsync;            parserHandler = paramObj.parserHandler;        if (window.ActiveXObject) {//IE                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");            } else {//FireFox,Chrome,Safari                    httpRequest = new XMLHttpRequest();                }        httpRequest.onreadystatechange = function(){                if(httpRequest.readyState==4){                    if(httpRequest.status==200){                        if (window.ActiveXObject) {//IE                                parser = new ActiveXObject("Microsoft.XMLDOM");                                parser.async = false;                                parser.load(httpRequest.responseXML);                            } else if (document.implementation.createDocument) {                                try {//FireFox                                    parser = document.implementation.createDocument("", "", null);                                    parser.async = false;                                    parser = (new DOMParser()).parseFromString(httpRequest.responseText, "text/xml");                                } catch(e) {//Chrome,Safari                                    var xmlhttp = new window.XMLHttpRequest();                                    xmlhttp.open("GET", httpRequest.responseText, false);                                    xmlhttp.send(null);                                    parser = xmlhttp.responseXML.documentElement;                                }                            }                            parserHandler.apply(parser,[]);                    }else{                        alert("远程服务调用失败!");                    }                }            }                httpRequest.open(method, url, isAsync);        if(typeof encode != 'undefined')            if(method=='GET')                    httpRequest.setRequestHeader("Content-Type", "text/html;charset="+encode);                else if(method=='POST')                    httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset="+encode);        httpRequest.send(param);    }    return {        sendSynchronize:_send_synchronous,        sendAjax:_send_ajax    }})();  
使用例子:(来源于某网上商店 ^ ^)
myAjax.sendAjax({url:"PointTransAction.do",method:'POST',encode:'GBK',param:"giftid=" + id + "&time=" + new Date(),isAsync:true,parserHandler:function(){var flag = this.getElementsByTagName('ret')[0].getAttribute('flag');var msg = this.getElementsByTagName('ret')[0].getAttribute('msg');if (flag == '0')//do something      elsealert(msg);}});
说明:1,myAjax这个小的JavaScript库对外提供了两个方法:sendSynchronize和sendAjax,但其实sendAjax才是称得上真正的ajax,因为sendSynchronize方法只支持同步,sendAjax可以通过isAsync设置是否使用异步调用。之所以写了sendSynchronize是为了纪念以前在宇宙行那段磕磕绊绊的日子吧。。。
      2,parserHandler为传入的回调函数,其中的this关键字是parser的引用。
      3,库中的两个方法对xml解析的时候使用的都是同步加载,如果要实现异步加载那么同样需要回调函数:IE下onreadystatechange事件,而FireFox下是onload事件。
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表