JavaScript+Html 调用Wcf Rest Api接口

功能需求
公司使用wcf rest搭建了一个服务，为了使不同网站客户能够访问这个服务，决定用最通用的javascript+html 嵌入到客户网站调用该服务。要求使用简单，数据格式为xml，并能兼容大部分浏览器（IE6-IE9、360、firefox、chrome）等
解决思路
使用javascript+ajax请求的方式，调用远程服务。遇到的主要问题是如何解决浏览器兼容问题，比如IE8+调用远程服务的时候会遇到跨域问题，程序中是通过创建ActiveXObject解决的，而不是标准的XMLHttpRequest
主要代码解释

IE浏览器，解决跨域访问问题


   function crossDomainIE() {
               // Use Microsoft XDR
               var xdr = new XDomainRequest();
               xdr.open("POST", url);
               xdr.onload = function () {
                   // XDomainRequest doesn't provide responseXml, so if you need it:
                   var dom = new ActiveXObject("Microsoft.XMLDOM");
                   dom.async = false;

                   displayData(xdr.responseText);
               };
               xdr.send(data);
           }
其它浏览器，默认无跨域问题

function noCrossDomain() {
               var xmlhttp = createXMLHttp();
               xmlhttp.open("POST", url);
               xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
               //xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
               xmlhttp.send(data);

               // Create the callback:
               xmlhttp.onreadystatechange = function () {
                   if (xmlhttp.readyState != 4) {
                       return; // Not there yet
                   }

                   if (xmlhttp.status != 200) {
                       return;
                   }
                   displayData(xmlhttp.responseText);
               }
           }
XML文本转换为Xml Dom也存在浏览器兼容问题

     function convertXml2Dom(xmlData) {
               if (window.ActiveXObject) {
                   //for IE
                   xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                   xmlDoc.async = "false";
                   xmlDoc.loadXML(xmlData);
                   return xmlDoc;
               } else if (document.implementation && document.implementation.createDocument) {
                   //for Others
                   parser = new DOMParser();
                   xmlDoc = parser.parseFromString(xmlData, "text/xml");
                   return xmlDoc;
               }
           }
解决firefox无法用innerText显示文本的问题1

//显示查询结果
        function displayData(resp) {
            var xmlObject = convertXml2Dom(resp);

            document.getElementById("lblAge").innerText = xmlObject.getElementsByTagName("Age")[0].childNodes[0].nodeValue;

            //相同值再次赋值给innerHTML是应为innerText在firefox中无效，暂不知道原因
            document.getElementById("lblAge").innerHTML = xmlObject.getElementsByTagName("Age")[0].childNodes[0].nodeValue;
        }

完整源代码

<script type="text/javascript">
        var url = "远程服务url地址";
        var data;

        window.onload = function () {
            //请求xml数据
            data = "\
                  <?xml version='1.0' encoding='utf-8'?>\
                  <xmlhttpuest>\
                    <FirstName>Chen</FirstName>\
                    <LastName>Fox</LastName>\
                   </xmlhttpuest>\
                 ";

            if (window.XDomainRequest) { //为了解决IE的跨域问题
                crossDomainIE();
            }
            else {
                noCrossDomain();
            }
        }

        //IE浏览器，解决跨域访问
        function crossDomainIE() {
            // Use Microsoft XDR
            var xdr = new XDomainRequest();
            xdr.open("POST", url);
            xdr.onload = function () {
                // XDomainRequest doesn't provide responseXml, so if you need it:
                var dom = new ActiveXObject("Microsoft.XMLDOM");
                dom.async = false;

                displayData(xdr.responseText);
            };
            xdr.send(data);
        }

        //其它浏览器，默认无跨域问题
        function noCrossDomain() {
            var xmlhttp = createXMLHttp();
            xmlhttp.open("POST", url);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
            xmlhttp.send(data);

            // Create the callback:
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState != 4) {
                    return; // Not there yet
                }

                if (xmlhttp.status != 200) {
                    return;
                }
                displayData(xmlhttp.responseText);
            }
        }

        //创建ajax http对象
        function createXMLHttp() {
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlhttp;
        }

        //将xml文本转换为xml dom
        function convertXml2Dom(xmlData) {
            if (window.ActiveXObject) {
                //for IE
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(xmlData);
                return xmlDoc;
            } else if (document.implementation && document.implementation.createDocument) {
                //for Others
                parser = new DOMParser();
                xmlDoc = parser.parseFromString(xmlData, "text/xml");
                return xmlDoc;
            }
        }

        //显示查询结果
        function displayData(resp) {
            var xmlObject = convertXml2Dom(resp);

            document.getElementById("lblAge").innerText = xmlObject.getElementsByTagName("Age")[0].childNodes[0].nodeValue;

            //相同值再次赋值给innerHTML是应为innerText在firefox中无效，暂不知道原因
            document.getElementById("lblAge").innerHTML = xmlObject.getElementsByTagName("Age")[0].childNodes[0].nodeValue;
        }
    </script>

通过为知笔记发布