How can I replace "fetch" with "ajax" method in JavaScript?

Question

I'm trying to wrap my head around ajax now that this is using fetch to retrieve the data. The syntax is the same roughly, but was curious as to what it would look like.

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="searchContainer">
        <input class="searchControl" type="text" placeholder="City Name or Zipcode" id="searchInput">
        <button class="searchControl" id="searchBtn">Search</button>
    </div>
    <div id="weatherContainer">
        <div id="weatherDescription">
            <h1 id="cityHeader"></h1>
            <div id="weatherMain">
                <div id="temperature"></div>
                <div id="weatherDescriptionHeader"></div>
                <div><img id="documentIconImg"></div>
            </div>
            <hr>
            <div id="windSpeed" class="bottom-details"></div>
            <div id="humidity" class="bottom-details"></div>
        </div>
    </div>
    <script src="script.js" ></script>
</body>

---

Here is the JavaScript I'd like to convert from using the fetch method, to using an AJAX call in place of it.

---
let appId = 'b1e22f9b3891a9a6fc389e3e1a4cc496';
let units = 'imperial'; 
let searchMethod; 

function getSearchMethod(searchTerm) {
    if(searchTerm.length === 5 && 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}&APPID=${appId}&units=${units}`)
        .then((result) => {
            return result.json();
        }).then((res) => {
            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) + '&#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', () => {
    let searchTerm = document.getElementById('searchInput').value;
    if(searchTerm)
        searchWeather(searchTerm);
});

What you are looking for is called polyfill. See this one : github.com/github/fetch — Mister Jojo
– Mister Jojo, Commented Dec 24, 2019 at 3:35

Nimantha · Accepted Answer · 2025-08-21 12:43:19Z

fetch and $.ajax are different routes to the same destination. They both loosely behave like XMLHttpRequest..

I would recommend sticking with fetch since is is widely supported by default, is easier to use than XMLHttpRequest, and does not require any third party libraries. To use $.ajax, (as far as I am aware) you have to import jQuery - which imports a lot of unnecessary code along with $.ajax. If you can do things without a third party library, you should.

With that being said, using $.ajax would look something like this:

SPECIFIC FUNCTION:

function searchWeather(searchTerm) {
  getSearchMethod(searchTerm);
  $.ajax({
    url: `https://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`,
    success: (data) => {
      init(data);
    },
    failure: (err) => {
      console.log("ERROR!", err);
    }
  });
}

DEMO:

let appId = "b1e22f9b3891a9a6fc389e3e1a4cc496";
let units = "imperial";
let searchMethod;

function getSearchMethod(searchTerm) {
  if (searchTerm.length === 5 && Number.parseInt(searchTerm) + "" === searchTerm)
    searchMethod = "zip";
  else searchMethod = "q";
}

function searchWeather(searchTerm) {
  getSearchMethod(searchTerm);
  $.ajax({
    url: `https://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`,
    success: (data) => {
      init(data);
    },
    failure: (err) => {
      console.log("ERROR!", err);
    }
  })
    /*
    fetch(`https://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`)
    .then(result => {
      return result.json();
    })
    .then(res => {
      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) + "&#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", () => {
  let searchTerm = document.getElementById("searchInput").value;
  if (searchTerm) searchWeather(searchTerm);
});

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="searchContainer">
    <input class="searchControl" type="text" placeholder="City Name or Zipcode" id="searchInput">
    <button class="searchControl" id="searchBtn">Search</button>
  </div>
  <div id="weatherContainer">
    <div id="weatherDescription">
      <h1 id="cityHeader"></h1>
      <div id="weatherMain">
        <div id="temperature"></div>
        <div id="weatherDescriptionHeader"></div>
        <div><img id="documentIconImg"></div>
      </div>
      <hr>
      <div id="windSpeed" class="bottom-details"></div>
      <div id="humidity" class="bottom-details"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

Collectives™ on Stack Overflow

How can I replace "fetch" with "ajax" method in JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related