JavaScript+Html 调用Wcf Rest Api接口

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



    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 doesnt 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-Typeapplication/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 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-Typeapplication/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>



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