Fetch API VS Axios VS Jquery AJAX

Dari post sebelumnya https://bayuprn.com/2025/06/optimalisasi-performa-entity-framework-pada-aplikasi-web/ kita telah belajar bagaimana mengoptimalakan akses ke database menggunakan Entity framework dan menampilkan nya dengan Ajax.

Fungsi Ajax yang kita gunakan selama ini membantu kita mengakses data dari remote server yang ada di server web. Banyak yang menggunakan object XMLHttpRequest/XHR karena masalah kompatibilitas dengan browser versi lama, namun banyak juga yang menggunan library Ajax dari Jquery. Meski demikian masih ada alternatif lain menggunakan Fetch API ataupun menggunakan Axios.

XMLHttpRequest

XMLHttpRequest merupakan library native yang hadir di internet explorer sejak tahun 2000. Karena native, library ini selalu ada dan tidak perlu adanya instalasi / penambahan library external. XMLHttpRequest ini memungkinkan kode javascript mengambil data dari remote server tanpa perlu melakukan loading/refresh seluruh halaman. Library ini merupakan base library utama untuk membuat request HTTP dan mendukung model request sinkronus maupun asinkronus. XMLHttpRequest mendukung transformasi response tapi secara manual dengan mengisi responseType dengan value seperti text, json, blob, xml. Library ini menggunakan model event drivent tradisional dan callback seperti event onload, onerror, onreadystatechanged, dan lain lain untuk menghandle event event error atau sukses dari request HTTP yang dibuat.

JQuery AJAX

JQuery Ajax merupakan library untuk membuat http request di javascript yang dibangun dari library JQuery. Jquery AJAX $.ajax dibangun di atas XHR/XMLHttpRequest dan tidak native, yang artinya sangat bergantung terhadap library javascript jquery/harus ada penambahan library eksternal di web. Library ini menyederhanakan penggunaan ajax sehingga bisa lebih simple. Kita harus menentukan response tipe dari hasil request secara manual dengan menyertakan parameter dataType berisis json, text, atau blob. Library ini menggunakan model callback untuk menghandle event ketika sukses atau error.

Fetch API

Fetch API merupakan fungsi native browser yang disediakan untuk membuat request HTTP ke remote server namun dengan model Promise-based. Fetch API dapat dipanggil dengan memanggil fungsi fetch. Fetch API disediakan di browser modern untuk mendukung model async yang mendukung Promise javascript dan tidak perlu lagi menggunakan model callback. Fetch API mengembalikan hasil berupa response object yang dapat dicek statusnya secara manual apakah OK dan status code nya. Response object ini memiliki body berupa stream dan harus diconvert dahulu ke dataType yang sesuai dengan memanggil function json() atau text() barulah dihasilkan data json yang dihasilkan oleh remote server. Karena library ini native, maka tidak perlu lagi ada library external tambahan yang harus digunakan.

AXIOS

Axios merupakan library external yang menyediakan fungsi untuk membuat request HTTP dengan model Promise-based. Tidak seperti Fetch API, AXIOS ini harus ditambahkan dengan menginclude library axios di situs web yang dibuat dikarenakan bukan native library. Kelebihan Axios adalah pada status code checking yang otomatis dan tipe data convertion yang otomatis, sehingga tidak perlu melakukan pengecekan status code manual dan bisa langsung menerima hasil dengan type json. Selain itu, Axios menyediakan fitur seperti request response interceptors dan cancellation of requests.

CONTOH LISTING CODE

Mari kita buat aplikasi yang mengirimkan request dengan menggunakan ke empat model library ajax tersebut.

Pertama , kita buat terlebih dahulu database dan tabel yang diperlukan. Kita buat tabel Produk di basis data MSSQL

IF  EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[Produk]') AND type in (N'U'))
DROP TABLE [Produk]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [Produk](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[KodeProduk] [varchar](20) NULL,
	[NamaProduk] [varchar](100) NULL,
	[Harga] [decimal](18, 2) NULL,
	[Deskripsi] [varchar](100) NULL,
	[Jenis] [varchar](50) NULL,
	[IsDelete] [bit] NULL,
 CONSTRAINT [PK_Produk] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [Produk] ON 
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (1, N'SS1', N'SOSIS SOLO', CAST(4000.00 AS Decimal(18, 2)), N'SOSIS SOLO GORENG', N'GORENG', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (2, N'SS2', N'SOSIS BASAH', CAST(4000.00 AS Decimal(18, 2)), N'SOSIS BASAH ISIAN AYAM CINCANG', N'BASAH-AYAM', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (3, N'SS3', N'SOSIS BASAH', CAST(4000.00 AS Decimal(18, 2)), N'SOSIS BASAH ISIAN DAGING SAPI CINCANG', N'BASAH-SAPI', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (4, N'NS1', N'NASI KUNING', CAST(15000.00 AS Decimal(18, 2)), N'NASI KUNING + TELOR', N'TELOR', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (5, N'NS2', N'NASI KUNING', CAST(20000.00 AS Decimal(18, 2)), N'NASI KUNING TELOR + PERKEDEL + KOMPLIT KRUPUK TAHU TEMPE', N'KOMPLIT', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (6, N'CM1', N'CIMOL', CAST(10000.00 AS Decimal(18, 2)), N'CIMOL BOJOT MOJARELA', N'MOZARELA', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (7, N'CM2', N'CIMOL', CAST(10000.00 AS Decimal(18, 2)), N'CIMOL BOJOT PEDAS', N'PEDAS', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (8, N'CM3', N'CIMOL', CAST(10000.00 AS Decimal(18, 2)), N'CIMOL BOJOT EXTRA PEDAS', N'PEDASLV2', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (9, N'CM4', N'CIMOL', CAST(10000.00 AS Decimal(18, 2)), N'CIMOL BOJOT SUPER PEDAS', N'PEDASLV10', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (10, N'SM1', N'SIOMAY', CAST(10000.00 AS Decimal(18, 2)), N'SIOMAY CAMPUR', N'CAMPUR', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (11, N'SM2', N'SIOMAY', CAST(15000.00 AS Decimal(18, 2)), N'SIOMAY CAMPUR LENGKAP + TELOR', N'KOMPLIT', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (12, N'SM3', N'BATAGOR', CAST(10000.00 AS Decimal(18, 2)), N'BATAGOR GORENG', N'BATAGOR', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (13, N'CM5', N'CIMOL', CAST(10000.00 AS Decimal(18, 2)), N'CIMOL BOJOT BUMBU BARBEQUE', N'BARBEQUE', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (14, N'GR1', N'GORENGAN CAMPUR', CAST(10000.00 AS Decimal(18, 2)), N'GORENGAN CAMPUR TAHU BAKWAN TEMPE CIRENG MOLEN', N'CAMPUR', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (15, N'GR2', N'TAHU HOT JELETOT', CAST(5000.00 AS Decimal(18, 2)), N'TAHU HOT JELETOT ISI PEDAS 1 PCS', N'JELETOT', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (16, N'GR3', N'TAHU JELETOT ISI SAYUR', CAST(5000.00 AS Decimal(18, 2)), N'TAHU ISI JELETOT ISI SAYUR TIDAK PEDAS 1 PCS', N'SAYUR', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (17, N'GR4', N'TAHU KRISPI', CAST(10000.00 AS Decimal(18, 2)), N'TAHU KRISPI BUMBU', N'KRISPI', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (18, N'GR5', N'OTAK OTAK KRISPI', CAST(10000.00 AS Decimal(18, 2)), N'OTAK OTAK KRISPI BUMBU', N'OTAK', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (19, N'GR6', N'TAHU BULAT', CAST(10000.00 AS Decimal(18, 2)), N'TAHU BULAT BUMBU', N'TAHUBULAT', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (20, N'GR7', N'GORENGAN SOTONG', CAST(10000.00 AS Decimal(18, 2)), N'GORENGAN SOTONG - TAHU BULAT', N'SOTONG', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (21, N'BS1', N'BAKSO KOMPLIT', CAST(15000.00 AS Decimal(18, 2)), N'BAKSO KOMPLIT', N'BAKSO', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (22, N'BS2', N'MIE AYAM', CAST(15000.00 AS Decimal(18, 2)), N'MIE AYAM PANGSIT', N'MIEAYAM', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (23, N'BS3', N'MIE YAMIN', CAST(15000.00 AS Decimal(18, 2)), N'MIE YAMIN PANGSIT', N'MIEYAMIN', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (24, N'NS3', N'NASI GORENG', CAST(12000.00 AS Decimal(18, 2)), N'NASI GORENG', N'NASIGORENG', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (25, N'NS4', N'NASI GORENG TELOR', CAST(18000.00 AS Decimal(18, 2)), N'NASI GORENG+TELOR', N'NASGORTELOR', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (26, N'NS5', N'NASI GORENG ATI AMPELA', CAST(22000.00 AS Decimal(18, 2)), N'NASI GORENG ATI AMPELA', N'NASGORATIAMPELA', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (27, N'NS6', N'NASI GORENG BAKSO', CAST(20000.00 AS Decimal(18, 2)), N'NASI GORENG BAKSO/SOSIS', N'NASGORBAKSO', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (28, N'NS7', N'KWETIAUW GORENG', CAST(15000.00 AS Decimal(18, 2)), N'KWETIAUW GORENG', N'KWETIAUW', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (29, N'NS8', N'BIHUN GORENG', CAST(15000.00 AS Decimal(18, 2)), N'BIHUN GORENG', N'BIHUN', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (30, N'NS9', N'MI GORENG TELOR', CAST(15000.00 AS Decimal(18, 2)), N'MI GORENG DENGAN TELOR', N'MIGORENG', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (31, N'NS10', N'MI KUAH REBUS', CAST(15000.00 AS Decimal(18, 2)), N'MI KUAH REBUS DENGAN TELOR', N'MIREBUS', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (32, N'BK1', N'BAKARAN SOSIS', CAST(4000.00 AS Decimal(18, 2)), N'SOSIS BAKAR', N'SOSIS', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (33, N'BK2', N'BAKARAN SOSIS JUMBO', CAST(8000.00 AS Decimal(18, 2)), N'SOSIS JUMBO BAKAR', N'SOSISJUMBO', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (34, N'BK3', N'BAKARAN FISHBALL', CAST(3000.00 AS Decimal(18, 2)), N'BAKSO IKAN BAKAR', N'FISHBALL', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (35, N'BK4', N'BAKARAN BAKSO ', CAST(15000.00 AS Decimal(18, 2)), N'BAKSO JUMBO BAKAR', N'BAKSOJUMBO', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (36, N'BK5', N'BAKARAN FISH DUMPLING', CAST(12000.00 AS Decimal(18, 2)), N'FISH DUMPLING/OTAK OTAK SINGAPORE BAKAR', N'FISHDUMPLING', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (37, N'BK6', N'BAKARAN SCALLOP', CAST(3000.00 AS Decimal(18, 2)), N'SCALLOP BAKAR', N'SCALLOP', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (38, N'BK7', N'BAKARAN CHIKUWA', CAST(3000.00 AS Decimal(18, 2)), N'CHIKUWA BAKAR', N'CHIKUWA', NULL)
GO
INSERT [Produk] ([Id], [KodeProduk], [NamaProduk], [Harga], [Deskripsi], [Jenis], [IsDelete]) VALUES (39, N'BK8', N'BAKARAN NUGGET', CAST(3000.00 AS Decimal(18, 2)), N'NUGET AYAM BAKAR', N'NUGGET', NULL)
GO
SET IDENTITY_INSERT [Produk] OFF
GO

Selanjutnya kita generate Entity Framework DB Context dengan perintah berikut

Scaffold-DbContext -Connection "Data Source=.\MSSQL2022;Initial Catalog=LABDB;Persist Security Info=True;Integrated Security=true;MultipleActiveResultSets=False;Encrypt=False;TrustServerCertificate=False;Connection Timeout=30;" -Provider "Microsoft.EntityFrameworkCore.SqlServer" -OutputDir "Entities" -ContextDir "Context" -Context "RepositoryDBContext" -Schemas "dbo"  -DataAnnotations -UseDatabaseNames -Force -Namespace "EF.Entities" -ContextNamespace "EF.AppDbContext"

Selanjutnya dari project asp.net core mvc yang kita buat, buka file HomeController. Kemudian kita buat endpoint Rest API dengan menggunakan mvc controller yang berfungsi untuk mengambil data produk menggunakan AJAX. Tambahkan Action GetListProduk dengan kode program sebagai berikut


        public IActionResult GetListProduk(int pageIndex = 0, int pageSize = 10)
        {
            var startTime = DateTime.Now;
            try
            {
                using (var dbContext = new RepositoryDBContext())
                {

                    var queryableResult = dbContext.Produks.Where(m => m.IsDelete != true).AsQueryable();

                    int countTotal = queryableResult.Count();
                    int maxPage = (int)Math.Ceiling((1.0*countTotal) / (1.0*pageSize)) ;
                    var queryable = queryableResult.Skip(pageIndex * pageSize).Take(pageSize).AsQueryable();
                    var pagedresult = queryable.ToList();

                    var endTime = DateTime.Now;
                    var elapsedTime = (endTime - startTime).TotalMilliseconds;

                    return this.Json(new
                    {
                        IsSuccess = true,
                        Message = "Success",
                        Results = pagedresult,
                        CurrentPageIndex = pageIndex,
                        CurrentPageSize = pageSize,
                        TotalRows = countTotal,
                        MaxPageCount = maxPage,
                        TimeElapsed = elapsedTime
                    });

                }
            }
            catch (Exception ex)
            {
                return this.Json(new
                {
                    IsSuccess = false,
                    Message = $"Error : {ex.Message} {ex.InnerException?.Message}"
                });
            }
        }

Buka file index.cshtml yang berada di lokasi folder Views/Home/index.cshtml , dan lakukan perubahan berikut ini

Berikut adalah fungsi untuk melakukan Ajax menggunakan JQuery

function gotoPageJquery(idx){
    var pageIndex = idx<0?0:idx;
    var pageSize = 10;
    $.ajax({
        url: `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`,
        dataType: 'json',
        method: "POST",
        success: function (result, status, xhr) {
            console.log('Response: ', result);
            if (result != null ) {
                renderGrid(result);
                return;
            }
            else {
                renderGrid(null, e);
                return;
            }
        },
        error: function (e) {
            renderGrid(null, e);
            return;
        },
    });
}

Berikut adalah fungsi untuk melakukan Ajax menggunakan FETCH API


    function gotoPageFetch(idx){
        var pageIndex = idx<0?0:idx;
        var pageSize = 10;

        var url1 = `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`;
        var options = {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            }
        };

        fetch( url1, options)
            .then((response)=>{
                console.log('Response: ', response);
                if(!response.ok){
                    throw new Error(`Response status: ${response.status}`);
                }
                else{
                    return response.json();                    
                }
            })
            .then((response) =>{                
                renderGrid(response);
            })
            .catch((e)=>{
                 renderGrid(null, e);
            });
    }

Berikut adalah fungsi untuk melakukan Ajax menggunakan AXIOS library

  function gotoPageAxios(idx){
      var pageIndex = idx<0?0:idx;
      var pageSize = 10;

      var url2 = `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`;
      axios.post(url2)
          .then((response) =>{
              console.log('Response: ', response);
              if(response.status != 200){
                  throw new Error(`Response status: ${response.status} ${response.statusText}`);
              }
              var result = response.data;
              renderGrid(result);
          })
          .catch((e)=>{
               renderGrid(null, e);
          });
  }

Dan berikut adalah fungsi Ajax menggunakan XMLHttpRequest yang native di browser

 function gotoPageXHR(idx){
     var pageIndex = idx<0?0:idx;
     var pageSize = 10;
      
     // for backward compatible older browser
     var url3 =  `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`;
     var req = new XMLHttpRequest();
     req.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             console.log('Response: ', req);
            // Typical action to be performed when the document is ready:
            var result = req.response;
             renderGrid(result);
         }
     };
     req.onerror = (e) => {
          renderGrid(null, e);
     };
     req.open("POST", url3, true);
     req.responseType = "json";
     req.send();
 }

Pengguna akan dapat memilih fungsi mana yang digunakan untuk mengambil data dengan kode berikut

 function gotoPage(idx){
     var ajxCallMode = $('input[name=rbMode]:checked').val();
     console.log('Call mode: ',ajxCallMode);
     if(ajxCallMode=='Axios'){
         gotoPageAxios(idx);
     }
     else if(ajxCallMode=='Fetch'){
         gotoPageFetch(idx);
     }
     else if(ajxCallMode=='XHR'){
         gotoPageXHR(idx);
     }
     else{
         gotoPageJquery(idx);
     }
 }

Secara keseluruhan coding program di view index.cshtml lengkapnya adalah sebagai berikut ini

@{
    /////////////////////////
    //Filename:Index.cshtml
    ////////////////////////
    ViewData["Title"] = "Home Page";
}
<style>
    th { background-color:lightgray;}
    tr {padding:5px!important;}
    .data-row td{
        padding: 5px !important;
    }
    .data-row:hover{
        background-color: lightyellow;
    }
</style>
<script type="text/javascript">
    function gotoPage(idx){
        var ajxCallMode = $('input[name=rbMode]:checked').val();
        console.log('Call mode: ',ajxCallMode);
        if(ajxCallMode=='Axios'){
            gotoPageAxios(idx);
        }
        else if(ajxCallMode=='Fetch'){
            gotoPageFetch(idx);
        }
        else if(ajxCallMode=='XHR'){
            gotoPageXHR(idx);
        }
        else{
            gotoPageJquery(idx);
        }
    }

    function gotoPageJquery(idx){
        var pageIndex = idx<0?0:idx;
        var pageSize = 10;
        $.ajax({
            url: `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`,
            dataType: 'json',
            method: "POST",
            success: function (result, status, xhr) {
                console.log('Response: ', result);
                if (result != null ) {
                    renderGrid(result);
                    return;
                }
                else {
                    renderGrid(null, e);
                    return;
                }
            },
            error: function (e) {
                renderGrid(null, e);
                return;
            },
        });
    }

    function gotoPageFetch(idx){
        var pageIndex = idx<0?0:idx;
        var pageSize = 10;

        var url1 = `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`;
        var options = {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            }
        };

        fetch( url1, options)
            .then((response)=>{
                console.log('Response: ', response);
                if(!response.ok){
                    throw new Error(`Response status: ${response.status}`);
                }
                else{
                    return response.json();                    
                }
            })
            .then((response) =>{                
                renderGrid(response);
            })
            .catch((e)=>{
                 renderGrid(null, e);
            });
    }

    function gotoPageAxios(idx){
        var pageIndex = idx<0?0:idx;
        var pageSize = 10;

        var url2 = `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`;
        axios.post(url2)
            .then((response) =>{
                console.log('Response: ', response);
                if(response.status != 200){
                    throw new Error(`Response status: ${response.status} ${response.statusText}`);
                }
                var result = response.data;
                renderGrid(result);
            })
            .catch((e)=>{
                 renderGrid(null, e);
            });
    }

    function gotoPageXHR(idx){
        var pageIndex = idx<0?0:idx;
        var pageSize = 10;
         
        // for backward compatible older browser
        var url3 =  `@Url.Action("GetListProduk", "Home")?&pageIndex=${pageIndex}&pageSize=${pageSize}`;
        var req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log('Response: ', req);
               // Typical action to be performed when the document is ready:
               var result = req.response;
                renderGrid(result);
            }
        };
        req.onerror = (e) => {
             renderGrid(null, e);
        };
        req.open("POST", url3, true);
        req.responseType = "json";
        req.send();
    }


    function renderGrid(data, eror){
        console.log(data,eror);
        if(data == null || typeof(data) == 'undefined' || data?.isSuccess != true ){
            var errorMessage = '';
            if(data != null && typeof(data) != 'undefined' && data?.isSuccess != true){
                errorMessage = `${data?.message}`;
            }
            else{
                errorMessage = `${eror?.status} ${eror?.statusText} ${eror?.responseText}`;
            }
            

            var tpl = `
                            <div class="col-md-12 row">
                                <div class="col-md-3">
                                    <a class="btn btn-warning btn-sm" onclick="gotoPage(0)">
                                        Refresh
                                    </a>
                                    &nbsp;
                                    <a class="btn btn-warning btn-sm" onclick="gotoPage(0)">
                                        &lt;
                                    </a>
                                    &nbsp;
                                    <a class="btn btn-warning btn-sm" onclick="gotoPage(0)">
                                        &gt;
                                    </a>
                                </div>
                                <div class="col-md-3">
                                    <span><b>Page 0/0 Total Row 0</b></span>
                                </div>
                                <div class="col-md-3">
                                    <span><b>Loading time : </b></span>
                                </div>
                            </div>
                            <div class="col-md-12 row">
                                <table border="0" width="100%" style="border:1px solid black;">
                                    <thead>
                                        <tr>
                                              <th>No.</th>
                                            <th>Kode Produk</th>
                                            <th>Nama Produk</th>
                                            <th>Jenis/Varian</th>
                                            <th>Deskripsi</th>
                                            <th>Harga</th>
                                        </tr>
                                    </thead>
                                    <tbpdy>
                                        <tr>
                                            <td colspan="18">
                                               <b style='color:red;'> Error, Please  Contact Administrator! </b><br/> 
                                               <b>${errorMessage} </b> <br/>
                                            </td>
                                        </tr>
                                    </tbpdy>
                                </table>
                            </div>
            `;
            $('#data-area').html(tpl);
        }
        else{
            var currentPageIndex = data?.currentPageIndex ?? 0;
            var currentPageSize = data?.currentPageSize ?? 0;
            var maxPageCount = data?.maxPageCount ?? 0;
            var currentPageIndexLabel  = (currentPageIndex < 0 ? 0 : (currentPageIndex > maxPageCount? maxPageCount : currentPageIndex))+1;
            var prevIndex = (currentPageIndex -1< 0? 0 : (currentPageIndex -1));
            var nextIndex = (currentPageIndex+1) > (maxPageCount-1)? (maxPageCount-1): (currentPageIndex+1);
            var totalRows = data?.totalRows ?? 0;
            var ellapsedTime = data?.timeElapsed ?? '';

            var rowTpl = ``;         
            data?.results?.forEach((row,idx,list) => {
                var nomer = (currentPageIndex*currentPageSize)+ idx+1;
                rowTpl += `
                             <tr class='data-row'>
                                <td  style='background-color:gray;'>${nomer}.</td>
                                <td style='text-align:center;'>${row?.kodeProduk}</td>
                                <td> ${row?.namaProduk??''}  </td>
                                <td> ${row?.jenis??''}  </td>
                                <td> ${row?.deskripsi??''}  </td>                                
                                <td style='text-align:right;'> Rp ${row?.harga?? 0} </td>
                            </tr>
                
                `;
            });

            var tpl = `
                            <div class="col-md-12 row">
                                <div class="col-md-3">
                                    <a class="btn btn-warning btn-sm" onclick="gotoPage(${currentPageIndex})">
                                        Refresh
                                    </a>
                                    &nbsp;
                                    <a class="btn btn-warning btn-sm" onclick="gotoPage(${prevIndex})">
                                        &lt;
                                    </a>
                                    &nbsp;
                                    <a class="btn btn-warning btn-sm" onclick="gotoPage(${nextIndex})">
                                        &gt;
                                    </a>
                                </div>
                                <div class="col-md-3">
                                    <span><b>Page ${currentPageIndexLabel}/${(maxPageCount)} Total Row ${totalRows}</b></span>
                                </div>
                                <div class="col-md-3">
                                    <span><b>Loading time : ${ellapsedTime} milisecond</b></span>
                                </div>
                            </div>
                            <div class="col-md-12 row">
                                <table border="0" width="100%" style="border:1px solid black;">
                                    <thead>
                                        <tr>
                                            <th>No.</th>                                            
                                            <th>Kode Produk</th>
                                            <th>Nama Produk</th>
                                            <th>Jenis/Varian</th>
                                            <th>Deskripsi</th>
                                            <th>Harga</th>                                            
                                        </tr>
                                    </thead>
                                    <tbpdy>
                                        ${rowTpl}
                                    </tbpdy>
                                </table>
                            </div>
            `;
            $('#data-area').html(tpl);
        }
    }


</script>
<script type="text/javascript">
    $(function(){
        gotoPage(0);
    });
</script>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://bayuprn.com">building Web apps with ASP.NET Core</a>.</p>
</div>

<div class="row col-md-12">&nbsp;</div>
<div class="row col-md-12">
    <div class="col-md-2"><b>Ajax Call Method:</b></div>
    <div class="col-md-2">
        <input type="radio" name="rbMode" value="Jquery" /> JQuery
    </div>
    <div class="col-md-2">
        <input type="radio" name="rbMode" value="Fetch" checked="checked" /> Fetch API
    </div>
    <div class="col-md-2">
        <input type="radio" name="rbMode" value="Axios" /> Axios
    </div>
    <div class="col-md-2">
        <input type="radio" name="rbMode" value="XHR" /> XHR/XMLHttpRequest
    </div>
</div>
<div class="row col-md-12">&nbsp;</div>

<div class="col-md-12 row" style="overflow-x:scroll;">
    <div id="data-area" style="min-width:1000px !important;">
        <div class="col-md-12 row">
            <div class="col-md-3">
                <a class="btn btn-warning btn-sm" onclick="gotoPage(0)">
                    Refresh
                </a>
                &nbsp;
                <a class="btn btn-warning btn-sm" onclick="gotoPage(0)">
                    &lt;
                </a>
                &nbsp;
                <a class="btn btn-warning btn-sm" onclick="gotoPage(0)">
                    &gt;
                </a>
            </div>
            <div class="col-md-3">
                <span><b>Page 0/0 Total Row 0</b></span>
            </div>
            <div class="col-md-3">
                <span><b>Loading time : </b></span>
            </div>
        </div>
        <div class="col-md-12 row">
            <table border="0" width="100%" style="border:1px solid black;">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Kode Produk</th>
                        <th>Nama Produk</th>
                        <th>Jenis/Varian</th>
                        <th>Deskripsi</th>
                        <th>Harga</th>
                    </tr>
                </thead>
                <tbpdy>

                </tbpdy>
            </table>
        </div>
    </div>
</div>

Jika berhasil dijalankan, maka tampilan dari web yang kita buat akan seperti berikut

**Gambar 1:** Tampilan web dengan datatabel dan pilihan mode pengambilan ajax (Jquery, fetch, axios, XHR)

Perhatikan bahwa terdapat pilihan ajax call method sehingga pengguna yang mengakses bisa memilih metode yang digunakan apakah menggunakan JQuery AJAX, Fetch API, Axios, ataukah XHR/XMLHttpRequest.

Sekilas memang tidak terlihat perbedaannya namun apabila kita lihat dari web console browser , maka akan nampak object response yang dihasilkan sangat berbeda.

**Gambar 2:** response Ajax menggunakan Fetch API dilihat menggunan console browser

**Gambar 3 :** response Ajax menggunakan AXIOS dilihat menggunakan console browser

**Gambar 4:** Response ajax menggunakan JQuery dilihat menggunakan console browser

**Gambar 5:** response Ajax menggunakan XHR/HMLHttpRequest dilihat dari console browser

Dari sini kita dapat memahami bagaimana kelebihan kekurangan serta bagaimana model kode program dari masing masing API untuk Ajax (Jquery, Fetch, Axios, XHR) serta response object yang dihasilkan.

UNTUK LISTING CODE LENGKAP + SCRIPT SQL BISA DIUNDUH DI SINI

Bayu PRN's BLOG

Fetch API VS Axios VS Jquery AJAX

Leave a Reply Cancel reply

Search

Welcome

Archive

Categories

Recent Posts

Tags

Social Icons

Gallery