توابع مختلفی برای کار با Ajax در Jquery وجود دارد که شاید تا به حال فقط با متد $.ajax() آشنا شده باشید.اما برای کار با Ajax در JQuery توابع دیگری نیز وجود دارد که بسته به نیازمان می توانیم از آنها استفاده کنیم.

در لیست زیر نام ۵ تابع برای کار با Ajax در JQuery را مشاهده می کنید:

۱٫Load

2.getJson

3.Get

4.POST

5.Ajax

در ادامه به معرفی هر کدام و خصوصیات آنها می پردازیم…

متد Load :

توسط این متد می توان یک درخواست Ajax ایجاد کرد.در این متد می توان اطلاعات را به صورت GET و POST ارسال کرد.

شکل کلی متد:

.load(url, parameters, callback function)

Url :آدرس صفحه ای که می خواهیم درخواست Ajax را توسط متد GET و POST به آن بفرستیم.

Parameters :نام پارامتر و مقداری که به صفحه فرستاده می شود.

Callback :نتیجه اجرای درخواست می باشد.

مثال:

 var ajax_load = "loading...";
        var loadUrl = "LoadMethod.aspx";
        $(document).ready(function () {
            $("#LoadMethod").click(function () {
                $("#result").html(ajax_load).load(loadUrl, function (response, status, xhr) {
                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $("#Error").html(msg + xhr.status + " " + xhr.statusText);
                    }
                });
                return false;
            });

کد HTML :

<div id="containter"><p>In the name of GOD</p></div>

در کد بالا نحوه استفاده از متد Load را مشاهده می کنید. تنها کافی آدرس صفحه مورد نظر را تعیین کنیم تا اطلاعات در تگ DIV نمایش داده شود.در صورت خطا نیز می توان توسط متغیر status براحتی خطا را handle کرد.نکته دیگری که در مورد این متد این است که توسط این متد می توان قسمتی از صفحه را نیز Load کرد که برای این منظور از این کد استفاده می کنیم:

var loadUrl = "TestPage.htm #dvContainer";

در این دستور محتوای تگ DIV  با id= dvContainer  خوانده می شود.

خصوصیات مهم:

-          اجازه فراخوانی Ajax در هر دو حالت GET و POST را فراهم می آورد.

-          اجازه Load شدن قسمتی از صفحه را می دهد.

متد getJson :

فراخوانی Ajax و دریافت اطلاعات به صورت Json .این متد برای ارسال اطلاعات از روش GET استفاده می کند و امکان ارسال اطلاعات به صورت POST وجود ندارد.

شکل کلی متد:

$.getJSON(url, parameters, callback function)

Url :آدرس صفحه ای که می خواهیم درخواست Ajax را توسط متد GET به آن بفرستیم.

Parameters :نام پارامتر و مقداری که به صفحه فرستاده می شود.

Callback :نتیجه اجرای درخواست می باشد در صورتیکه عملیات موفقیت آمیز باشد.

مثال:

  var jsonUrl = "Json.aspx";
            $("#btnJson").click(function () {
                $("#result").html(ajax_load);
                $.getJSON(jsonUrl, function (json) {

                    var result = json[0].Name + "<br>" + json[0].Age + "<br>" + json[0].Sex;
                    $("#result").html(result);
                }
                );
                return false;
            });

در کد بالا سطر اول از اطلاعات دریافتی در تگ result نمایش داده می شود.

نکته ای که در این متد وجود دارد این است که دریافت اطلاعات حتما باید به صورت Json باشد.مانند کد زیر:

  List<person> personlist = new List<person>();
        person person = new Json.person();
        person.Name = "Mohammadreza Shakeri";
        person.Age = "24";
        person.Sex = "Male";
        personlist.Add(person);
        var oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        var outs = oSerializer.Serialize(personlist);
        Context.Response.Write(outs);
        Response.End();

خصوصیات مهم:

-          ارسال اطلاعات فقط به صورت GET امکان پذیر می باشد.

-          اطلاعات دریافتی در قالب Json می باشد.

متد get :

توسط این متد می توان یک درخواست Ajax ایجاد کرد که در این متد ارسال اطلاعات فقط به صورت GET امکان پذیر است.در این متد اطلاعات دریافتی می تواند در یکی از فرمت های xml،html،text،script،json و jsonp باشد.

شکل کلی متد:

$.get(url, parameters, callback function)

Url :آدرس صفحه ای که می خواهیم درخواست Ajax را توسط متد GET به آن بفرستیم.

Parameters :نام پارامتر و مقداری که به صفحه فرستاده می شود.

Callback :نتیجه اجرای درخواست می باشد که محتوی دو پارامتر می باشد.پارامتر اول نتیجه اجرای درخواست می باشد و پارامتر دوم وضعیت اجرای درخواست می باشد.

 var getUrl = "GetRequest.aspx";
            $("#btnGet").click(function () {
                $("#result").html(ajax_load);

                $.get(getUrl, { Name: "Mohammadreza" }, function (result) {
                    $("#result").html(result);
                }
                );
                return false;
            });

  if (Request.QueryString["Name"] != null)
        {
            NameLbl.Text = Request.QueryString["Name"].ToString();
        }

در کد بالا متغیر Name به صفحه مورد نظر ارسال می شود.نحوه دریافت متغیر Name در صفحه مورد نظر مانند دربافت یک querystring می باشد.در این مثال نتیجه در تگ result نمایش داده می شود.

خصوصیات مهم:

-          امکان دریافت اطلاعات در هر نوع قالبی وجود دارد.

-          ارسال اطلاعات به صورت GET .

متد post :

تمامی خصوصیات این متد مانند get می باشد با این تفاوت که ارسال اطلاعات فقط به صورت POST امکان پذیر است.

شکل کلی متد:

$.post(url, parameters, callback function)

Url :آدرس صفحه ای که می خواهیم درخواست Ajax را توسط متد POST به آن بفرستیم.

Parameters :نام پارامتر و مقداری که به صفحه فرستاده می شود.

Callback :نتیجه اجرای درخواست می باشد که محتوی دو پارامتر می باشد.پارامتر اول نتیجه اجرای درخواست می باشد و پارامتر دوم وضعیت اجرای درخواست می باشد.

در کد زیر نحوه درخواست Ajax توسط متد post را مشاهده می کنید:

  var postUrl = "PostRequest.aspx";
            $("#btnPost").click(function () {
                $("#result").html(ajax_load);

                $.post(postUrl, { Name: "Mohammadreza" }, function (result) {
                    $("#result").html(result);
                }
                );
                return false;
            });

نحوه دریافت پارامتر سمت سرور نیز به صورت زیر می باشد.

  if (Request.Form["Name"] != null)
        {
            NameLbl.Text = Request.Form["Name"].ToString();
        }

خصوصیات مهم:

-          امکان دریافت اطلاعات در هر نوع قالبی وجود دارد.

-          ارسال اطلاعات به صورت POST .

متد Ajax :

توسط این متد نیز می توان یک درخواست Ajax ایجاد کرد که این متد به تنهایی تمامی خصوصیات متد  های قبلی را شامل می شود.

شکل کلی متد:

.ajax( object of key/value pairs )

Type :در این قسمت نوع ارسال اطلاعات را مشخص می کنیم که این متد از هر دو نوع GET و POST پشتبانی می کند.در صورت عدم تعیین نوع این پارامتر به صورت پیش فرض نوع ارسال GET می باشد.

Url :آدرس صفحه ای که می خواهیم درخواست Ajax را به آن بفرستیم.

data:نام پارامتر و مقداری که به صفحه فرستاده می شود.

Success:در صورت موفقیت آمیز بودن درخواست نتیجه را می توان در این قسمت کنترل کرد.

مثال:

 var ajaxUrl = "Json.aspx";
            $("#btnAjax").click(function () {
                $("#result").html(ajax_load);
                $.ajax({
                    type: "GET", //GET or POST or PUT or DELETE verb
                    url: ajaxUrl, // Location of the service
                    data: "", //Data sent to server
                    contentType: "", // content type sent to server
                    dataType: "json", //Expected data format from server
                    processdata: true, //True or False
                    success: function (json) {//On Successfull service call
                        var result = json[0].Name;
                        $("#result").html(result);
                    },
                    error: ServiceFailed// When Service call fails
                });
                return false;
            });

        });

خصوصیات مهم:

-          امکان ارسال اطلاعات به روش های مختلف.

-          اجازه کنترل درخواست وقتی که خطایی رخ می دهد یا عملیات با موفقیت انجام می شود.

ممکن است تا کنون با این مشکل برخورد کرده باشید که بخواهید تعداد زیادی داده را درون بانک اطلاعاتی در SQL SERVER  وارد کنید و مجبور به insert دستی شده  اید. به عنوان مثال می خواهیم سه رکورد زیر را درون جدول به نام test وارد کنیم و کد آن را بصورت زیر می نویسیم.

insert into test (col1) values ('a')
insert into test (col1) values ('b')
insert into test (col1) values ('c')

در SQL SERVER 2008 به بعد امکانی ایجاد گردید که می توان به صورت همزمان چند
 رکورد را وارد کرد و آن به این صورت است که بعد از وارد کردن مقدار اول با
گذاشتن یک کاما مقدار دوم و… را اضافه می کنیم. کد زیر همان عملیات insert
کد فوق را انجام می دهد.

insert into test (col1) values ('a'), ('b'), ('c')

اما تفاوت دو کد فوق چیست؟
اول آنکه sql server دستور دوم را بصورت یک دستور می بینید و این باعث
می شود که سرعت عملیات سریع تر باشد.
دوم اینکه با توجه به آنکه دستور دوم یک دستور دیده می شود تعداد
اطلاعات درج شده درون فایل log هم کمتر می شود و این باعث می شود
 که حجم فایل log کمتر شود.
 

بسیاری از مواقع ممکن است می خواهیم اطلاعاتی را از SQL SEVRER بازیابی کنیم اما تعداد این اطلاعات بسیار زیاد است و باعث کند شدن سیستم می شود. بعنوان مثال فرض کنید می خواهیم گردش حساب یک مشتری را نمایش دهیم و اگر تعداد گردش این مشتری زیاد باشد مثلا ۱۰۰۰ تا و بخواهیم کل این اطلاعات را بازیابی و به گرید بایند کنیم بسیار طولانی خواهد شد. حل اگر برنامه ما تحت وب باشد باعث کند شدن سرعت سایت می شود.

از SQL SERVER2005 به بعد امکان جدیدی در این نرم افزار اضافه گردید که باعث می شود این گونه مسائل را براحتی حل کنیم. و آن تابع Row_Number()  در دستور  WITH می باشد. این دستور یک جدول (SET) مجازی است که فقط یک بار می توان از آن SELECT استفاده کرد.

فرض کنید یک جدول ACC داریم و می خواهیم اطلاعات را بصورت ۲۰ تا ۲۰ تا واکشی کنیم. بصورت زیر عمل می کنیم.

with list

as ( select row_number()  over (order by (AccDate) desc )as rowNumber , * from acc
where accNo =@accNumber)

select * from list where rowNumber between 1 and 20

این دستور  ۲۰ تا اطلاعات را از جدول می خواند و نمایش می دهد . تابع row_number() به ازای هر رکورد یک عدد تخصیص می دهد و این عدد بصورت پشت سرهم می باشد. و گفته شده است که این عدد را روی ستون تاریخ و بصورت صعودی مرتب کند.

کافی است در stored procedure تعداد  را بصورت پارامتری وارد کنیم.

برای رسم خط در Html5 ابتدا تگ زیر را اضافه می کنیم

<canvas id=”canvas1″ width=”800″ height=”600″></canvas>

بعد باید مختصات خط رو داخل محدوده ای که برای کلاس canvas دادیم به شکل زیر در تگ script مشخص کنیم

var khat = c.getContext("2d");
khat.lineTo(20, 100);
khat.lineTo(20, 300);
khat.stroke();

سلام

ما چند نفریم اینجا که میخوایم درباره برنامه نویسیه وب بنویسیم.

قبلا اینجا مینوشتیم چون یه سری مشکلات داشت ، تصمیم گرفتیم بیایم اینجا!

حالا هم کم کم شروع میکنیم و دوباره برمی‌گردیم به روزای سابق.

امیدواریم محتوای خوب و مفیدی ارائه بدیم.

همین!