Layanan AJAX Dasar

Sampel SimpleAjaxService menunjukkan cara menggunakan Windows Communication Foundation (WCF) untuk membuat layanan JavaScript Asinkron ASP.NET dan XML (AJAX) dasar (layanan yang dapat Anda akses dengan menggunakan kode JavaScript dari klien browser Web). Layanan ini menggunakan atribut WebGetAttribute untuk memastikan bahwa layanan merespons permintaan HTTP GET dan dikonfigurasi untuk menggunakan format data JavaScript Object Notation (JSON) untuk respons.

Dukungan AJAX di WCF dioptimalkan untuk digunakan dengan ASP.NET AJAX melalui kontrol ScriptManager. Untuk contoh penggunaan WCF dengan ASP.NET AJAX, lihat Sampel AJAX.

Catatan

Prosedur pengaturan dan instruksi build untuk sampel ini terletak di akhir topik ini.

Dalam kode berikut, atribut WebGetAttribute diterapkan ke operasi Add untuk memastikan bahwa layanan merespons permintaan HTTP GET. Kode menggunakan GET agar lebih mudah (Anda dapat membuat permintaan HTTP GET dari browser Web apa pun). Anda juga dapat menggunakan GET untuk mengaktifkan pembuatan cache. HTTP POST adalah default-nya jika tidak ada atribut WebGetAttribute.

[ServiceContract(Namespace = "SimpleAjaxService")]
public interface ICalculator
{
    [WebGet]
    double Add(double n1, double n2);
    //Other operations omitted…
}

Sampel file .svc menggunakan WebScriptServiceHostFactory, yang menambahkan titik akhir standar WebScriptEndpoint ke layanan. Titik akhir dikonfigurasi pada alamat kosong relatif terhadap file .svc. Hal 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.SimpleAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>

WebScriptEndpoint telah dikonfigurasi sebelumnya untuk membuat layanan dapat diakses dari halaman klien AJAX ASP.NET. Bagian berikut di Web.config dapat digunakan untuk membuat perubahan konfigurasi tambahan pada titik akhir. Bagian ini dapat dihapus jika tidak ada perubahan tambahan yang diperlukan.

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

WebScriptEndpoint mengatur format data default untuk layanan ke JSON alih-alih XML. Untuk memanggil layanan, buka http://localhost/ServiceModelSamples/service.svc/Add?n1=100&n2=200 setelah menyelesaikan langkah-langkah penyiapan dan build yang ditunjukkan nanti dalam topik ini. Fungsionalitas pengujian ini diaktifkan dengan menggunakan permintaan HTTP GET.

Halaman web klien SimpleAjaxClientPage.aspx berisi kode ASP.NET untuk memanggil layanan setiap kali pengguna mengeklik salah satu tombol operasi pada halaman. Kontrol ScriptManager digunakan untuk membuat proksi ke layanan yang dapat diakses melalui JavaScript.

<asp:ScriptManager ID="ScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="service.svc" />
    </Services>
</asp:ScriptManager>

Proksi lokal diinstantiasi dan operasi dipanggil menggunakan kode JavaScript berikut.

// Code for extracting arguments n1 and n2 omitted…
// Instantiate a service proxy
var proxy = new SimpleAjaxService.ICalculator();
// Code for selecting operation omitted…
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

Jika panggilan layanan berhasil, kode memanggil handler onSuccess dan hasil operasi ditampilkan dalam kotak teks.

function onSuccess(mathResult){
     document.getElementById("result").value = mathResult;
}