Bagikan melalui

Layanan AJAX dengan Sampel JSON dan XML

  • Artikel

Sampel XmlAjaxService menunjukkan cara menggunakan Windows Communication Foundation (WCF) untuk membuat layanan JavaScript dan XML Asinkron (AJAX) yang mengembalikan data JavaScript Object Notation (JSON) atau XML. Anda dapat mengakses layanan AJAX dengan menggunakan kode JavaScript dari klien browser Web. Sampel ini dibangun pada sampel Layanan AJAX Dasar.

Tidak seperti sampel AJAX lainnya, sampel ini tidak menggunakan ASP.NET AJAX dan kontrol ScriptManager. Dengan beberapa konfigurasi tambahan, layanan WCF AJAX dapat diakses dari halaman HTML apa pun melalui JavaScript, dan skenario ini ditampilkan di sini. Untuk contoh penggunaan WCF dengan ASP.NET AJAX, lihat Sampel Ajax.

Sampel ini memperlihatkan cara mengalihkan jenis respons operasi antara JSON dan XML. Fungsionalitas ini tersedia terlepas dari apakah layanan dikonfigurasi untuk diakses oleh ASP.NET AJAX atau oleh halaman klien HTML/JavaScript.

Catatan

Prosedur penyiapan dan petunjuk pembuatan untuk sampel ini terdapat di akhir topik ini.

Untuk mengaktifkan penggunaan klien AJAX non-ASP.NET, gunakan WebServiceHostFactory (bukan WebScriptServiceHostFactory) dalam file .svc. WebServiceHostFactory menambahkan titik akhir standar WebHttpEndpoint ke layanan. Titik akhir dikonfigurasi pada alamat kosong yang relatif terhadap file .svc; ini berarti bahwa alamat layanan adalah http://localhost/ServiceModelSamples/service.svc, tanpa akhiran tambahan selain nama operasi.

<%@ServiceHost language="c#" Debug="true" Service="Microsoft.Samples.XmlAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

Bagian berikut di Web.config dapat digunakan untuk membuat perubahan konfigurasi tambahan pada titik akhir. Ini dapat dihapus jika tidak ada perubahan tambahan yang diperlukan.

<system.serviceModel>
  <standardEndpoints>
    <webHttpEndpoint>
      <!-- Use this element to configure the endpoint -->
      <standardEndpoint name="" />
    </webHttpEndpoint>
  </standardEndpoints>
</system.serviceModel>

Format data default untuk WebHttpEndpoint adalah XML, sedangkan format data default untuk WebScriptEndpoint adalah JSON. Untuk informasi selengkapnya, lihat Membuat Layanan WCF AJAX tanpa ASP.NET.

Layanan dalam sampel berikut adalah layanan WCF standar dengan dua operasi. Kedua operasi memerlukan gaya isi Wrapped pada atribut WebGetAttribute atau WebInvokeAttribute, yang khusus untuk perilaku webHttp dan tidak memiliki hubungan dengan sakelar format data JSON/XML.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathXml(double n1, double n2);

Format respons untuk operasi ditentukan sebagai XML, yang merupakan pengaturan default untuk perilaku <webHttp>. Namun, praktik yang baik secara eksplisit menentukan format respons.

Operasi lain menggunakan atribut WebInvokeAttribute dan secara eksplisit menentukan JSON alih-alih XML untuk respons.

[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
MathResult DoMathJson(double n1, double n2);

Perhatikan bahwa dalam kedua kasus operasi mengembalikan jenis yang kompleks, MathResult, yang merupakan jenis kontrak data WCF standar.

Halaman Web klien XmlAjaxClientPage.htm berisi kode JavaScript yang memanggil salah satu dari dua operasi sebelumnya saat pengguna mengeklik tombol Lakukan penghitungan (kembalikan JSON) atau Lakukan penghitungan (kembalikan XML) di halaman. Kode ini untuk memanggil layanan membangun isi JSON dan mengirimkannya menggunakan HTTP POST. Permintaan dibuat secara manual di JavaScript, tidak seperti sampel Layanan AJAX Dasar dan sampel lainnya menggunakan ASP.NET AJAX.

// Create HTTP request
var xmlHttp;
// Request instantiation code omitted…
// Result handler code omitted…

// Build the operation URL
var url = "service.svc/ajaxEndpoint/";
url = url + operation;

// Build the body of the JSON message
var body = '{"n1":';
body = body + document.getElementById("num1").value + ',"n2":';
body = body + document.getElementById("num2").value + '}';

// Send the HTTP request
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/json");
xmlHttp.send(body);

Saat layanan merespons, respons ditampilkan tanpa pemrosesan lebih lanjut di kotak teks di halaman. Ini diimplementasikan untuk tujuan demonstrasi agar Anda dapat langsung mengamati format data XML dan JSON yang digunakan.

// Create result handler
xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState == 4){
          document.getElementById("result").value = xmlHttp.responseText;
     }
}

Untuk menyiapkan, membangun, dan menjalankan sampel

  1. Pastikan Anda telah melakukan Prosedur Penyiapan Satu Kali untuk Sampel Windows Communication Foundation.

  2. Bangun solusi XmlAjaxService.sln seperti yang dijelaskan dalam Membangun Sampel Windows Communication Foundation.

  3. Navigasi ke http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (jangan buka XmlAjaxClientPage.htm di browser dari direktori proyek).

Lihat juga