Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Scott Cate
Layanan Web adalah bagian integral dari kerangka kerja .NET yang menyediakan solusi lintas platform untuk bertukar data antara sistem terdistribusi. Meskipun Web Services biasanya digunakan untuk memungkinkan sistem operasi, model objek, dan bahasa pemrograman yang berbeda untuk mengirim dan menerima data, mereka juga dapat digunakan untuk memasukkan data secara dinamis ke halaman AJAX ASP.NET atau mengirim data dari halaman ke sistem back-end. Semua ini dapat dilakukan tanpa menggunakan operasi postback.
Memanggil Layanan Web dengan AJAX ASP.NET
Dan Wahlin
Layanan Web adalah bagian integral dari kerangka kerja .NET yang menyediakan solusi lintas platform untuk bertukar data antara sistem terdistribusi. Meskipun Web Services biasanya digunakan untuk memungkinkan sistem operasi, model objek, dan bahasa pemrograman yang berbeda untuk mengirim dan menerima data, mereka juga dapat digunakan untuk memasukkan data secara dinamis ke halaman AJAX ASP.NET atau mengirim data dari halaman ke sistem back-end. Semua ini dapat dilakukan tanpa menggunakan operasi postback.
Meskipun kontrol ASP.NET AJAX UpdatePanel menyediakan cara sederhana untuk AJAX mengaktifkan halaman ASP.NET apa pun, mungkin ada kalanya Anda perlu mengakses data secara dinamis di server tanpa menggunakan UpdatePanel. Dalam artikel ini Anda akan melihat cara menyelesaikannya dengan membuat dan menggunakan Layanan Web dalam halaman AJAX ASP.NET.
Artikel ini akan berfokus pada fungsionalitas yang tersedia di inti ASP.NET Ekstensi AJAX serta kontrol yang diaktifkan Layanan Web di ASP.NET AJAX Toolkit yang disebut AutoCompleteExtender. Topik yang dibahas termasuk menentukan Layanan Web dengan dukungan AJAX, membuat proksi klien, dan memanggil Layanan Web dengan JavaScript. Anda juga akan melihat bagaimana panggilan Layanan Web dapat dilakukan langsung ke metode halaman ASP.NET.
Konfigurasi Layanan Web
Saat proyek Situs Web baru dibuat dengan Visual Studio 2008, file web.config memiliki sejumlah penambahan baru yang mungkin tidak dikenal oleh pengguna versi Visual Studio sebelumnya. Beberapa modifikasi ini memetakan awalan "asp" ke kontrol AJAX ASP.NET sehingga dapat digunakan di halaman sementara yang lain menentukan HttpHandlers dan HttpModules yang diperlukan. Daftar 1 menunjukkan modifikasi yang dilakukan pada <httpHandlers> elemen di web.config yang memengaruhi panggilan Layanan Web. HttpHandler default yang digunakan untuk memproses panggilan .asmx dihapus dan diganti dengan kelas ScriptHandlerFactory yang terletak di rakitan System.Web.Extensions.dll. System.Web.Extensions.dll berisi semua fungsionalitas inti yang digunakan oleh ASP.NET AJAX.
Daftar 1. ASP.NET Konfigurasi Handler Layanan Web AJAX
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/>
</httpHandlers>
Penggantian HttpHandler ini dilakukan untuk memungkinkan panggilan JavaScript Object Notation (JSON) dilakukan dari halaman AJAX ASP.NET ke .NET Web Services menggunakan proksi JavaScript Web Service. ASP.NET AJAX mengirim pesan JSON ke Layanan Web dibandingkan dengan panggilan Simple Object Access Protocol (SOAP) standar yang biasanya terkait dengan Layanan Web. Ini menghasilkan pesan permintaan dan respons yang lebih kecil secara keseluruhan. Ini juga memungkinkan pemrosesan data sisi klien yang lebih efisien karena pustaka JavaScript ASP.NET AJAX dioptimalkan untuk bekerja dengan objek JSON. Daftar 2 dan Daftar 3 memperlihatkan contoh permintaan Layanan Web dan pesan respons yang diserialisasikan ke format JSON. Pesan permintaan yang ditampilkan di Daftar 2 meneruskan parameter negara dengan nilai "Belgia" sementara pesan respons di Daftar 3 meneruskan array objek Pelanggan dan properti terkaitnya.
Daftar 2. Pesan Permintaan Layanan Web Diserialisasikan ke JSON
{"country":"Belgium"}
> [! CATATAN] nama operasi didefinisikan sebagai bagian dari URL ke layanan web; selain itu, pesan permintaan tidak selalu dikirimkan melalui JSON. Layanan Web dapat menggunakan atribut ScriptMethod dengan parameter UseHttpGet yang diatur ke true, yang menyebabkan parameter diteruskan melalui parameter string kueri.
Daftar 3. Pesan Respons Layanan Web Diserialisasikan ke JSON
[{"__type":"Model.Customer","Country":"Belgium","CompanyName":"Maison
Dewey","CustomerID":"MAISD","ContactName":"Catherine
Dewey"},{"__type":"Model.Customer","Country":"Belgium","CompanyName":"Suprêmes
délices","CustomerID":"SUPRD","ContactName":"Pascale
Cartrain"}]
Di bagian berikutnya Anda akan melihat cara membuat Layanan Web yang mampu menangani pesan permintaan JSON dan merespons dengan jenis sederhana dan kompleks.
Membuat Layanan Web dengan Dukungan AJAX
Kerangka kerja AJAX ASP.NET menyediakan beberapa cara berbeda untuk memanggil Layanan Web. Anda dapat menggunakan kontrol AutoCompleteExtender (tersedia di ASP.NET AJAX Toolkit) atau JavaScript. Namun, sebelum memanggil layanan, Anda harus mengaktifkan AJAX sehingga dapat dipanggil oleh kode klien-skrip.
Apakah Anda baru menggunakan ASP.NET Web Services atau tidak, Anda akan merasa mudah untuk membuat dan mengaktifkan layanan AJAX. Kerangka kerja .NET telah mendukung pembuatan ASP.NET Web Services sejak rilis awal pada tahun 2002 dan Ekstensi AJAX ASP.NET menyediakan fungsionalitas AJAX tambahan yang dibangun berdasarkan serangkaian fitur default kerangka kerja .NET. Visual Studio .NET 2008 Beta 2 memiliki dukungan bawaan untuk membuat file Layanan Web .asmx dan secara otomatis memperoleh kode terkait selain kelas dari kelas System.Web.Services.WebService. Saat Anda menambahkan metode ke kelas, Anda harus menerapkan atribut WebMethod agar dapat dipanggil oleh konsumen Layanan Web.
Daftar 4 menunjukkan contoh penerapan atribut WebMethod ke metode bernama GetCustomersByCountry().
Daftar 4. Menggunakan Atribut WebMethod dalam Layanan Web
[WebMethod]
public Customer[] GetCustomersByCountry(string country)
{
return Biz.BAL.GetCustomersByCountry(country);
}
Metode GetCustomersByCountry() menerima parameter negara dan mengembalikan array objek Pelanggan. Nilai negara yang diteruskan ke metode diteruskan ke kelas lapisan bisnis yang pada gilirannya memanggil kelas lapisan data untuk mengambil data dari database, mengisi properti objek Pelanggan dengan data dan mengembalikan array.
Menggunakan Atribut ScriptService
Saat menambahkan atribut WebMethod memungkinkan metode GetCustomersByCountry() dipanggil oleh klien yang mengirim pesan SOAP standar ke Layanan Web, tidak memungkinkan panggilan JSON dilakukan dari aplikasi AJAX ASP.NET di luar kotak. Untuk mengizinkan panggilan JSON dilakukan, Anda harus menerapkan atribut Ekstensi ScriptService AJAX ASP.NET ke kelas Layanan Web. Ini memungkinkan Layanan Web untuk mengirim pesan respons yang diformat menggunakan JSON dan memungkinkan skrip sisi klien untuk memanggil layanan dengan mengirim pesan JSON.
Daftar 5 menunjukkan contoh penerapan atribut ScriptService ke kelas Layanan Web bernama CustomersService.
Daftar 5. Menggunakan Atribut ScriptService ke Layanan Web yang mengaktifkan AJAX
[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://xmlforasp.net")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class CustomersService : System.Web.Services.WebService
{
[WebMethod]
public Customer[] GetCustomersByCountry(string country)
{
return Biz.BAL.GetCustomersByCountry(country);
}
}
Atribut ScriptService bertindak sebagai penanda yang menunjukkan bahwa atribut tersebut dapat dipanggil dari kode skrip AJAX. Ini sebenarnya tidak menangani salah satu tugas serialisasi atau deserialisasi JSON yang terjadi di belakang layar. ScriptHandlerFactory (dikonfigurasi di web.config) dan kelas terkait lainnya melakukan pemrosesan JSON secara massal.
Menggunakan Atribut ScriptMethod
Atribut ScriptService adalah satu-satunya atribut AJAX ASP.NET yang harus ditentukan dalam Layanan Web .NET agar dapat digunakan oleh halaman AJAX ASP.NET. Namun, atribut lain bernama ScriptMethod juga dapat diterapkan langsung ke Metode Web dalam layanan. ScriptMethod mendefinisikan tiga properti termasuk UseHttpGet, ResponseFormat dan XmlSerializeString. Mengubah nilai properti ini dapat berguna dalam kasus di mana jenis permintaan yang diterima oleh Metode Web perlu diubah ke GET, ketika Metode Web perlu mengembalikan data XML mentah dalam bentuk XmlDocument objek atau XmlElement atau ketika data yang dikembalikan dari layanan harus selalu diserialisasikan sebagai XML alih-alih JSON.
Properti UseHttpGet dapat digunakan ketika Metode Web harus menerima permintaan GET dibandingkan dengan permintaan POST. Permintaan dikirim menggunakan URL dengan parameter input Metode Web yang dikonversi ke parameter QueryString. Properti UseHttpGet default ke false dan hanya boleh diatur ke true ketika operasi diketahui aman dan ketika data sensitif tidak diteruskan ke Layanan Web. Daftar 6 memperlihatkan contoh penggunaan atribut ScriptMethod dengan properti GunakanHttpGet.
Daftar 6. Menggunakan atribut ScriptMethod dengan properti UseHttpGet.
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public string HttpGetEcho(string input)
{
return input;
}
Contoh header yang dikirim ketika Metode Web HttpGetEcho yang diperlihatkan di Daftar 6 dipanggil diperlihatkan berikutnya:
GET /CustomerViewer/DemoService.asmx/HttpGetEcho?input=%22Input Value%22 HTTP/1.1
Selain mengizinkan Metode Web menerima permintaan HTTP GET, atribut ScriptMethod juga dapat digunakan ketika respons XML perlu dikembalikan dari layanan daripada JSON. Misalnya, Layanan Web dapat mengambil umpan RSS dari situs jarak jauh dan mengembalikannya sebagai objek XmlDocument atau XmlElement. Pemrosesan data XML kemudian dapat terjadi pada klien.
Daftar 7 memperlihatkan contoh penggunaan properti ResponseFormat untuk menentukan bahwa data XML harus dikembalikan dari Metode Web.
Daftar 7. Menggunakan atribut ScriptMethod dengan properti ResponseFormat.
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
public XmlElement GetRssFeed(string url)
{
XmlDocument doc = new XmlDocument();
doc.Load(url);
return doc.DocumentElement;
}
Properti ResponseFormat juga dapat digunakan bersama dengan properti XmlSerializeString. Properti XmlSerializeString memiliki nilai default false yang berarti bahwa semua jenis pengembalian kecuali string yang dikembalikan dari Metode Web diserialisasikan sebagai XML ketika ResponseFormat properti diatur ke ResponseFormat.Xml. Ketika XmlSerializeString diatur ke true, semua jenis yang dikembalikan dari Metode Web diserialisasikan sebagai XML termasuk jenis string. Jika properti ResponseFormat memiliki nilai ResponseFormat.Json properti XmlSerializeString diabaikan.
Daftar 8 memperlihatkan contoh penggunaan properti XmlSerializeString untuk memaksa string diserialisasikan sebagai XML.
Daftar 8. Menggunakan atribut ScriptMethod dengan properti XmlSerializeString
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml,XmlSerializeString=true)]
public string GetXmlString(string input)
{
return input;
}
Nilai yang dikembalikan dari memanggil Metode Web GetXmlString yang diperlihatkan dalam Daftar 8 diperlihatkan berikutnya:
<?xml version="1.0"?>
<string>Test</string>
Meskipun format JSON default meminimalkan ukuran keseluruhan pesan permintaan dan respons dan lebih mudah digunakan oleh klien AJAX ASP.NET secara lintas browser, properti ResponseFormat dan XmlSerializeString dapat digunakan ketika aplikasi klien seperti Internet Explorer 5 atau lebih tinggi mengharapkan data XML dikembalikan dari Metode Web.
Bekerja dengan Tipe Kompleks
Daftar 5 memperlihatkan contoh mengembalikan jenis kompleks bernama Pelanggan dari Layanan Web. Kelas Pelanggan mendefinisikan beberapa jenis sederhana yang berbeda secara internal seperti properti seperti FirstName dan LastName. Jenis kompleks yang digunakan sebagai parameter input atau jenis pengembalian pada Metode Web berkemampuan AJAX secara otomatis diserialisasikan ke JSON sebelum dikirim ke sisi klien. Namun, jenis kompleks berlapis (yang ditentukan secara internal dalam jenis lain) tidak tersedia untuk klien sebagai objek mandiri secara default.
Dalam kasus di mana jenis kompleks berlapis yang digunakan oleh Layanan Web juga harus digunakan di halaman klien, atribut ASP.NET AJAX GenerateScriptType dapat ditambahkan ke Layanan Web. Misalnya, kelas CustomerDetails yang ditampilkan dalam Daftar 9 berisi properti Alamat dan Jenis Kelamin yang mewakili jenis kompleks berlapis.
Daftar 9. Kelas CustomerDetails yang ditampilkan di sini berisi dua jenis kompleks berlapis.
public class CustomerDetails : Customer
{
public CustomerDetails()
{
}
Address _Address;
Gender _Gender = Gender.Unknown;
public Address Address
{
get { return _Address; }
set { _Address = value; }
}
public Gender Gender
{
get { return _Gender; }
set { _Gender = value; }
}
}
Objek Alamat dan Jenis Kelamin yang ditentukan dalam kelas CustomerDetails yang ditampilkan dalam Daftar 9 tidak akan secara otomatis tersedia untuk digunakan di sisi klien melalui JavaScript karena mereka adalah jenis berlapis (Alamat adalah kelas dan Jenis kelamin adalah enumerasi). Dalam situasi di mana jenis berlapis yang digunakan dalam Layanan Web harus tersedia di sisi klien, atribut GenerateScriptType yang disebutkan sebelumnya dapat digunakan (lihat Daftar 10). Atribut ini dapat ditambahkan beberapa kali jika jenis kompleks berlapis yang berbeda dikembalikan dari layanan. Ini dapat diterapkan langsung ke kelas Layanan Web atau di atas Metode Web tertentu.
Daftar 10. Menggunakan atribut GenerateScriptService untuk menentukan jenis berlapis yang harus tersedia untuk klien.
[System.Web.Script.Services.ScriptService]
[System.Web.Script.Services.GenerateScriptType(typeof(Address))]
[System.Web.Script.Services.GenerateScriptType(typeof(Gender))]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class NestedComplexTypeService : System.Web.Services.WebService
{
//Web Methods
}
Dengan menerapkan GenerateScriptType atribut ke Layanan Web, jenis Alamat dan Jenis Kelamin akan secara otomatis tersedia untuk digunakan oleh pihak klien ASP.NET kode JavaScript AJAX. Contoh JavaScript yang secara otomatis dihasilkan dan dikirim ke klien dengan menambahkan atribut GenerateScriptType pada Layanan Web ditampilkan di Daftar 11. Anda akan melihat cara menggunakan jenis kompleks berlapis nanti di artikel.
Daftar 11. Jenis kompleks berlapis tersedia untuk halaman AJAX ASP.NET.
if (typeof(Model.Address) === 'undefined')
{
Model.Address=gtc("Model.Address");
Model.Address.registerClass('Model.Address');
}
Model.Gender = function() { throw Error.invalidOperation(); }
Model.Gender.prototype = {Unknown: 0,Male: 1,Female: 2}
Model.Gender.registerEnum('Model.Gender', true);
Sekarang setelah Anda melihat cara membuat Layanan Web dan membuatnya dapat diakses oleh ASP.NET halaman AJAX, mari kita lihat cara membuat dan menggunakan proksi JavaScript sehingga data dapat diambil atau dikirim ke Layanan Web.
Membuat Proksi JavaScript
Memanggil Layanan Web standar (.NET atau platform lain) biasanya melibatkan pembuatan objek proksi yang melindungi Anda dari kompleksitas pengiriman permintaan SOAP dan pesan respons. Dengan ASP.NET panggilan Layanan Web AJAX, proksi JavaScript dapat dibuat dan digunakan untuk dengan mudah memanggil layanan tanpa khawatir tentang menserialisasikan dan mendeserialisasi pesan JSON. Proksi JavaScript dapat dibuat secara otomatis dengan menggunakan kontrol AJAX ScriptManager ASP.NET.
Membuat proksi JavaScript yang dapat memanggil Layanan Web dicapai dengan menggunakan properti Layanan ScriptManager. Properti ini memungkinkan Anda menentukan satu atau beberapa layanan yang dapat dipanggil halaman AJAX ASP.NET secara asinkron untuk mengirim atau menerima data tanpa memerlukan operasi postback. Anda menentukan layanan dengan menggunakan kontrol AJAX ServiceReference ASP.NET dan menetapkan URL Layanan Web ke properti kontrol Path . Daftar 12 menunjukkan contoh referensi layanan bernama CustomersService.asmx.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/CustomersService.asmx" />
</Services>
</asp:ScriptManager>
Daftar 12. Menentukan Layanan Web yang digunakan di halaman AJAX ASP.NET.
Menambahkan referensi ke CustomersService.asmx melalui kontrol ScriptManager menyebabkan proksi JavaScript dihasilkan secara dinamis dan dirujuk oleh halaman. Proksi disematkan dengan menggunakan <tag skrip> dan dimuat secara dinamis dengan memanggil file CustomersService.asmx dan menambahkan /js ke akhir. Contoh berikut menunjukkan bagaimana proksi JavaScript disematkan di halaman saat penelusuran kesalahan dinonaktifkan di web.config:
<script src="CustomersService.asmx/js" type="text/javascript"></script>
> [! CATATAN] Jika Anda ingin melihat kode proksi JavaScript aktual yang dihasilkan, Anda dapat mengetikKAN URL ke .NET Web Service yang diinginkan ke dalam kotak alamat Internet Explorer dan menambahkan /js ke akhir.
Jika penelusuran kesalahan diaktifkan di web.config, versi debug proksi JavaScript akan disematkan di halaman seperti yang ditunjukkan berikutnya:
<script src="CustomersService.asmx/jsdebug" type="text/javascript"></script>
Proksi JavaScript yang dibuat oleh ScriptManager juga dapat disematkan langsung ke halaman daripada direferensikan menggunakan <atribut src tag skrip> . Ini dapat dilakukan dengan mengatur properti InlineScript kontrol ServiceReference ke true (defaultnya adalah false). Ini dapat berguna ketika proksi tidak dibagikan di beberapa halaman dan ketika Anda ingin mengurangi jumlah panggilan jaringan yang dilakukan ke server. Ketika InlineScript diatur ke true, skrip proksi tidak akan di-cache oleh browser sehingga nilai default false direkomendasikan dalam kasus di mana proksi digunakan oleh beberapa halaman dalam aplikasi AJAX ASP.NET. Contoh penggunaan properti InlineScript diperlihatkan berikutnya:
<asp:ServiceReference InlineScript="true" Path="~/CustomersService.asmx"/>
Menggunakan Proksi JavaScript
Setelah Layanan Web direferensikan oleh halaman AJAX ASP.NET menggunakan kontrol ScriptManager, panggilan dapat dilakukan ke Layanan Web dan data yang dikembalikan dapat ditangani menggunakan fungsi panggilan balik. Layanan Web dipanggil dengan merujuk namespace layanannya (jika ada), nama kelas dan nama Metode Web. Parameter apa pun yang diteruskan ke Layanan Web dapat ditentukan bersama dengan fungsi panggilan balik yang menangani data yang dikembalikan.
Contoh penggunaan proksi JavaScript untuk memanggil Metode Web bernama GetCustomersByCountry() ditampilkan di Daftar 13. Fungsi GetCustomersByCountry() dipanggil saat pengguna akhir mengklik tombol di halaman.
Daftar 13. Memanggil Layanan Web dengan proksi JavaScript.
function GetCustomerByCountry()
{
var country = $get("txtCountry").value;
InterfaceTraining.CustomersService.GetCustomersByCountry(country, OnWSRequestComplete);
}
function OnWSRequestComplete(results)
{
if (results != null)
{
CreateCustomersTable(results);
GetMap(results);
}
}
Panggilan ini mereferensikan namespace layanan InterfaceTraining, kelas CustomersService, dan GetCustomersByCountry Web Method yang ditentukan dalam layanan. Ini meneruskan nilai negara yang diperoleh dari kotak teks serta fungsi panggilan balik bernama OnWSRequestComplete yang harus dipanggil ketika panggilan Layanan Web asinkron kembali. OnWSRequestComplete menangani array objek Pelanggan yang dikembalikan dari layanan dan mengonversinya menjadi tabel yang ditampilkan di halaman. Output yang dihasilkan dari panggilan ditampilkan di Gambar 1.
Gambar 1: Mengikat data yang diperoleh dengan melakukan panggilan AJAX asinkron ke Layanan Web. (Klik untuk melihat gambar ukuran penuh)
Proksi JavaScript juga dapat melakukan panggilan satu arah ke Layanan Web jika Metode Web harus dipanggil tetapi proksi tidak boleh menunggu respons. Misalnya, Anda mungkin ingin memanggil Layanan Web untuk memulai proses seperti alur kerja tetapi tidak menunggu nilai pengembalian dari layanan. Dalam kasus di mana panggilan satu arah perlu dilakukan ke layanan, fungsi panggilan balik yang ditunjukkan dalam Daftar 13 hanya dapat dihilangkan. Karena tidak ada fungsi panggilan balik yang ditentukan, objek proksi tidak akan menunggu Layanan Web mengembalikan data.
Menangani Kesalahan
Panggilan balik asinkron ke Layanan Web dapat menemukan berbagai jenis kesalahan seperti jaringan sedang tidak berfungsi, Layanan Web tidak tersedia atau pengecualian dikembalikan. Untungnya, objek proksi JavaScript yang dihasilkan oleh ScriptManager memungkinkan beberapa panggilan balik didefinisikan untuk menangani kesalahan dan kegagalan selain panggilan balik keberhasilan yang ditunjukkan sebelumnya. Fungsi panggilan balik kesalahan dapat didefinisikan segera setelah fungsi panggilan balik standar dalam panggilan ke Metode Web seperti yang ditunjukkan dalam Daftar 14.
Daftar 14. Menentukan fungsi panggilan balik kesalahan dan menampilkan kesalahan.
function GetCustomersByCountry()
{
var country = $get("txtCountry").value;
InterfaceTraining.CustomersService.GetCustomersByCountry(country,
OnWSRequestComplete, OnWSRequestFailed);
}
function OnWSRequestFailed(error)
{
alert("Stack Trace: " + error.get_stackTrace() + "/r/n" +
"Error: " + error.get_message() + "/r/n" +
"Status Code: " + error.get_statusCode() + "/r/n" +
"Exception Type: " + error.get_exceptionType() + "/r/n" +
"Timed Out: " + error.get_timedOut());
}
Setiap kesalahan yang terjadi ketika Layanan Web dipanggil akan memicu fungsi panggilan balik OnWSRequestFailed() untuk dipanggil yang menerima objek yang mewakili kesalahan sebagai parameter. Objek kesalahan mengekspos beberapa fungsi yang berbeda untuk menentukan penyebab kesalahan serta apakah panggilan habis atau tidak. Daftar 14 menunjukkan contoh penggunaan fungsi kesalahan yang berbeda dan Gambar 2 menunjukkan contoh output yang dihasilkan oleh fungsi.
Gambar 2: Output yang dihasilkan dengan memanggil fungsi kesalahan AJAX ASP.NET. (Klik untuk melihat gambar ukuran penuh)
Menangani Data XML yang Dikembalikan dari Layanan Web
Sebelumnya Anda melihat bagaimana Metode Web dapat mengembalikan data XML mentah dengan menggunakan atribut ScriptMethod bersama dengan properti ResponseFormat-nya. Saat ResponseFormat diatur ke ResponseFormat.Xml, data yang dikembalikan dari Layanan Web diserialisasikan sebagai XML daripada JSON. Ini dapat berguna ketika data XML perlu diteruskan langsung ke klien untuk diproses menggunakan JavaScript atau XSLT. Pada saat ini, Internet Explorer 5 atau yang lebih tinggi menyediakan model objek sisi klien terbaik untuk mengurai dan memfilter data XML karena dukungan bawaannya untuk MSXML.
Mengambil data XML dari Layanan Web tidak berbeda dengan mengambil jenis data lainnya. Mulailah dengan memanggil proksi JavaScript untuk memanggil fungsi yang sesuai dan menentukan fungsi panggilan balik. Setelah panggilan kembali, Anda kemudian dapat memproses data dalam fungsi panggilan balik.
Daftar 15 memperlihatkan contoh panggilan Metode Web bernama GetRssFeed() yang mengembalikan objek XmlElement. GetRssFeed() menerima satu parameter yang mewakili URL untuk umpan RSS yang akan diambil.
Daftar 15. Bekerja dengan data XML yang dikembalikan dari Layanan Web.
function GetRss()
{
InterfaceTraining.DemoService.GetRssFeed(
"https://blogs.interfacett.com/dan-wahlins-blog/rss.xml",
OnWSRequestComplete);
}
function OnWSRequestComplete(result)
{
if (document.all) //Filter for IE DOM since other browsers are limited
{
var items = result.selectNodes("//item");
for (var i=0;i<items.length;i++)
{
var title = items[i].selectSingleNode("title").text;
var href = items[i].selectSingleNode("link").text;
$get("divOutput").innerHTML +=
"<a href='" + href + "'>" + title + "</a><br/>";
}
}
else
{
$get("divOutput").innerHTML = "RSS only available in IE5+";
}
}
Contoh ini meneruskan URL ke umpan RSS dan memproses data XML yang dikembalikan dalam fungsi OnWSRequestComplete(). OnWSRequestComplete() pertama-tama memeriksa apakah browser adalah Internet Explorer untuk mengetahui apakah pengurai MSXML tersedia atau tidak. Jika ya, pernyataan XPath digunakan untuk menemukan semua <tag item> dalam umpan RSS. Setiap item kemudian diulang dan tag judul> dan <tautan> terkait <berada dan diproses untuk menampilkan data setiap item. Gambar 3 menunjukkan contoh output yang dihasilkan dari melakukan panggilan AJAX ASP.NET melalui proksi JavaScript ke Metode Web GetRssFeed().
Menangani Jenis Kompleks
Jenis kompleks yang diterima atau dikembalikan oleh Layanan Web secara otomatis diekspos melalui proksi JavaScript. Namun, jenis kompleks berlapis tidak dapat diakses langsung di sisi klien kecuali atribut GenerateScriptType diterapkan ke layanan seperti yang dibahas sebelumnya. Mengapa Anda ingin menggunakan jenis kompleks berlapis di sisi klien?
Untuk menjawab pertanyaan ini, asumsikan bahwa halaman AJAX ASP.NET menampilkan data pelanggan dan memungkinkan pengguna akhir memperbarui alamat pelanggan. Jika Layanan Web menentukan bahwa jenis Alamat (jenis kompleks yang ditentukan dalam kelas CustomerDetails) dapat dikirim ke klien, maka proses pembaruan dapat dibagi menjadi fungsi terpisah untuk penggunaan kembali kode yang lebih baik.
Gambar 3: Output yang dibuat dari memanggil Layanan Web yang mengembalikan data RSS. (Klik untuk melihat gambar ukuran penuh)
Daftar 16 menunjukkan contoh kode sisi klien yang memanggil objek Alamat yang ditentukan dalam namespace model, mengisinya dengan data yang diperbarui dan menetapkannya ke properti Alamat objek CustomerDetails. Objek CustomerDetails kemudian diteruskan ke Layanan Web untuk diproses.
Daftar 16. Menggunakan jenis kompleks berlapis
function UpdateAddress()
{
var cust = new Model.CustomerDetails();
cust.CustomerID = $get("hidCustomerID").value;
cust.Address = CreateAddress();
InterfaceTraining.DemoService.UpdateAddress(cust,OnWSUpdateComplete);
}
function CreateAddress()
{
var addr = new Model.Address();
addr.Street = $get("txtStreet").value;
addr.City = $get("txtCity").value;
addr.State = $get("txtState").value;
return addr;
}
function OnWSUpdateComplete(result)
{
alert("Update " + ((result)?"succeeded":"failed")+ "!");
}
Membuat dan Menggunakan Metode Halaman
Layanan Web menyediakan cara yang sangat baik untuk mengekspos layanan yang dapat digunakan kembali ke berbagai klien termasuk ASP.NET halaman AJAX. Namun, mungkin ada kasus di mana halaman perlu mengambil data yang tidak akan pernah digunakan atau dibagikan oleh halaman lain. Dalam hal ini, membuat file .asmx untuk memungkinkan halaman mengakses data mungkin tampak seperti overkill karena layanan hanya digunakan oleh satu halaman.
ASP.NET AJAX menyediakan mekanisme lain untuk melakukan panggilan seperti Layanan Web tanpa membuat file .asmx mandiri. Ini dilakukan dengan menggunakan teknik yang disebut sebagai "metode halaman". Metode halaman adalah metode statis (dibagikan dalam VB.NET) yang disematkan langsung di halaman atau file code-beside yang memiliki atribut WebMethod yang diterapkan padanya. Dengan menerapkan atribut WebMethod, mereka dapat dipanggil menggunakan objek JavaScript khusus bernama PageMethods yang dibuat secara dinamis saat runtime. Objek PageMethods bertindak sebagai proksi yang melindungi Anda dari proses serialisasi/deserialisasi JSON. Perhatikan bahwa untuk menggunakan objek PageMethods, Anda harus mengatur properti EnablePageMethods ScriptManager ke true.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
Daftar 17 menunjukkan contoh mendefinisikan dua metode halaman di kelas ASP.NET di samping kode. Metode ini mengambil data dari kelas lapisan bisnis yang terletak di folder App_Code Situs Web.
Daftar 17. Menentukan metode halaman.
[WebMethod]
public static Customer[] GetCustomersByCountry(string country)
{
return Biz.BAL.GetCustomersByCountry(country);
}
[WebMethod]
public static Customer[] GetCustomersByID(string id)
{
return Biz.BAL.GetCustomersByID(id);
}
Ketika ScriptManager mendeteksi keberadaan Metode Web di halaman itu menghasilkan referensi dinamis ke objek PageMethods yang disebutkan sebelumnya. Memanggil Metode Web dilakukan dengan merujuk kelas PageMethods diikuti dengan nama metode dan data parameter yang diperlukan yang harus diteruskan. Daftar 18 memperlihatkan contoh panggilan dua metode halaman yang diperlihatkan sebelumnya.
Daftar 18. Memanggil metode halaman dengan objek JavaScript PageMethods.
function GetCustomerByCountry()
{
var country = $get("txtCountry").value;
PageMethods.GetCustomersByCountry(country, OnWSRequestComplete);
}
function GetCustomerByID()
{
var custID = $get("txtCustomerID").value;
PageMethods.GetCustomersByID(custID, OnWSRequestComplete);
}
function OnWSRequestComplete(results)
{
var searchResults = $get("searchResults");
searchResults.control.set_data(results);
if (results != null) GetMap(results[0].Country,results);
}
Menggunakan objek PageMethods sangat mirip dengan menggunakan objek proksi JavaScript. Anda terlebih dahulu menentukan semua data parameter yang harus diteruskan ke metode halaman lalu menentukan fungsi panggilan balik yang harus dipanggil ketika panggilan asinkron kembali. Panggilan balik kegagalan juga dapat ditentukan (lihat Daftar 14 untuk contoh penanganan kegagalan).
AutoCompleteExtender dan toolkit AJAX ASP.NET
Toolkit AJAX ASP.NET (tersedia dari https://github.com/DevExpress/AjaxControlToolkit) menawarkan beberapa kontrol yang dapat digunakan untuk mengakses Layanan Web. Secara khusus, toolkit berisi kontrol berguna bernama AutoCompleteExtender yang dapat digunakan untuk memanggil Layanan Web dan menampilkan data di halaman tanpa menulis kode JavaScript sama sekali.
Kontrol AutoCompleteExtender dapat digunakan untuk memperluas fungsionalitas kotak teks yang ada dan membantu pengguna menemukan data yang mereka cari dengan lebih mudah. Saat mereka mengetik ke dalam kotak teks, kontrol dapat digunakan untuk mengkueri Layanan Web dan memperlihatkan hasil di bawah kotak teks secara dinamis. Gambar 4 menunjukkan contoh penggunaan kontrol AutoCompleteExtender untuk menampilkan id pelanggan untuk aplikasi dukungan. Saat pengguna mengetikan karakter yang berbeda ke dalam kotak teks, item yang berbeda akan ditampilkan di bawahnya berdasarkan input mereka. Pengguna kemudian dapat memilih id pelanggan yang diinginkan.
Menggunakan AutoCompleteExtender dalam halaman AJAX ASP.NET mengharuskan rakitan AjaxControlToolkit.dll ditambahkan ke folder bin Situs Web. Setelah perakitan toolkit ditambahkan, Anda harus mereferensikannya di web.config sehingga kontrol yang dikandungnya tersedia untuk semua halaman dalam aplikasi. Ini dapat dilakukan dengan menambahkan tag berikut dalam tag kontrol> web.config<:
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
Dalam kasus di mana Anda hanya perlu menggunakan kontrol di halaman tertentu, Anda dapat mereferensikannya dengan menambahkan direktif Referensi ke bagian atas halaman seperti yang ditunjukkan berikutnya daripada memperbarui web.config:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
Gambar 4: Menggunakan kontrol AutoCompleteExtender. (Klik untuk melihat gambar ukuran penuh)
Setelah Situs Web dikonfigurasi untuk menggunakan ASP.NET AJAX Toolkit, kontrol AutoCompleteExtender dapat ditambahkan ke halaman sama seperti Anda menambahkan kontrol server ASP.NET reguler. Daftar 19 memperlihatkan contoh penggunaan kontrol untuk memanggil Layanan Web.
Daftar 19. Menggunakan kontrol ASP.NET AJAX Toolkit AutoCompleteExtender.
<ajaxToolkit:AutoCompleteExtender ID="extTxtCustomerID" runat="server"
MinimumPrefixLength="1" ServiceMethod="GetCustomerIDs"
ServicePath="~/CustomersService.asmx"
TargetControlID="txtCustomerID" />
AutoCompleteExtender memiliki beberapa properti yang berbeda termasuk ID standar dan properti runat yang ditemukan pada kontrol server. Selain itu, ini memungkinkan Anda untuk menentukan berapa banyak karakter yang dikueri oleh jenis pengguna akhir sebelum Layanan Web dikueri untuk data. Properti MinimumPrefixLength yang ditunjukkan di Daftar 19 menyebabkan layanan dipanggil setiap kali karakter di ketik ke dalam kotak teks. Anda harus berhati-hati mengatur nilai ini karena setiap kali pengguna mengetik karakter, Layanan Web akan dipanggil untuk mencari nilai yang cocok dengan karakter di kotak teks. Layanan Web untuk dipanggil serta Metode Web target didefinisikan menggunakan properti ServicePath dan ServiceMethod masing-masing. Terakhir, properti TargetControlID mengidentifikasi kotak teks mana yang akan menghubungkan kontrol AutoCompleteExtender.
Layanan Web yang dipanggil harus memiliki atribut ScriptService yang diterapkan seperti yang dibahas sebelumnya dan Metode Web target harus menerima dua parameter bernama prefixText dan count. Parameter prefixText mewakili karakter yang di ketik oleh pengguna akhir dan parameter hitungan mewakili berapa banyak item yang akan dikembalikan (defaultnya adalah 10). Daftar 20 memperlihatkan contoh Metode Web GetCustomerIDs yang dipanggil oleh kontrol AutoCompleteExtender yang diperlihatkan sebelumnya di Daftar 19. Metode Web memanggil metode lapisan bisnis yang pada gilirannya memanggil metode lapisan data yang menangani pemfilteran data dan mengembalikan hasil yang cocok. Kode untuk metode lapisan data ditampilkan di Listing 21.
Daftar 20. Memfilter data yang dikirim dari kontrol AutoCompleteExtender.
[WebMethod]
public string[] GetCustomerIDs(string prefixText, int count)
{
return Biz.BAL.GetCustomerIDs(prefixText, count);
}
Daftar 21. Memfilter hasil berdasarkan input pengguna akhir.
public static string[] GetCustomerIDs(string prefixText, int count)
{
//Customer IDs cached in _CustomerIDs field to improve performance
if (_CustomerIDs == null)
{
List<string> ids = new List<string>();
//SQL text used for simplicity...recommend using sprocs
string sql = "SELECT CustomerID FROM Customers";
DbConnection conn = GetDBConnection();
conn.Open();
DbCommand cmd = conn.CreateCommand();
cmd.CommandText = sql;
DbDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
ids.Add(reader["CustomerID"].ToString());
}
reader.Close();
conn.Close();
_CustomerIDs = ids.ToArray();
}
int index = Array.BinarySearch(_CustomerIDs, prefixText, new CaseInsensitiveComparer());
//~ is bitwise complement (reverse each bit)
if (index < 0) index = ~index;
int matchingCount;
for (matchingCount = 0; matchingCount < count && index + matchingCount < _CustomerIDs.Length; matchingCount++)
{
if (!_CustomerIDs[index + matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))
{
break;
}
}
String[] returnValue = new string[matchingCount];
if (matchingCount > 0)
{
Array.Copy(_CustomerIDs, index, returnValue, 0, matchingCount);
}
return returnValue;
}
Kesimpulan
ASP.NET AJAX memberikan dukungan yang sangat baik untuk memanggil Layanan Web tanpa menulis banyak kode JavaScript kustom untuk menangani pesan permintaan dan respons. Dalam artikel ini Anda telah melihat cara mengaktifkan AJAX .NET Web Services untuk memungkinkan mereka memproses pesan JSON dan cara menentukan proksi JavaScript menggunakan kontrol ScriptManager. Anda juga telah melihat bagaimana proksi JavaScript dapat digunakan untuk memanggil Layanan Web, menangani jenis sederhana dan kompleks dan menangani kegagalan. Terakhir, Anda telah melihat bagaimana metode halaman dapat digunakan untuk menyederhanakan proses pembuatan dan pembuatan panggilan Layanan Web dan bagaimana kontrol AutoCompleteExtender dapat memberikan bantuan kepada pengguna akhir saat mereka mengetik. Meskipun UpdatePanel yang tersedia di ASP.NET AJAX tentu akan menjadi kontrol pilihan bagi banyak programmer AJAX karena kesederhanaannya, mengetahui cara memanggil Layanan Web melalui proksi JavaScript dapat berguna di banyak aplikasi.
Bio
Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET dan XML Web Services) adalah instruktur pengembangan .NET dan konsultan arsitektur di Pelatihan Teknis Antarmuka (http://www.interfacett.com). Dan mendirikan XML untuk situs Web Pengembang ASP.NET (www.XMLforASP.NET), ada di Biro Pembicara INETA dan berbicara di beberapa konferensi. Dan menulis bersama Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorial dan Kode (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks dan xml yang ditulis untuk ASP.NET Developers (Sams). Ketika dia tidak menulis kode, artikel, atau buku, Dan menikmati menulis dan merekam musik dan bermain golf dan bola basket dengan istri dan anak-anaknya.
Scott Cate telah bekerja dengan teknologi Microsoft Web sejak 1997 dan merupakan Presiden myKB.com (www.myKB.com) di mana ia mengkhususkan diri dalam menulis aplikasi berbasis ASP.NET yang berfokus pada solusi Perangkat Lunak Pangkalan Pengetahuan. Scott dapat dihubungi melalui email di scott.cate@myKB.com atau blognya di ScottCate.com