JQuery ile AJAX Islemleri – Web Servis Çagirma

JQuery ile AJAX Islemleri

Bu makalemizde jQuery kütüphanesini kullanarak ASP.NET sayfasindan bir Web servisine yapilacak AJAX çagrilarinin nasil yönetilecegini inceleyecegiz.

Ilk olarak jQuery kütüphanesinde AJAX taleplerini gerçeklestirecegimiz ajax isimli fonksiyonu taniyalim.

Ajax fonksiyonun aldigi parametreler ve anlamlari

  • type : Yapilacak talebin veri iletim yöntemi. GET, POST gibi
  • data : Web servisin aldigi parametrelerin eklendigi parametre (data: “{‘Parametremizin Adi’:’Eklenecek deger’}” seklinde).
  • url : Talebin yapilacagi adres.
  • contentType : Dönecek olan sonuç json türünde olacagi için bunu belirtmemiz gerekiyor.
  • dataType : Dönecek olan sonuç json türünde olacagi için bunu belirtmemiz gerekiyor.
  • success : Talebin basarili bitmesi durumunda çalisacak fonksiyon. Burada talep sonucunda gelen veriler sayfaya islenir.
  • error : Talebin hatali olmasi veya bir sorun olmasi durumunda çalisacak fonksiyon.
$.ajax({ type: "POST", data: "{}", url: "Default.aspx/AJAXWebService", contentType: "application/json; charset=utf-8", dataType: "json", success: function(sonuc) { $('#lblSonuc').html(sonuc.d); }, error: function() { alert('Bir sorun olustu. Yeniden deneyin'); } });
.

Ajax fonksiyonumuzu olusturduktan sonra Default.aspx sayfamizin son hali asagidaki gibi oldu.

Default.aspx <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> function btnTalep_onclick() { $.ajax({ type: "POST", data: "{}", url: "Default.aspx/AJAXWebService", contentType: "application/json; charset=utf-8", dataType: "json", async: true, success: function(sonuc) { $(‘#lblSonuc’).html(sonuc.d); }, error: function() { alert(‘Bir sorun olustu. Yeniden deneyin’); } }); } </script> </head> <body style="height: 45px; width: 960px"> <form id="form1" runat="server"> <div> <span id="lblSonuc"></span> <br /> <input id="btnTalep" type="button" value="Talep Et" onclick="btnTalep_onclick()" /> </div> </form> </body> </html>

Simdi sira geldi ajax taleplerimizi yapacagimiz web metodu olusturmaya, burada önemli olan husus web metodumuzun shared yani static olmasi;

<WebMethod()> _ Public Shared Function AJAXWebService() As String Return "Merhaba JQuery ile AJAX - " & Now End Function

Web metodumuzuda olusturduktan sonra kod sayfamizin son hali asagidaki gibi oldu.

Default.aspx.vb Imports System.Web.Services Public Class _Default Inherits System.Web.UI.Page <WebMethod()> _ Public Shared Function AJAXWebService() As String Return "Merhaba JQuery ile AJAX - " & Now End Function End Class
.

Hepsi Bu kadar uygulamamizin çiktisi asagidaki gibi asenkron olarak web servis tarafindan gönderildi.

Tags:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir