Bagikan melalui

JSONP

  • Artikel

Sampel JSONP menunjukkan cara mendukung JSON dengan Padding (JSONP) dalam layanan WCF REST. JSONP adalah konvensi yang digunakan untuk memanggil skrip lintas domain dengan menghasilkan tag skrip dalam dokumen saat ini. Hasilnya dikembalikan dalam fungsi panggilan balik tertentu. JSONP didasarkan pada gagasan bahwa tag seperti <script src="http://..." > dapat mengevaluasi skrip dari domain apa pun dan skrip yang diambil oleh tag tersebut dievaluasi dalam cakupan saat fungsi lain mungkin sudah ditentukan.

Menunjukkan

Pembuatan skrip lintas domain dengan JSONP.

Diskusi

Sampel menyertakan Halaman web yang secara dinamis menambahkan blok skrip setelah halaman dirender di browser. Blok skrip ini memanggil layanan WCF REST yang memiliki satu operasi, GetCustomer. Layanan WCF REST mengembalikan nama dan alamat pelanggan yang dibungkus dengan nama fungsi panggilan balik. Saat layanan WCF REST merespons, fungsi panggilan balik di Halaman web dipanggil dengan data pelanggan dan fungsi panggilan balik menampilkan data di halaman Web. Injeksi tag skrip dan eksekusi fungsi panggilan balik secara otomatis ditangani oleh kontrol ScriptManager ASP.NET AJAX. Pola penggunaan sama dengan semua proksi ASP.NET AJAX, dengan penambahan satu baris untuk mengaktifkan JSONP, seperti yang ditunjukkan dalam kode berikut:

var proxy = new JsonpAjaxService.CustomerService();
proxy.set_enableJsonp(true);
proxy.GetCustomer(onSuccess, onFail, null);

Halaman web dapat memanggil layanan WCF REST karena layanan menggunakan WebScriptEndpoint dengan crossDomainScriptAccessEnabled diatur ke true. Kedua konfigurasi ini dilakukan dalam file Web.config di bawah elemen <system.serviceModel>.

<system.serviceModel>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  <standardEndpoints>
    <webScriptEndpoint>
      <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

ScriptManager mengelola interaksi dengan layanan dan menyembunyikan kompleksitas penerapan akses JSONP secara manual. Saat crossDomainScriptAccessEnabled diatur ke true dan format respons untuk operasi adalah JSON, infrastruktur WCF memeriksa URI permintaan untuk parameter string kueri panggilan balik dan membungkus respons JSON dengan nilai parameter string kueri panggilan balik. Dalam sampel, Halaman web memanggil layanan WCF REST dengan URI berikut.

http://localhost:33695/CustomerService/GetCustomer?callback=Sys._json0

Karena parameter string kueri panggilan balik memiliki nilai JsonPCallback, layanan WCF mengembalikan respons JSONP yang diperlihatkan dalam contoh berikut.

Sys._json0({"__type":"Customer:#Microsoft.Samples.Jsonp","Address":"1 Example Way","Name":"Bob"});

Respons JSONP ini mencakup data pelanggan yang diformat sebagai JSON, dibungkus dengan nama fungsi panggilan balik yang diminta Halaman web. ScriptManager akan menjalankan panggilan balik ini menggunakan tag skrip untuk mencapai permintaan lintas domain, lalu meneruskan hasilnya ke handler onSuccess yang diteruskan ke operasi GetCustomer dari proksi ASP.NET AJAX.

Sampel terdiri dari dua aplikasi web ASP.NET: satu hanya berisi layanan WCF, dan satu lagi berisi halaman web .aspx, yang memanggil layanan. Saat menjalankan solusi, Visual Studio akan menghosting dua situs web di port yang berbeda, yang menciptakan lingkungan tempat layanan dan klien tinggal di domain yang berbeda.

Untuk menjalankan sampel

  1. Buka solusi untuk Sampel JSONP.

  2. tekan F5 untuk meluncurkan http://localhost:26648/JSONPClientPage.aspx di browser.

  3. Perhatikan bahwa setelah halaman dimuat, input teks untuk "Nama" dan "Alamat" diisi oleh nilai. Nilai-nilai ini disediakan dari panggilan ke layanan WCF setelah browser selesai merender halaman.