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>

通过 为知笔记 发布