Javascript ile Web Servis Tüketmek

17.Eylül.2007 Javascript Web Service

Geçenlerde bir soru üzerine araştırırken yaptığım örnek. Javascript ve saop ile web servisini server-side yapı olmadan Html sayfasında göstermek.

<html>
<head>
   <title>Javascript ile Web Servis Tüketmek</title>
   <script>
   var xmlhttp;
   function get()
   {
      var city = document.getElementById('city').value;
      xmlhttp=N';
      try
      {
         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch(e)
      {
         try
         {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch(oc)
         {
            xmlhttp=N';
         }
      }
      if(!xmlhttp&&typeof XMLHttpRequest!="undefined")
      {
         xmlhttp=new XMLHttpRequest();
      }
      if (xmlhttp!=N')
      {
         xmlhttp.onreadystatechange=state_Change; 
         xmlhttp.open("POST", "http://www.webservicex.net/WeatherForecast.asmx?op=GetWeatherByPlaceName", true);
         xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
         xmlhttp.setRequestHeader("SOAPAction", "http://www.webservicex.net/GetWeatherByPlaceName");
         var text = '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body>';
         text += '<GetWeatherByPlaceName xmlns="http://www.webservicex.net"><PlaceName>' + city + '</PlaceName></GetWeatherByPlaceName>';
         text += '</soap:Body></soap:Envelope>';
         xmlhttp.send(text);
      }
      else
      {
         document.getElementById('dvResult').innerHTML ="Your browser does not support XMLHTTP.";
      }
   }
   function state_Change()
   {
      document.getElementById("picture").style.display = 'inline';
      if (xmlhttp.readyState == 4) 
      { 
         document.getElementById('status').innerHTML = 'OK!';
         document.getElementById("picture").style.display = 'none';
         var nodes = xmlhttp.responseXML.getElementsByTagName("WeatherData");
         var htmlR = '';
         htmlR = '<table border=1>';
         htmlR += '<tr>';
         htmlR += '<th>Day</th><th>WeatherImage</th><th>MaxTemperatureC</th><th>MinTemperatureC</th>';
         htmlR += '</tr>';
      for(var i = 0;i<nodes.length;i++)
      {
         try
         {
            htmlR += '<tr>';
            htmlR += '<td>' + nodes[i].childNodes.item(0).text + '</td>';
            htmlR += '<td><img src=' + nodes[i].childNodes.item(1).text + ' /></td>';
            htmlR += '<td>' + nodes[i].childNodes.item(4).text + '</td>';
            htmlR += '<td>' + nodes[i].childNodes.item(5).text + '</td>';
            htmlR += '</tr>';
         }
         catch(e)
         {
            ;
         }
      }
      htmlR += '</table>';
      document.getElementById('dvResult').innerHTML = htmlR;
      }
   }
   </script>
</head>
<body>
   <b>Şehir :</b>
   <input type="text" id="city" value="alabama" />
   <input type="button" value="Hava Durumu" onclick="get()" />
   <br />
   <div id="dvResult">
   </div>
   <img alt="wait" src="circle.gif" id="picture" style="display: none;" />
   <span id="status"></span>
   <br />
</body>
</html>

Yorum Yaz