title: How to replace "fetch" with "ajax" method in javascript?
body: <p>I'm trying to wrap my head around ajax now that this is using fetch to retreive the data. 
  The syntax is the same roughly, but was curious as to what it would look like.</p>
  
  <hr>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="searchContainer"&gt;
          &lt;input class="searchControl" type="text" placeholder="City Name or Zipcode" id="searchInput"&gt;
          &lt;button class="searchControl" id="searchBtn"&gt;Search&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="weatherContainer"&gt;
          &lt;div id="weatherDescription"&gt;
              &lt;h1 id="cityHeader"&gt;&lt;/h1&gt;
              &lt;div id="weatherMain"&gt;
                  &lt;div id="temperature"&gt;&lt;/div&gt;
                  &lt;div id="weatherDescriptionHeader"&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;img id="documentIconImg"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div id="windSpeed" class="bottom-details"&gt;&lt;/div&gt;
              &lt;div id="humidity" class="bottom-details"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="script.js" &gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <h2></h2>
  
  <p>Here is the JavaScript I'd like to convert from using the fetch method, to using an AJAX call in place of it.</p>
  
  <pre><code>---
  let appId = 'b1e22f9b3891a9a6fc389e3e1a4cc496';
  let units = 'imperial'; 
  let searchMethod; 
  
  function getSearchMethod(searchTerm) {
      if(searchTerm.length === 5 &amp;&amp; Number.parseInt(searchTerm) + '' === searchTerm)
          searchMethod = 'zip';
      else 
          searchMethod = 'q';
  }
  
  function searchWeather(searchTerm) {
      getSearchMethod(searchTerm);
      fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&amp;APPID=${appId}&amp;units=${units}`)
          .then((result) =&gt; {
              return result.json();
          }).then((res) =&gt; {
              init(res);
      });
  }
  
  function init(resultFromServer) {
      switch (resultFromServer.weather[0].main) {
          case 'Clear':
              document.body.style.backgroundImage = "url('clear.jpg')";
              break;
  
          case 'Clouds':
              document.body.style.backgroundImage = "url('cloudy.jpg')";
              break;
  
          case 'Rain':
          case 'Drizzle':
          case 'Mist':
              document.body.style.backgroundImage = "url('rain.jpg')";
              break;
  
          case 'Thunderstorm':
              document.body.style.backgroundImage = "url('storm.jpg')";
              break;
  
          case 'Snow':
              document.body.style.backgroundImage = "url('snow.jpg')";
              break;
  
          default:
              break;
      }
  
      let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader');
      let temperatureElement = document.getElementById('temperature');
      let humidityElement = document.getElementById('humidity');
      let windSpeedElement = document.getElementById('windSpeed');
      let cityHeader = document.getElementById('cityHeader');
  
      let weatherIcon = document.getElementById('documentIconImg');
      weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png';
  
      let resultDescription = resultFromServer.weather[0].description;
      weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);
      temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&amp;#176;';
      windSpeedElement.innerHTML = 'Winds at  ' + Math.floor(resultFromServer.wind.speed) + ' m/s';
      cityHeader.innerHTML = resultFromServer.name;
      humidityElement.innerHTML = 'Humidity levels at ' + resultFromServer.main.humidity +  '%';
  
      setPositionForWeatherInfo();
  }
  
  function setPositionForWeatherInfo() {
      let weatherContainer = document.getElementById('weatherContainer');
      let weatherContainerHeight = weatherContainer.clientHeight;
      let weatherContainerWidth = weatherContainer.clientWidth;
  
      weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`;
      weatherContainer.style.top = `calc(50% - ${weatherContainerHeight/1.3}px)`;
      weatherContainer.style.visibility = 'visible';
  }
  
  document.getElementById('searchBtn').addEventListener('click', () =&gt; {
      let searchTerm = document.getElementById('searchInput').value;
      if(searchTerm)
          searchWeather(searchTerm);
  });
  ---
  </code></pre>
  
  <p>If anyone has any ideas or knows a solution that 100% works feel free to share. Not sure what to do.</p>