Tampilkan div popup saat berbicara dengan server AJAX

Saya mencoba menampilkan popup di tengah layar sementara situs web saya berbicara ke server AJAX saya. Karena beberapa operasi membutuhkan waktu beberapa detik untuk dilakukan, saya ingin memberikan isyarat visual kepada pengguna bahwa suatu operasi sedang terjadi. Misalnya, Anda dapat membuat playlist musik di situs saya. Saat daftar putar dibuat, saya ingin div muncul yang mengatakan itu membuat daftar putar di server saya.

Saya membuat jsfiddle untuk menunjukkan fungsi yang saya gunakan untuk mencoba menghasilkan ini, tapi saya memiliki sedikit efek sebaliknya. Di biola, ini menampilkan popup setelah mencoba berbicara dengan server (itu akan gagal untuk berbicara dengan server karena saya menolak apa pun di luar domain saya), tetapi karena gagal untuk berbicara dengan server, ia tidak pernah memanggil hide_popup().

Di server saya, popup bahkan tidak pernah ditampilkan (kecuali saya memanggil alert() langsung setelah panggilan show_popup()).

Saya tidak yakin mengapa ini terjadi, tapi saya hanya ingin
1. Tampilkan popup
2. Jalankan panggilan AJAX saya
3. Sembunyikan popup

Ada saran?


javascript html jquery ajax popup
person jas7457    schedule 17.09.2013    source sumber
comment
Anda menggunakan async = false. Pertanyaan stackoverflow ini (stackoverflow.com/questions/16000803/) mungkin membantu Anda.   -  person functionoid    schedule 17.09.2013
comment
Contoh jsfiddle Anda tidak berfungsi, karena Anda melakukan permintaan lintas domain. Ini mungkin juga alasan mengapa Anda memiliki efek sebaliknya. Anda mendapatkan Uncaught Error: NetworkError: DOM Exception 19 yang menghentikan javascript sehingga popup tidak dapat disembunyikan. Bagaimanapun, menurut saya pendekatan Anda terhadap masalah ini benar.   -  person Entity Black    schedule 17.09.2013
comment
@Windkiller pendekatannya sebenarnya salah.   -  person Abhitalks    schedule 17.09.2013

Jawaban (2)


arrow_upward
1
arrow_downward

Ada beberapa masalah dengan cara Anda menulis kode. Berikut ini beberapa di antaranya:

(1.) Panggilan:

var response = get_server_response("action=createPlaylist&name=" + name, false);

Anda mengharapkan respons segera yang tidak akan terjadi dengan panggilan AJAX. Selain itu, Anda meneruskan false untuk parameter async, yang menjadikannya panggilan sync secara efektif. Inilah sebabnya mengapa kode Anda hanya menunggu sebelum melakukan hal lain.

(2.) Implementasi:

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        response = xmlhttp.responseText;
    }
}
xmlhttp.open("POST", ajax_server, async);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(url);
return response;

Anda hanya menyimpan hasil dalam cache di response dan tidak memprosesnya saat melacak onreadystatechange. Anda sebenarnya memprosesnya tepat setelah panggilan yang akan dijalankan setelah panggilan dan bukan saat menerima respons. Tidak perlu mengembalikan respons di sini.

(3.) munculan:

Anda tidak menggunakan tampilkan/sembunyikan di tempat yang tepat.

Solusi:

Saya menyarankan Anda mengaktifkan panggilan balik saat melacak onreadystatechange dengan mengimplementasikan suatu fungsi. Tampilkan popup tepat sebelum Anda melakukan panggilan jaringan. Sembunyikan itu di dalam fungsi panggilan balik Anda tergantung pada readyState dan status.

Ini biola yang berfungsi untuk Anda: http://jsfiddle.net/nDNXc/549/

Semoga itu bisa membantu.

person Abhitalks    schedule 17.09.2013
comment
Saya pikir dia ingin membuat panggilan sinkron. Misalnya, Anda tidak boleh mengizinkan pengunjung memuat daftar putar lain sementara yang pertama belum dimuat... - person Entity Black; 17.09.2013

arrow_upward
0
arrow_downward

Pertama saya menyarankan Anda untuk menggunakan perpustakaan umum untuk panggilan Ajax Anda, mis. jQuery.ajax.

Kedua, pelajari tentang Javascript asinkron. Panggilan get_server_response() Anda segera kembali tanpa menunggu permintaan Ajax Anda selesai. Lihat parameter lengkap di jQuery.ajax. Ia menerima fungsi yang dipanggil ketika permintaan Anda selesai - tempat yang tepat untuk menyembunyikan pesan Anda!

person ToniTornado    schedule 17.09.2013
comment
Panggilan saya ke get_server_response() seharusnya tidak segera kembali karena saya membuat variabel bernama 'async' dan menyetelnya ke false. Ini membuatnya menunggu hingga pengiriman selesai sebelum mengembalikan nilai. - person jas7457; 17.09.2013
comment
Dia membuat panggilan sinkron. Jadi javascript di-stun sampai panggilan terselesaikan. Tapi itu kesalahan flush, itu sebabnya tidak berhasil. Pendekatannya benar. - person Entity Black; 17.09.2013