Bagikan melalui


Layanan AJAX Dasar

Sampel SimpleAjaxService menunjukkan cara menggunakan Windows Communication Foundation (WCF) untuk membuat layanan dasar ASP.NET Asinkron JavaScript dan XML (AJAX) (layanan yang dapat Anda akses menggunakan kode JavaScript dari klien browser Web). Layanan ini menggunakan WebGetAttribute atribut 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 ScriptManager kontrol. Untuk contoh penggunaan WCF dengan ASP.NET AJAX, lihat Sampel AJAX.

Nota

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

Dalam kode berikut, WebGetAttribute atribut diterapkan ke Add operasi untuk memastikan bahwa layanan merespons permintaan HTTP GET. Kode ini menggunakan GET untuk kesederhanaan (Anda dapat membuat permintaan HTTP GET dari browser Web apa pun). Anda juga dapat menggunakan GET untuk mengaktifkan cache. HTTP POST adalah default dengan tidak adanya WebGetAttribute atribut.

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

Sampel file .svc menggunakan WebScriptServiceHostFactory, yang menambahkan WebScriptEndpoint titik akhir standar ke layanan. Titik akhir dikonfigurasi pada alamat kosong 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.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. 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>

Mengatur WebScriptEndpoint format data default untuk layanan ke JSON alih-alih XML. Untuk memanggil layanan, navigasikan ke http://localhost/ServiceModelSamples/service.svc/Add?n1=100&n2=200 setelah menyelesaikan langkah-langkah penyusunan 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 mengklik salah satu tombol operasi di halaman. Kontrol ScriptManager digunakan untuk membuat proksi ke layanan dapat diakses melalui JavaScript.

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

Proksi lokal dibuat 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 onSuccess handler dan hasil operasi ditampilkan dalam kotak teks.

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