Apa perbedaan antara pemrograman sisi klien dan sisi server?


498

Saya punya kode ini:

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

Mengapa ini tidak menulis "bilah" ke file teks saya, tetapi mengingatkan "42"?


NB: Revisi sebelumnya atas pertanyaan ini secara eksplisit tentang PHP pada server dan JavaScript pada klien. Sifat dasar dari masalah dan solusi adalah sama untuk setiap pasangan bahasa ketika satu berjalan di klien dan yang lain di server (bahkan jika mereka adalah bahasa yang sama). Harap pertimbangkan ini saat Anda melihat jawaban berbicara tentang bahasa tertentu.

Jawaban:


460

Kode Anda dibagi menjadi dua bagian yang sepenuhnya terpisah, sisi server dan sisi klien .

                    |
               ---------->
              HTTP request
                    |
+--------------+    |    +--------------+
|              |    |    |              |
|    browser   |    |    |  web  server |
| (JavaScript) |    |    |  (PHP etc.)  |
|              |    |    |              |
+--------------+    |    +--------------+
                    |
  client side       |      server side
                    |
               <----------
          HTML, CSS, JavaScript
                    |

Kedua belah pihak berkomunikasi melalui permintaan dan tanggapan HTTP. PHP dijalankan di server dan menghasilkan beberapa HTML dan mungkin kode JavaScript yang dikirim sebagai respons kepada klien di mana HTML ditafsirkan dan JavaScript dieksekusi. Setelah PHP selesai mengeluarkan respons, skrip berakhir dan tidak ada yang terjadi di server hingga permintaan HTTP baru masuk.

Kode contoh dijalankan seperti ini:

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

Langkah 1, PHP mengeksekusi semua kode antar <?php ?>tag. Hasilnya adalah ini:

<script type="text/javascript">
    var foo = 'bar';

    var baz = 42;
    alert(baz);
</script>

The file_put_contentspanggilan tidak menimbulkan apa-apa, itu hanya menulis "+ foo +" ke dalam file. The <?php echo 42; ?>panggilan mengakibatkan output "42", yang sekarang di tempat di mana kode yang digunakan untuk menjadi.

Kode HTML / JavaScript yang dihasilkan ini sekarang dikirim ke klien, di mana ia akan dievaluasi. The alertpanggilan bekerja, sedangkan foovariabel tidak digunakan di mana saja.

Semua kode PHP dieksekusi di server sebelum klien bahkan mulai mengeksekusi salah satu JavaScript. Tidak ada kode PHP yang tersisa dalam respons yang dapat berinteraksi dengan JavaScript.

Untuk memanggil beberapa kode PHP, klien harus mengirim permintaan HTTP baru ke server. Ini dapat terjadi menggunakan salah satu dari tiga metode yang mungkin:

  1. Tautan, yang menyebabkan browser memuat halaman baru.
  2. Pengiriman formulir, yang mengirimkan data ke server dan memuat halaman baru.
  3. Sebuah AJAX permintaan, yang merupakan teknik Javascript untuk membuat permintaan HTTP biasa ke server (seperti 1. dan 2. akan), tetapi tanpa meninggalkan halaman saat ini.

Inilah pertanyaan yang menguraikan metode ini secara lebih rinci

Anda juga dapat menggunakan JavaScript untuk membuat browser membuka halaman baru menggunakan window.locationatau mengirimkan formulir, meniru kemungkinan 1. dan 2.


1
Anda juga dapat membuka halaman kedua menggunakan window.openatau memuat halaman menggunakan iframe.
jcubic

Mungkin perlu menambahkan WebSockets ke daftar metode komunikasi.
Quentin

Bagaimana jika katakanlah nilai drop-down diperbarui melalui jquery. Ketika pengguna melakukan langkah 2. Pengajuan formulir, yang mengirimkan data ke server dan memuat halaman baru, melalui tombol "Kirim" akankah nilai pembaruan jquery dapat diteruskan ke pengontrol di php? Atau apakah mereka tidak akan terlihat oleh php karena telah ditambahkan ke dom melalui jquery? @deceze
FabricioG

@Fabricio Permintaan HTTP akan dibuat dari <form>data dan dikirim ke server. Anda bisa memanipulasi formulir menggunakan Javascript agar mengandung data yang berbeda. Ya, data itu akan menjadi bagian dari permintaan HTTP yang dihasilkan jika itu benar bagian dari formulir ketika sedang dikirim; tidak masalah apakah itu dalam HTML asli atau ditambahkan sesudahnya melalui Javascript.
tipuan

163

Untuk menentukan mengapa kode PHP tidak berfungsi dalam kode JavaScript kita perlu memahami apa sisi klien dan bahasa sisi server , dan bagaimana cara kerjanya.

Bahasa sisi server (PHP dll.) : Mereka mengambil catatan dari database, mempertahankan status melalui koneksi HTTP stateless , dan melakukan banyak hal yang memerlukan keamanan. Mereka berada di server, program-program ini tidak pernah mengekspos kode sumbernya kepada pengguna.

Gambar dari wikipedia_http: //en.wikipedia.org/wiki/File: Scheme_dynamic_page_en.svg gambar attr

Jadi Anda dapat dengan mudah melihat bahwa bahasa sisi server menangani permintaan HTTP dan memprosesnya, dan, seperti yang dikatakan @deceze, PHP dieksekusi di server dan menghasilkan beberapa HTML, dan mungkin kode JavaScript, yang dikirim sebagai respons kepada klien, di mana HTML ditafsirkan dan JavaScript dieksekusi.

Di sisi lain, Bahasa Sisi Klien (seperti JavaScript) berada di browser dan dijalankan di browser. Skrip sisi klien umumnya mengacu pada kelas program komputer di web yang dijalankan sisi klien, oleh browser web pengguna, alih-alih sisi server .

JavaScript terlihat oleh pengguna dan dapat dengan mudah dimodifikasi, jadi untuk hal-hal keamanan kita tidak harus bergantung pada JavaScript.

Jadi ketika Anda membuat permintaan HTTP di server, server terlebih dahulu membaca file PHP dengan hati-hati untuk melihat apakah ada tugas yang perlu dijalankan, dan mengirimkan respons ke sisi klien. Sekali lagi, seperti yang dikatakan @deceze, * Setelah PHP selesai mengeluarkan respons, skrip berakhir dan tidak ada yang terjadi di server hingga permintaan HTTP baru masuk. *

Representasi grafis

Sumber gambar

Jadi sekarang apa yang bisa saya lakukan jika saya perlu memanggil PHP? Tergantung bagaimana Anda perlu melakukannya: baik dengan memuat ulang halaman atau dengan menggunakan panggilan AJAX.

  1. Anda dapat melakukannya dengan memuat ulang halaman dan mengirim permintaan HTTP
  2. Anda dapat membuat panggilan AJAX dengan JavaScript - ini tidak memerlukan memuat ulang halaman

Baca Baik:

  1. Wikipedia: Skrip sisi server
  2. Wikipedia: Skrip sisi klien
  3. Madara Uchiha: Perbedaan antara sisi klien dan pemrograman sisi server

30

Javascript Anda akan dieksekusi pada klien, bukan pada server. Ini berarti bahwa footidak dievaluasi pada sisi server dan karena itu nilainya tidak dapat ditulis ke file di server.

Cara terbaik untuk memikirkan proses ini adalah seolah-olah Anda membuat file teks secara dinamis. Teks yang Anda hasilkan hanya menjadi kode yang dapat dieksekusi setelah browser mengartikannya. Hanya apa yang Anda tempatkan di antara <?phptag yang dievaluasi di server.

By the way, membuat kebiasaan menanamkan potongan acak logika PHP dalam HTML atau Javascript dapat menyebabkan kode berbelit-belit serius. Saya berbicara dari pengalaman yang menyakitkan.


3
Jawaban Anda di sini patut diperhatikan karena menyebutkan ke / seorang interpeter. Namun, javascript dapat dikompilasi dan dijalankan di lingkungan server, dan juga dapat dilakukan antar server.
Brett Caswell

3

Dalam aplikasi web setiap tugas dijalankan dengan cara permintaan dan respons.

Pemrograman sisi klien adalah dengan kode html dengan skrip Java dan kerangka kerjanya, perpustakaan dijalankan di internet explorer, Mozilla, browser chrome. Dalam server java sisi pemrograman skenario server dijalankan di Tomcat, web-logic, j boss, WebSphere severs

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.