Bagaimana untuk meminta data merentas domain dengan jquery front-end

Dalam pembangunan bahagian hadapan, selalunya perlu meminta data daripada pelayan yang berbeza. Walau bagaimanapun, disebabkan oleh sekatan dasar asal yang sama, data tidak boleh diminta secara langsung merentas domain. Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah yang disediakan oleh jQuery.

1. Apakah itu data permintaan merentas domain

Data permintaan merentas domain merujuk kepada mendapatkan data dengan menghantar permintaan ke pelayan lain melalui klien (pelayar) di hadapan- data pembangunan tamat. Atas sebab keselamatan, penyemak imbas mengehadkan permintaan daripada pelayan dengan asal yang berbeza. Asal yang sama bermakna protokol, port dan nama hos kedua-dua halaman adalah sama. Situasi biasa untuk meminta data merentas domain ialah meminta data daripada pelayan lain melalui Ajax pada halaman hadapan.

2. Mengapa permintaan data merentas domain diperlukan

Permintaan data merentas domain ialah situasi yang sangat biasa dalam pembangunan bahagian hadapan. Terdapat beberapa sebab:

• Logik bahagian hadapan dan bahagian belakang yang berasingan: Pembangunan bahagian hadapan dan belakang selalunya diselesaikan oleh dua pasukan yang berbeza, dan mereka memerlukan pelayan yang berbeza untuk menjalankan kod masing-masing. Dengan meminta data merentas domain, pemisahan logik antara bahagian hadapan dan bahagian belakang boleh dibuat dengan lebih jelas.
• Simpan sumber: Sesetengah perkhidmatan komersial mungkin hanya menyediakan antara muka API dan bukan sumber hadapan Dalam kes ini, jika anda perlu menghubungi perkhidmatan tersebut, anda perlu meminta data merentas domain.
• Berbilang pelayan bahagian hadapan berkongsi data: Kadangkala, pelayan bahagian hadapan yang berbeza perlu mengakses perkhidmatan bahagian belakang yang sama dan dalam kes ini, permintaan data merentas domain diperlukan.

3. Kaedah untuk menyelesaikan data permintaan merentas domain

Disebabkan sekatan dasar asal yang sama, data merentas domain tidak boleh diminta secara langsung, tetapi kami boleh menggunakan penyelesaian berikut:

• JSONP: Walaupun JavaScript tidak menyokong permintaan merentas domain secara asli, anda boleh menggunakan atribut src teg kaedah ialah JSONP. Walau bagaimanapun, kaedah ini memerlukan pelayan untuk menyokong pemulangan data dalam format JSONP, dan terdedah kepada serangan XSS.
• CORS: Cross-Origin Resource Sharing (CORS) ialah teknologi penyemak imbas yang membolehkan pelayan memberitahu penyemak imbas domain mana yang dibenarkan untuk mengakses melalui pengepala HTTP. Tetapi kaedah ini memerlukan sokongan bahagian pelayan.
• Proksi: Pelayan bahagian hadapan menghantar permintaan kepada pelayan lain melalui pelayan bahagian belakang, dan kemudian mengembalikan hasilnya ke bahagian hadapan. Walau bagaimanapun, kaedah ini memerlukan pembangun bahagian hadapan untuk memahami teknologi pelayan bahagian belakang, dan overhed pelayan adalah besar.

4. Gunakan jQuery untuk meminta data merentas domain

jQuery menyediakan beberapa kaedah untuk membantu kami meminta data merentas domain:

• $ Kaedah .ajax(): Kaedah Ajax yang paling biasa digunakan dalam jQuery Ia boleh menentukan format data yang perlu diterima oleh pelayan dengan menetapkan atribut contentType dan atribut dataType untuk menentukan format data yang dikembalikan oleh pelayan.
• Kaedah $.getJSON(): Kaedah ini ialah enkapsulasi ringkas kaedah $.ajax(), digunakan untuk mendapatkan data dalam format JSON melalui permintaan GET.
• Kaedah $.getScript(): Kaedah ini ialah enkapsulasi ringkas kaedah $.ajax(), digunakan untuk mendapatkan fail JavaScript melalui permintaan GET.
• Kaedah $.postMessage(): Kaedah ini diperkenalkan dalam HTML5 untuk komunikasi silang domain selamat antara berbilang tetingkap/halaman.

Kod khusus adalah seperti berikut:

$.ajax({
   url: 'http://example.com/test.php',
   dataType: 'jsonp',
   success: function(data){
      console.log(data);
   },
   error: function(){
      console.log("error");
   }
});

$.getJSON('http://example.com/test.php', function(data){
  console.log(data);
});

$.getScript('http://example.com/test.js', function(){
  console.log("script loaded");
});

window.postMessage("message", "http://example.com");

Ringkasnya, dalam proses menggunakan jQuery untuk meminta data merentas domain, anda perlu menetapkan pengepala permintaan, parameter dan panggilan balik berfungsi dengan sewajarnya. Untuk berjaya mendapatkan data sasaran.

5. Kesimpulan

Permintaan data merentas domain ialah situasi yang sangat biasa dalam pembangunan bahagian hadapan. Walaupun sekatan dasar asal yang sama menyukarkan permintaan data merentas domain, masalah itu boleh diselesaikan menggunakan kaedah seperti JSONP, CORS dan proksi. Melalui kaedah yang disediakan oleh jQuery, proses meminta data merentas domain boleh dibuat lebih mudah dan lebih cekap.

Atas ialah kandungan terperinci Bagaimana untuk meminta data merentas domain dengan jquery front-end. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!