JavaScript+Html 调用Wcf Rest Api接口-

JavaScript+Html 调用Wcf Rest Api接口

添加时间:2013-6-13 点击量:

功能需求
公司应用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 doesnt 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 doesnt 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>

所有随风而逝的都属于昨天的，所有历经风雨留下来的才是面向未来的。—— 玛格丽特·米切尔《飘》

分享到：

相关文章

按版本划分

按功能划分

企业管理软件

JavaScript+Html 调用Wcf Rest Api接口