21 Desember 2015 - 17:20:48 - Read: 1143

Mengatasi Masalah Cache Browser Pada Aplikasi Berbasis AJAX Dengan Pseudo-Random Parameter

Hi hallo AJAX Programmer... gimana asynchronousnya? :p

Sebelumnya ke penjelasan dikit tentang judulnya yak. Sekilas tuh judul udah kayak judul Skripsi. Keren-keren menikung. :D

Aplikasi berbasis AJAX adalah aplikasi yang bekerja disisi client. Di sisi client karena AJAX dibangun menggunakan bahasa pemrograman JavaScript yang hanya berfungsi untuk mengolah data yang berasal dari sisi server, maupun data yang sudah ada disisi client. Skemanya semacam ini

[ajax apps] ---> request data A ke server ---> [server]

[ajax apps] <--- respond data A={content:A} dari server <--- [server]


Nah, masalah kita sesuai dengan judul diatas adalah ketika data A mengalami perubahan content disisi server menjadi A={content:ABC} , dan client meminta data yang sama, maka


[ajax apps] ---> request data A ke server ---> [server]

[ajax apps] <--- respond data A={content:A} dari server <--- [server]


Perhatikan pada proses, [ajax apps] meminta data A ke server, tapi respond dari server tetap memberikan data A yang lama. Seharusnya seperti inilah yang kita harapkan:


[ajax apps] ---> request data A ke server ---> [server]

[ajax apps] <--- respond data A={content:ABC} dari server <--- [server]


Hal ini terjadi karena browser melakukan caching data A. Sehingga proses yang sebenarnya terjadi adalah seperti berikut ini

1. [ajax apps] ---> request data A [browser] ---> meneruskan request data A ---> [server]

 Cache Ajax

2. Server memberikan respond berupa data dan header yang berisi informasi tentang data kepada browser

Perhatikan pada parameter Expires

Ini artinya server memberitahukan kepada browser bahwa data ini akan static dan tidak perlu diambil langsung dari server selama 2 hari kedepan. Hal ini bisa disebabkan karena settingan dari sisi server

<IfModule mod_expires.c>
  ExpiresActive on

  ExpiresByType text/html "access plus 2 days"
  ExpiresByType text/css "access plus 2 days"

</IfModule>

Cara ini memang sangat bermanfaat untuk data-data statis seperti file gambar atau css yang notabene jarang diupdate. Akan tetapi untuk hal-hal tertentu seperti terdapat maintenance layout pastinya hal ini akan bermasalah.

Control memang bisa kita lakukan langsung melalui browser, tetapi jika program yang kita buat menggunakan AJAX, tentu saja bukan tugas AJAX untuk mengelola CSS dan lain-lain. Melainkan data dengan konten type seperti JSON. Masalah yang kita hadapi disini adalah, AJAX akan mendapati data JSON yang tidak update dari server. Dan pengaruhnya bagi client pengguna aplikasi kita adalah tidak akan mendapatkan UPDATE data terbaru dari server.

Sebagai pemilik server kita bisa saja mengatur kembali konfigurasi web server seperti ini, akan tetapi jika kita sebagai Developer Client Side yang tidak memiliki hak untuk melakukan konfigurasi, maka berikut ini trik yang bisa kita lakukan untuk mengelabuhi browser. Yakni dengan Pseudo-Random Parameter.

Request I

AJAX
|
[request content] http://site.com/?param1=A&param2=B
|
BROWSER
|
[forwarding request] http://site.com/?param1=A&param2=B
|
SERVER
|
[respond data] http://site.com/?param1=A&param2=B
|
BROWSER
|
[caching data] http://site.com/?param1=A&param2=B
[forwarding data to AJAX]
|
AJAX

Request II

AJAX
|
[request content] http://site.com/?param1=A&param2=B
|
BROWSER
|
[check cache url] http://site.com/?param1=A&param2=B
[cache url exist] http://site.com/?param1=A&param2=B
[forwarding data to AJAX] http://site.com/?param1=A&param2=B
|
AJAX

 

Kelihatan kan, request data dari AJAX tidak diteruskan ke server karena URL yang di request oleh AJAX sudah tersimpan didalam Cache. Berikut ini adalah triknya

AJAX
|
[request content] http://site.com/?param1=A&param2=B&param3=C
|
BROWSER
|
[check cache url] http://site.com/?param1=A&param2=B&param3=C
[cache url NOT exist] http://site.com/?param1=A&param2=B&param3=C
[forwarding request] http://site.com/?param1=A&param2=B&param3=C
|
SERVER
|
[respond data] http://site.com/?param1=A&param2=B&param3=C
|
BROWSER
|
[caching data] http://site.com/?param1=A&param2=B&param3=C
[forwarding data to AJAX]
|
AJAX

See, dengan menambahkan parameter param3=C maka request data kita akan diteruskan ke server. Akan tetapi dengan cara ini, bukankan kemudian URL dengan alamat http://site.com/?param1=A&param2=B&param3=C akan kembali di cache oleh browser?

Yarp, disinilah kita memanfaatkan pseudo-random, bisa dengan mengganti-ganti nama parameter, maupun mengganti nilai parameter. Mungkin cara paling mudah adalah cukup dengan mengganti nilai dari parameter "param3".

Pseudo-Random yang kita kirimkan melalui browser bisa berupa angka random atau timestamp saat itu. Karena se-"cepat" apapun request, dan se-"banyak" apapun request bersamaan dari AJAX baik menggunakan Synchronous maupun Asynchronous, time pengiriman awal pasti akan tetap berurutan bukan?

Jadi, ketika melakukan request dengan AJAX, parameter dinamis bisa kita buat langsung disisi client

var url="http://site.com/?param1=A&param2=B";
var random_value=new Date().getTime();
atau
var random_value=Math.random();
var param="&param3="+random_value;
url=url+param;

Lalu bagaimana jika di sisi server hanya menerima variabel dengan parameter "param1" dan "param2" saja?

Yarp, maka "param3" akan diabaikan. Kan maunya gitu :p

Segini aja dulu kali yak.. CMIIW. Semoga bermanfaat ^_^