Ajax etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Ajax etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

22 Mart 2012 Perşembe

Ajax(Jquery) işlemleri

Default.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ajaxApp._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 src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function CallAspxPage() {
            $.ajax({
                type: 'GET',
                url: 'Ajax1.aspx',
                success: function (result) {
                    $('#sonuc').html(result);
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        //aspx sayfasına querystring ile parametre verme
        function CallAspxPageWithQueryString() {
            $.ajax({
                type: 'GET',
                url: 'Ajax1.aspx',
                data: "name=recep&surname=günay",
                success: function (result) {
                    $('#sonuc').html(result);
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        // xml formatında web servis çağırma
        function CallWebserviceXML() {

            $.ajax({
                type: 'POST',
                url: 'http://localhost:2529/webservice1.asmx/GetAllCustomers',
                data: 'start=c&kactane=2',
                success: function (result) {

                    $(result).find('myCustomers').each(function () {

                        $("#sonuc").append($(this).find('name').text() + " / " + $(this).find('adress').text() + "<br/>");

                    });
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        //json formatında webservis çağırma
        function CallWebserviceJson() {

            $.ajax({
                type: 'POST',
                url: 'http://localhost:2529/webservice1.asmx/GetAllCustomers',
                data: '{ "start":"c","kactane":"4" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (result) {
                    $.each(result.d, function (i) {
                        $("#sonuc").append(this.name + " / " + this.adress + "<br/>");
                    });
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }

        //Bir aspx sayfasındaki methodu çağırmak, methodun başına  [System.Web.Services.WebMethod] koymayı unutma
        function CallPageMethod() {
            $.ajax({
                type: 'POST',
                url: 'Default.aspx/jQueryPageMethod',
                data: '{ "name":"Recep" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (result) {
                    $('#sonuc').html(result.d);
                },
                error: function () {
                    alert('Talep esnasında sorun oluştu. Yeniden deneyin');
                }
            });
        }
      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="text1" />
        <input type="button" value="Seç" onclick="CallWebserviceJson();" /><br />
        <span id="sonuc"></span>
    </div>
    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ajaxApp
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [System.Web.Services.WebMethod]
        public static string jQueryPageMethod(string name)
        {
            return "<h3>jQuery - PageMethod Talebi</h3>Merhaba " + name;
        }
    }
}



/---------------------------------------------------------------------/
webservice1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace ajaxApp
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public List<myCustomers> GetAllCustomers(string start, string kactane)
        {
            int i=Convert.ToInt32(kactane);

            DB context = new DB();
            List<Customer> customerList = new List<Customer>();
            customerList = context.Customers.Where(p => p.CompanyName.StartsWith(start)).Take(i).ToList();

            List<myCustomers> newList = new List<myCustomers>();

            foreach (var item in customerList)
            {
                newList.Add(new myCustomers() { name = item.CompanyName, adress = item.Address });
            }


            return newList;
        }
    }


}

 /---------------------------------------------------------------/
myCustomer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ajaxApp
{
    public class myCustomers
    {
        public string name { get; set; }
        public string adress { get; set; }
    }
}
 /-------------------------------------------------------------------------/

Ajax1.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ajaxApp
{
    public partial class Ajax1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!Page.IsPostBack)
            {
                lblNameSurname.Text = Request.QueryString["name"] + " " + Request.QueryString["surname"];
            }

        }
    }
}







23 Ocak 2012 Pazartesi

Ajax ( Asynchronous JavaScript and XML)

Ajax ( Asynchronous JavaScript and XML)
Temel amacı sayfanın bütününü etkilemeden arka planda sunucuyla(web server) küçük miktarlarda veri alışverişi yaparak sayfaları daha hızlı bir şekilde güncellemektir. Ajax sayesinde sayfanın tamamının “post-back” olmasından kurtulmuş oluruz ve böylece sayfanın performansını arttırmış oluruz (etkileşim-hız-kullanılabilirlik). Ajax kullanımına hepimizin tanıdık olduğu bir örnek verecek olursak; www.google.com arama motorunu açtığımızda aranacak kelimeyi girmeye başladığımız anda google bize benzer aranan kelimeleri bir öneri halinde getirir ve bunu sayfayı “post-back” yapmadan yapar. Biz daha kelimeyi yazar yazmaz, tarayıcımız sunucuya javascript aracılığıyla “http request” gönderir ve daha önce aranmış benzer kelimeleri bize geri getirir. Bu örnekle Ajax’sın amacının anlaşıldığını düşünüyorum.
 Asynchronous(Eşzamansız) ve synchronous(Eşzamanlı) konseptlerini açıklamakla işe devam edelim. Eşzamansız demek; yazdığımız kod bloğundan daha sonuç almadan yeni kod bloğuna geçmektir. Örneğin bir sayının faktöriyelini bulan bir fonksiyona bir sayı gönderdik, bu fonksiyon daha bize sonuç göndermeden biz başka işlemler yapmaya devam edersek buna eşzamansız(Asynchronous) denir. Fakat Fonksiyondan sonucun gelmesini bekler, ve sonuç geldikten sonra diğer işlemleri yapmaya devam edersek buna eşzamanlı(synchronous) işlem denir.
Ajax uygulamaları yazmımızı sağlayan temel nesnemiz “XMLHttpRequest” tir. Bu nesne sayesinde sunucuya bir request(istek) gönderebiliriz. Hemen tüm tarayıcılar bu nesneyi tanımaktadır. Fakat internet Explorer 7 den daha önceki Microsoft tarayıcılar bu nesneyi kullanmamaktadır. O tarayıcılarda da bu nesne yerine geçen “ActiveXObject” nesnesi kullanılmaktadır. Hiçbir tarayıcada sorun yaşamak istemiyorum diyorsanız ikisini ortaklaşa kullanmak durumundayız. Tarayıcıya göre bir htpprequest nesnesi yaratmak istiyorsak, aşağada ki yöntemi kullanabiliriz.
function readyAJAX() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return "Tarayıcı çok eski”;
}
                                 }
}
}
Request nesnemizi yaratacak fonksiyonu yazdıktan sonra diğer işlemlere geçelim. İlk olarak synchronous(senkron-eşzamanlı) response örneği ile başlayalaım daha sonra asynchronous örnekle devam edeceğiz. Senkron çalışmak, asenkron çalışmaya nazaran kontrolü daha basittir.
Var requestObj= readyAJAX();
requestObj.open("GET", "http://www.test.com/ikiSayiyiTopla?num1=10&num2=20", false);
requestObj.send();
if (requestObj.status == 200) {
alert(requestObj.responseXML);
} else {
alert(requestObj.statusText);
}
Öncelikle request nesnemizi fonksiyonumuz yardımıyla yarattık. Daha sonra open ve send methodlarıyla xml formatındaki datamızı okuduk(bununla ilgili bir örneği ‘javascript ile xml okuma adlı paylaşımımda bulabilirsiniz’). Open fonksiyonu içinde yazan sayfa bize url ile gönderdiğimiz iki sayıyı toplayıp sonucunu gönderecektir(bu sadece test amaçlıdır, bu webservisi sizin yazmanız gerekecektir). Open methodunun son parametresinin “false” olması bunun bir senkron işlem olduğunun göstergesidir. Methottan bir değer dönmeden alt satırlara geçilmez. Kullanıcı sunucudan “response” aldığında, “status” methoduna bakacaktır. Eğer “status code” 200 ise işlem başarıyla gerçekleşmiştir ve response text ekrana yazdırılacaktır. Eğer “status code” 200 den farklı ise “statu” ekrana yazdırılacaktır.
Bu uygulamanın aynısını asynchronous yazacak olursak;
devam edeceğiz. Senkron çalışmak, asenkron çalışmaya nazaran kontrolü daha basittir.
Var requestObj= readyAJAX();
requestObj.open("GET", "http://www.test.com/ikiSayiyiTopla?num1=10&num2=20", true);
requestObj.send();

requestObj.onreadystatechange = function() {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
alert(requestObj.responseText);
} else {
alert(requestObj.statusText);
}
}
}

Buradaki readyState=4 “ün anlamı response’un tamamiyle alındığını gösterir. Asekronkron işlemlerde readyState’in 4 ‘e ulaşıp ulaşmadığını “onreadystatechange” olayıyla kontrol ederiz.

Sonuç : Javascript ile senkron ve asenkron yollarla bir webservise veri gönderip, bu veriyi işletip bir başka veri elde ettik. Bu işlemi yaparken sayfamızı “post-back” ettirmeye ihtiyaç duymadık.