JavaScript+Html 调用Wcf Rest Api接口

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

通过 为知笔记 发布