Saya akan mencoba jawaban yang lebih sederhana:
Penjelasan masalah
Pertama, mari kita memahami aliran acara ketika halaman disajikan dari server kami:
- PHP pertama dijalankan, menghasilkan HTML yang disajikan ke klien.
- Kemudian, HTML dikirim ke klien, setelah PHP selesai dengan itu, saya ingin menekankan bahwa begitu kode meninggalkan server - PHP selesai dengan itu dan tidak bisa lagi mengaksesnya.
- Kemudian, HTML dengan JavaScript menjangkau klien, yang dapat mengeksekusi JavaScript pada HTML itu.
Jadi sungguh, hal inti yang perlu diingat di sini adalah HTTP tidak memiliki kewarganegaraan . Setelah permintaan meninggalkan server, server tidak dapat menyentuhnya. Jadi, itu meninggalkan opsi kami untuk:
- Kirim lebih banyak permintaan dari klien setelah permintaan awal selesai.
- Encode apa yang dikatakan server dalam permintaan awal.
Solusi
Itulah pertanyaan inti yang harus Anda tanyakan pada diri sendiri adalah:
Apakah saya menulis situs web atau aplikasi?
Situs web umumnya berbasis halaman, dan waktu pemuatan halaman harus secepat mungkin (misalnya - Wikipedia). Aplikasi web lebih berat AJAX dan melakukan banyak perjalanan bolak-balik untuk mendapatkan informasi cepat klien (misalnya - dashboard stok).
Situs web
Mengirim lebih banyak permintaan dari klien setelah permintaan awal selesai lambat karena memerlukan lebih banyak permintaan HTTP yang memiliki overhead signifikan. Selain itu, ini membutuhkan asinkronitas karena membuat permintaan AJAX membutuhkan penangan ketika itu selesai.
Saya tidak akan merekomendasikan membuat permintaan lain kecuali situs Anda adalah aplikasi untuk mendapatkan informasi itu dari server.
Anda ingin waktu respons cepat yang memiliki dampak besar pada konversi dan waktu pemuatan. Membuat permintaan Ajax lambat untuk uptime awal dalam kasus ini dan tidak dibutuhkan.
Anda memiliki dua cara untuk mengatasi masalah ini
- Menetapkan cookie - cookie adalah header yang dikirim dalam permintaan HTTP yang dapat dibaca oleh server dan klien.
- Encode variabel sebagai JSON - JSON terlihat sangat dekat dengan objek JavaScript dan sebagian besar objek JSON adalah variabel JavaScript yang valid.
Mengatur cookie benar-benar tidak terlalu sulit, Anda hanya memberikan nilai:
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
Kemudian, Anda dapat membacanya dengan JavaScript menggunakan document.cookie:
Berikut ini adalah pengurai gulung tangan pendek, tetapi jawaban yang saya tautkan tepat di atas ini memiliki yang lebih teruji:
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
cookies["MyCookie"] // Value set with PHP.
Cookie bagus untuk sedikit data. Inilah yang sering dilakukan layanan pelacakan.
Setelah kami memiliki lebih banyak data, kami dapat menyandikannya dengan JSON di dalam variabel JavaScript:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
Dengan asumsi $valueini json_encodedapat di sisi PHP (biasanya). Teknik ini adalah apa yang dilakukan Stack Overflow dengan chat-nya misalnya (hanya menggunakan .NET, bukan PHP).
Aplikasi
Jika Anda sedang menulis aplikasi - tiba-tiba waktu buka awal tidak selalu sepenting kinerja aplikasi yang sedang berlangsung, dan mulai terbayar untuk memuat data dan kode secara terpisah.
Jawaban saya di sini menjelaskan cara memuat data menggunakan AJAX dalam JavaScript:
function callback(data){
// What do I do with the response?
}
var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) { // Request is done
if (httpRequest.status === 200) { // successfully
callback(httpRequest.responseText); // We're calling our method
}
}
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
Atau dengan jQuery:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
Sekarang, server hanya perlu memuat /your/urlrute / file yang berisi kode yang mengambil data dan melakukan sesuatu dengannya, dalam kasus Anda:
<$php
...
$val = myService->getValue(); // Makes an API and database call
echo json_encode($val); // Write it to the output
$>
Dengan cara ini, file JavaScript kami meminta data dan menunjukkannya alih-alih meminta kode atau tata letak. Ini lebih bersih dan mulai terbayar ketika aplikasi semakin tinggi. Ini juga pemisahan yang lebih baik dari kekhawatiran dan memungkinkan pengujian kode sisi klien tanpa melibatkan teknologi sisi server yang merupakan nilai tambah lainnya.
Postscript: Anda harus sangat menyadari vektor serangan XSS ketika Anda menyuntikkan sesuatu dari PHP ke JavaScript. Ini sangat sulit untuk melarikan diri nilai-nilai benar dan itu konteks sensitif. Jika Anda tidak yakin bagaimana cara menangani XSS, atau tidak menyadarinya - baca artikel OWASP ini , yang ini dan pertanyaan ini .
myPlugin.start(<?=$val?>disengaja? Benarkah "ini kadang-kadang berhasil"?