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 >

通過 為知筆記 發布