How to use the @rails/ujs.ajax function in @rails/ujs

clear() {
    App.dispatchEvent('#js-playlist-loader', 'loader:show');

    ajax({
      url: `/playlists/${this.playlistIdValue}/songs`,
      type: 'delete',
      dataType: 'script',
      data: 'clear_all=true',
      success: () => {
        App.dispatchEvent('#js-playlist-loader', 'loader:hide');

        if (this.isCurrentValue) {
          this.player.playlist.update([]);
          this.player.stop();
        }
      }
    });
  }

play(currentIndex) {
    if (this.playlist.length == 0) { return; }

    App.dispatchEvent(document, 'player:beforePlaying');

    const song = this.playlist.songs[currentIndex];
    this.currentIndex = currentIndex;
    this.currentSong = song;
    this.isPlaying = true;

    if (!song.howl) {
      ajax({
        url: `/songs/${song.id}`,
        type: 'get',
        dataType: 'json',
        success: (response) => {
          song.howl = new Howl({
            src: [response.url],
            format: [response.format],
            html5: true,
            onplay: () => { App.dispatchEvent(document, 'player:playing'); },
            onpause: () => { App.dispatchEvent(document, 'player:pause'); },
            onend: () => { App.dispatchEvent(document, 'player:end'); },
            onstop: () => { App.dispatchEvent(document, 'player:stop'); }
          });

          Object.assign(song, response);
          song.howl.play();

_initPlaylist() {
    ajax({
      url: '/current_playlist/songs?init=true',
      type: 'get',
      dataType: 'script'
    });
  }

add({ target, currentTarget }) {
    const { songId } = currentTarget.dataset;
    const { songCollectionId } = target.closest('[data-song-collection-id]').dataset;

    App.dispatchEvent('#js-dialog-loader', 'loader:show');

    ajax({
      url: `/playlist/${songCollectionId}`,
      type: 'put',
      data: `update_action=push&song_id=${songId}`,
      success: () => {
        App.dispatchEvent('#js-dialog', 'dialog:hide');
      }
    });
  }
}

_play(target) {
    const { songId } = target.closest('[data-song-id]').dataset;
    const playlistIndex = this.player.playlist.indexOf(songId);

    if (playlistIndex != -1) {
      this.player.skipTo(playlistIndex);
    } else {
      ajax({
        url: '/current_playlist/songs',
        type: 'post',
        data: `song_ids[]=${songId}`,
        success: () => {
          this.player.skipTo(this.player.playlist.pushSong(songId));
        }
      });
    }
  }

updateName() {
    const newName = this.nameInputTarget.value.trim();

    if (newName != this.nameTarget.innerText && newName != '') {
      this.nameTarget.innerText = newName;

      ajax({
        url: `/song_collections/${this.data.get('id')}`,
        type: 'put',
        data: `song_collection[name]=${newName}`
      });
    }

    this.nameTarget.classList.remove('hidden');
    this.nameInputTarget.classList.add('hidden');
  }

toggleFavorite() {
    if (!this.currentSong.howl) { return; }

    const isFavorited = this.currentSong.is_favorited;

    ajax({
      url: '/favorite_playlist/songs',
      type: isFavorited ? 'delete' : 'post',
      data: `song_ids[]=${this.currentSong.id}`,
      success: () => {
        this.favoriteButtonTarget.classList.toggle('u-text-color-red');
        this.currentSong.is_favorited = !isFavorited;
      }
    });
  }