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.

JQuery ile AJAX Islemleri

Ajax fonksiyonun aldigi parametreler ve anlamlari

Bir cevap yazın Cevabı iptal et