آموزش جامع کار با هسته Ajax

[aminghaderi]

با اجازه اساتید.
در این تاپیک قصد دارم آموزش کامل کار با کد های اصلی اجکس (هسته اجکس) رو قرار بدم و توضیحاتی که خواهید دید تماما تجربیات این جانب در کار با اجکس در چند پروژه بوده است.

نکات ضروری:
1- اسفاده از مطالب این تاپیک برای عموم می باشد و نشر آن با ذکر نام نویسنده و سایت برنامه نویس بلامانع است.
2- تابع PersianAjax به صورت OpenSource منتشر شده است و از قانون : GNU/GPL پیروی می کند.
@license http://www.gnu.org/copyleft/gpl.html GNU/GPL

3- لطفا برای تشکر پستی ایجاد نکنید و از دکمه تشکر پست استفاده شود.
4- اگر ایرادی در تاپیک و مطالب آن مشاهده کردید (غلط املایی و ...) ، از طریق پیام خصوصی اعلام کنید تا رفع کنم.
5- این تاپیک کامل شد.

فهرست :
1- معرفی شی XmlHttpRequest .
2- معرفی هسته اجکس .
3- تابع PersianAjax (تابع جامع کار با اجکس).
4- فرستادن یک پارامتر به سرور و در یافت یک مقدار از سرور.
5- فرستادن چند پارامتر به سرور و در یافت چند مقدار از سرور.
6- اسفاده از تابع PersianAjax در JQuery
7- تشکر ها.

مدیران عزیز اگر امکان مرتب سازی این تاپیک هست (به صورتی که فصل های آموزش پشت سر هم از بالا مرتب شوند و پست های دیگر همه زیر فصل ها اصلی قرار بگیرید ) ممنون می شوم این کار را انجام دهید تا تاپیک مرتب تر جلوه کند.
با تشکر

کلمه عبور : barnamenevis.org

[aminghaderi]

شی XmlHttpRequest مجموعه ای از توابع API برای ارتباط مرورگر با سرور می باشد که این شی بروی مرور گر ایجاد می شود و عملیات انتقال داده از کلاینت به سرور را دارد.
این شی قابلیت فرستادن متن به سرور و دریافت متن از سرور را دارد.
Refrence (http://www.webopedia.com/TERM/X/XMLHttpRequest.html)

این شی در تمامی مرورگر ها جز IE6 پشتیبانی می شود و برای IE6 ، ماکروسافت شی ای را با نام:

ActiveXObject('Microsoft.XMLHTTP')معرفی کرده است که همان عملیات را انجام می دهد.

به دلیل اینکه IE6 هنوز کامل منسوخ نشده پس ما باید اون رو در نظر داشته باشیم!

[aminghaderi]

هسته اجکس :



<script language="javascript" type="text/javascript">

var xmlHttp = null;
function Create()
{
if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
else
{
xmlHttp=new XMLHttpRequest();
}
return xmlHttp;
}
function Main(Value)
{
Create();
xmlHttp.open('GET','Request.aspx?Value='+Value,tru e);
xmlHttp.onreadystatechange= update;
xmlHttp.send(null);
}
function update()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
document.getElementById("mdiv").innerHTML=xmlHttp.responseText;
}
else
{
alert("Problem With Server");
}
}
}
</script>
توضیح :



var xmlHttp = null

متغیری برای ساخت شی XmlHttpRequest که باید مقدار پیش فرض null باشد.




function Create()
{
if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
else
{
xmlHttp=new XMLHttpRequest();
}
return xmlHttp;
}

تابع Create وظیفه ساخت شی XmlHttpRequest رو بر عهده دارد.



if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}

این شرط به این معناست که اگر مرورگر فعلی (مرورگری که سایت درون ان باز می شود) از کلاس ActiveXObject پشتیبانی می کند ، یک شی از این کلاس ساخته شود و به متغیر xmlHttp نسبت داده شود.
مروگری که از این کلاس استفاده می کند ، IE6 هست واین شرط عملا برای IE6 در نظر گرفته شده است.



else
{
xmlHttp=new XMLHttpRequest();
}

خوب به دلیل اینکه تمامی مرورگر ها جز IE6 از کلاس XMLHttpRequest پشتیبانی می کنند ، پس در صورتی که مرورگر فعلی ما اینترنت اکسپلور نبود ، این شی ساخته می شود.
مثلا در Opera - Firefox و ... این شی ساخته می شود.



function Main(Value)
{
Create();
xmlHttp.open('GET','Request.aspx?Value='+Value,tru e);
xmlHttp.onreadystatechange= update;
xmlHttp.send(null);
}

تابع Main مرکزیت این عملیات رو برعهده دارد؟! با فراخانی تابع Create ابتدا شی xmlHttp ساخته شده و بعد شی برای ارتباط با سرور باز می شود که 3 پارامتر دارد ، اولی نحوه انتقال داده رو مشخص می کند GET و دومی URL صفحه سمت سرور را می گیرد (صفحه ای که مقادیر باید به آن پاس داده شود) و سوم هم که کلمه true قرار می گیرد.
در خط بعدی تغییرات پروپرتی readyState رو از تابع update می گیرد.
نکته: نکته مهمی که اینجا وجود دارد این است که برای درست نسبت دادن تابع update به پروپرتی onreadystatechange حتمی باید به همین شکل نوشته شود در غیر این صورت در ساختار شی مشکل به وجود خواهد آمد و به سادگی قابل فهمیدن نیست؟!

برای مثال روش نوشتن شی که منجر به از کار افتادن شی شده و خطا هم گرفته نمی شود:



xmlHttp.onreadystatechange= update;





و در ادامه خود تابع update



function update()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
document.getElementById("mdiv").innerHTML=xmlHttp.responseText;
}
else
{
alert("Problem With Server");
}
}

تابع update حلقه مرکزی هسته می باشد به این صورت که با ارتباط مداوم خود با سرور عملیات گرفتن یا Fetch کردن اطلاعات رو انجام می دهد.
شی xmllHttp ساخته شده ، محور این ارتباطات با سرور هست به طوری که 4 با عمل رفت و برگشت در سرو را برای گرفتن اطلاعات انجام می دهد و گزارش رفت و برگشت خودش را در قالب پروپرتی readyState خروجی می دهد که با توجه به خروجی readyState موقعیت فعلی شی مشخص می شود.
پروپرتی status نیز وظیفه چک کردن ارتباط با سرور را دارد که حالت 200 آن به این معناست که رابطه ی کلاینت با سرور کامل ایجاد شده و مشکلی وجود ندارد.


حالت های خروجی readyState و پیام های آن :
وقتی ارتباط با سرور با موفقیت ایجاد شد و شی عملیات ارسال پارامتر و ساخت شی و واکشی اطلاعات و اوردن اطلاعات را با موفقیت انجام داد ، حالا نوبت به چاپ اطلاعات می رسد:



document.getElementById("mdiv").innerHTML=xmlHttp.responseText;

پروپرتی responseText حاویه رشته اطلاعات در خواستی کلاینت از سرور هست که باید مورد استفاده کلاینت قرار گیرد و این کار با نسبت دادن این پروپرتی شی (xmlHttp.responseText) به پروپرتی innerHTML دایو یا نسبت دادن به یک متغیر ، صورت می گیرد.



document.getElementById("mdiv").innerHTML

این کد اشاره به المنتی از صفحه با نام mdiv و خاصیت innerHTML دارد که mdiv ای دی (Id) دایوی (DIV) هست که قرار است اطلاعات گرفته شده از سرور انجا به نمایش گذاشته شود.


خروجی های readyState :
اگر خروجی برابر با 0 بود به این معناست که شی xmllHttp به هر دلیلی کامل نشده است که این مشکل بیشتر مربوط به اشتباه نوشتن کد ها توسط برنامه نویس هست.
اگر خروجی برابر با 1 بود به این معناست که شی پیکر بندی شده است.
اگر خروجی برابر با 2 بود به این معناست که در خواست کاملا به سرور ارسال شده است که در صورت عدم پیغام مشکل به وجود آمده در سمت سرور است و باید کد های سمت سرور چک شود.
اگر خروجی برابر با 3 بود به این معناست که درخاست در حال پردازش است.
اگر خروجی برابر با 4 بود به این معناست که در خاست کامل شده است ، یعنی در خاست به طور کامل به سرور فرستاده شده و پاسخ هم به طور کامل در یافت شده است.


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

سمت سرور :
در سمت سرور ما 2 کار باید انجام بدیم ؟!
1- گرفتن در خواست .
2- پاسخ به درخواست.

که این دو عمل با استفاده از رشته پرسجو یا QueryString به سادگی قابل پیاده سازی است.
به این صورت که پاس دادن مقادیر در سمت کلاینت توسط کد Ajax همانند کار با Request / Request هست.
فرستادن مقادیر از کلاینت به سرور :


xmlHttp.open('GET','Request.aspx?Value='+Value,tru e);

این خط کد ، متغیر Value را با مقدار Value (از چپ به راست) در قالب رشته درخواست به سرور انتقال می دهد.

در یافت مقادیر فرستاده شده ، در سرور :


String Box= Request.QueryString["Value"];


فرستادن مقادیر از سرور به کلاینت:


Response.Write("سلام ای جکس !");
توضیحات تکمیلی بخش:
برای برپاسازی اجکس به دو فایل با پسوند aspx نیاز دارید (البته با پسوند هایی دیگر هم قابل اجراست که برای استارت مناسب نیست؟!) که یکی وظیفه در خواست مقادیر را دارد و دیگری وظیفه گرفتن پاسخ و فرستادن جواب را دارد.
قطعه کد جاوا ابتدای پست را در قسمت کد های مربوط به دیزاین در بین تگ های سراآیند ، بعد عنوان کپی کنید:



<head runat="server">
<title>وب سایت </title>
کد های جاوا
</head>

و سپس یک div ساخته و آیدی آن را مطابق با آیدی داخل کد بالا ست می کنید.
و سپس صفحه دوم aspx تان را با نامی که در url تابع Main قرار دارد بسازید (Request.aspx) .
در صفحه Request.aspx به قسمت کد های دیزاین جز خط زیر بقیه خطوط را پاک کنید (جهت کاهش زمان لود و بلا استفاده بودن آنها)



<%@ Page Language="C#‎‎" AutoEventWireup="true" CodeFile="Request.aspx.cs" Inherits="_Request" %>

و در قسمت کد هم در رویداد Page_Load کد های زیر را قرار دهید :




String Box= Request.QueryString["Value"];
Response.Write("سلام"+Box);


خوب صفحه اجکس ما آماده کار هست!
نکته جاوااسکریپت به حروف کوچک و بزرگ حساس هست ، پس کد ها را به همین صورت قرار دهید.
در صورت کار با فایرفاکس ، در صورت خطای سمت کلاینت از قسمت tools گزینه Error Consols استفاده کنید.
انشاالله فایل نمونه رو هم ایجاد و برای دانلود قرار می دهم.

[sh_esharif]

دوست عزیز سلام.
من در یکی از پروژه هام از Ajax Programming استفاده کردم. ولی از معادل غیر Ajax خیلی کند تره (به هر دو صورت نوشتم). البته حجم داده هایی که از سرور فرستاده می شه زیاده و نمی دونم این مسأله تأثیر گذاشته یا نه. می شه لطف کنین بنویسید که در چه نوع پروژه هایی بهتره از این نوع برنامه نویسی استفاده بشه.
با تشکر
ممنون از وقتی که می گذارین.

[aminghaderi]

خواهش می کنم .
توضیح کاملی بفرمایید که دقیقا برنامه ای که نوشتید چکاری انجام می دهد و هر دو روشی که کار کردید رو هم توضیح بدید تا کاملا موضوع مشخص شود.

می شه لطف کنین بنویسید که در چه نوع پروژه هایی بهتره از این نوع برنامه نویسی استفاده بشه.به طور کلی سخت ترین روش کار با اجکس همین روش هست .
اما در قسمت هایی که فقط قرار یک فیلد برگردانده شود به نظر من این گزینه مناسبتر خواهد بود ،
و در مواردی که قرار تعداد المنت های زیادی بگشت داده بشه خوب بهترین روش استفاده از کامپوننت های خود ASP.NET هستش.
در ثانی کار با هسته اجکس معایبی (از نظر دات نت کار ها) هم داره که شاید زیاد خوشایند نباشه :
1- عدم شناخت المنت های ASP.NET
2- عدم وجود تدابیر امنیتی بر خلاف کامپوننتهای ASP.NET (در این روش خود برنامه نویس باید تدابیری رو برای حفظ امنیت در نظر بگیره که البته در این باره مقاله زیاد نشر داده شده.)

ولی درباره سرعت متاسفانه من درست متوجه نشدم شما چکاری انجام دادید تا راهنمایی کنم ولی قطعا شما نباید با استفاده از این روش تضعیف سرعت داشته باشید؟!
به این دلیل که Core هستش و هیچ تابعی برای توسعه به اون اضافه نشده و در نهایت Transfer شما به صورت خالص اتفاق می افته که این یعنی بالاترین سرعت ممکن.
کامپوننتهای اماده استفاده از Ajax به نام های Ajax Toolkit و Ajax Extension و ... که ساخت شرکت های بزرگ نرم افزاری هستند ، درسته از تمام لحاظ بهینه شده و امن تر هستند ولی باید قبول داشت که به دلیل پکج بودن کار و اینکه اون قطعه قرار خیلی از کارها رو ساپرت کنه خوب یقینا از تعداد زیادی توابع تشکیل شده که مباحث امنیتی ، ارسال المنت ها به صورت دسته ای ، کدینگ و.... رو پشتیبانی می کنند و این یعنی افزایش حجم پردازش + افزایش حجم ارسالی و دریافتی.

موفق باشید.

[sarah1361]

سلام ممنون از آموزش شما یک سوال دارم (البته مبتدی)

این روش چطوری تبدبل به jquery Ajax میشه؟

[Vahid_moghaddam]

سلام ممنون از آموزش شما یک سوال دارم (البته مبتدی)

این روش چطوری تبدبل به jquery Ajax میشه؟
در jquery توابعی برای ارسال و دریافت درخواست به صورت آسنکرون وجود داره مثال تابع ajax. این توابع با استفاده از xmlhttprequest، کد نویسی رو بسیار بسیار ساده تر و روان تر می کنن. مخصوصا اینکه مثلا تابع ajax به خوبی با فرمت json کار می کنه.

[sarah1361]

در jquery توابعی برای ارسال و دریافت درخواست به صورت آسنکرون وجود داره مثال تابع ajax. این توابع با استفاده از xmlhttprequest، کد نویسی رو بسیار بسیار ساده تر و روان تر می کنن. مخصوصا اینکه مثلا تابع ajax به خوبی با فرمت json کار می کنه.


میشه یک مثال برنید مثلا با دستور Select

یک سوال دیگه هم دارم اینکه در انجام دستورات sql بهتره کدوم با این روش باشه (insert-select-delete,update)

-اگه برای ارتباط با دیتابیس از linq to sql با storeprocedure استفاده کنیم میشه از
jquery ajax استفاده کرد

آیا امکان داره یک مثال برام بزنید هزینه آن رو هم می دم برام mail کنید .

[sh_esharif]

با عرض سلام و تشکر


ولی درباره سرعت متاسفانه من درست متوجه نشدم شما چکاری انجام دادید تا راهنمایی کنم ولی قطعا شما نباید با استفاده از این روش تضعیف سرعت داشته باشید؟!


برنامه من یک سری داده رو از بانک اطلاعاتی می خونه و نمایش می ده . ولی چون داده هایی که کاربر می خواد بببینه ممکنه زیاد باشه مثلا 4000 تا ردیف ، من اون ها رو 200 تا 200 تا از بانک می خونم و نمایش می دم.
از کامپوننت های Ajax استفاده نکردم چون احتمال اینکه کاربران این سایت به اینترنت پر سرعت دسترسی نداشته باشن زیاده و این کنترل ها حجیم هستن و روی سرعت لود تاثیر زیادی می ذارن.

در حالت عادی یک گریدویو گذاشتم که از همون sp هایی که در Ajax Programming استفاده کردم استفاده می کنه.

در استفاده از Ajax هم اگر تعداد رکوردهایی که کاربر جستجو کرده بیشتر از صفره (حداقل یک رکورد وجود داره) یک جدول می سازه (HTML) و در اون نشون میده وگرنه پیغام میده.
اگر نیاز به توضیح بشتری هست بگین تا کد بگذارم.

ممنون از وقتی که می گذارین.

[aminghaderi]

من اون ها رو 200 تا 200 تا از بانک می خونم و نمایش می دم.
200 هم زیاده چون این 200 رکورد باید داخل ساختار Html از سرور بیاد که خود شما هم اشاره کردید.
مگر که خودتون سمت کلاینت این این ساختار رو برگردونید که به نظر من کار جالبی نیست ، خصوصا اگر کاربر با IE سی پی یو خور سایت شما رو باز کنه و قرار باشه یه ساختار برای 200 رکورد بسازه ، احتمال رستارت سیستمتون هست؟!:گیج:
به نظر من 50 رکورد برای هر دفعه واکشی بشه ، عالیه ؟!

در حالت عادی یک گریدویو گذاشتم که از همون sp هایی که در Ajax Programming استفاده کردم استفاده می کنه.
من متوجه sp در جمله بالا نشدم ، توضیح بدید منظورتون رو متوجه شم.
چه گرید ویویی؟؟ آیا گرید ویو جاوااسکریپتی طراحی کردید؟؟
در مفهموم Ajax Programming هم که شما مد نظرتون هست هم شک کردم ، اون هم توضیح بدید ببینم دقیق منظورتون چیست؟

[sh_esharif]

با سلام و تشکر
گفته بودم بخشی از برنامه رو به دو صورت عادی و AjaxProgramming نوشتم که حالت عادی سرعت بیشتری دارد. منظورم از حالت عادی استفاده از کامپوننت های خود دات نت هست.
یعنی یک گریدویو گذاشتم و یکسری داده از بانک اطلاعاتی خوندم و در آن نمایش دادم.
sp هم stored procedure هست.

روش نوشتن Ajax Programming من هم مثل روش شماست ولی یک کم گسترده تر چون جدول ساختم و ... که احتمالا شما در آینده اونو آموزش میدید.
در مورد اینکه گفتید 50 تا 50 تا بیارم، اینطوری تعداد صفحات خیلی زیاد میشه. مثلا برای 4000 رکورد باید 80 صفحه تولید کنم. و این صفحات هم خودم باید تولید کنم (با Ajax programming)

ممنون از وقتی که می گذارین.

[aminghaderi]

حالت عادی سرعت بیشتری دارد
احتمال خیلی زیاد مشکل باید سر استفاده نادرست از اجکس باشه.

اینطوری تعداد صفحات خیلی زیاد میشه. مثلا برای 4000 رکورد باید 80 صفحه تولید کنم. و این صفحات هم خودم باید تولید کنم (با Ajax programming)
چرا 80 تا صفحه تولید کنید؟!
خوب شاید مشکل کندی سرعت از همینجا باشه؟!
من یه گریدویو برای یه پروژه ای طراحی کردم که با همین هسته اجکس کار می کرد و خود گریدویو هم با استفاده از جاوااسکریپت ساخته شده بود ، خوب زیر گریدویو 2 ایکن Forward و Backward قرار داده بودم که روی هر کدوم کلیک می شد ، یه ساختار Html حاوی 10 رکورد DB رو با خودش بر می گردوند و خیلی راهت این کار صورت می گرفت ، جالب تر این بود که روی سرور سریع تر از روی لوکال اجرا می شد؟!:کف:
که البته به نظرم من همون هم بهینه نبود واگر قرار باشه توسعه داده بشه باید جوری طراحی بشه که فقط 10 رکورد از Db بیاد و داخل ساختار قبلی قرار بگیره که این طوری شاید 10 برابر افزایش سرعت داشته باشیم.
احتمالا شما 80 صفحه رو + خود گرید از سرور بر می گردونید که این طور تضعیف سرعت دارید ؟!

[aminghaderi]

ابتدا عذر خواهی از دوستانی که پیگیر بودند داشته باشم برای تاخیر ادامه آموزش ، که این مورد به خاطر شاهکار یکی از دوست صمیمی و عزیز بنده بود ؟! که درپروژه ای که با هم کار کردیم (چندیدن ماه پیش) ایشان کد خام اجکسی که نوشته بودم رو با کد های JQuery عزیزشان مخلوط کرده بودند و ... خلاصه وقتی می خواستم کد رو برای شما کپی کنم از این موضوع باخبر شدم و بد تر اینکه فایل های پشتیبان از نسخه قبلی رو هم گم کرده بود و....
و این موارد به کنار ، خودم هم شدیدا مشغول انجام یه پروژه دیگه بودم که بس از شی xmlhttprequest داخل اون پروژه کار کردم که کلا به این شی آلرژی پیدا کردم و خدا رو شکر بعد یه 20 تا 25 روز این مورد حل شده و در خدمت شما هستم.
این تابع نتیجه کار چندید روزه من هست که چندین ماه پیش (شاید 5 تا 6 ماه پیش ، شاید هم بیشتر..) این رو نوشتم بودم که الان از بین کد های JQuery برای شما جدا کردم و یه مثال ساده و کوچک هم برای آموزش ساختم.
این تابع به احترام کشورمان و همه عزیزان اسمش رو گذاشتم "PersianAjax"
که امیدوارم مورد توجه و استفاده دوستان قرار بگیره.

متن تابع (به همراه کپی رایت) : (سمت کلاینت)

//================================================== =====================================//
//PersianAjax!!
//Full Function Of kernel Ajax in 3 Parameters:
//AjaxSendFunc(URL,Variable,NameDIV);
//
//URL : Uniform Resource Locator
//ForExam = www.google.com
//
//Variable : Send Text Request To Server And Take Text Response Of Server To Clint!
//ForExam = "Hello"
//
//NameDIV:The Text In The DIV Going To Catch It!For Show Information!
//ForExam = "MainDiv"
//
//
//Write For Barnamenevis.org's Members.
//@Copyright (C) 2010 Amin Ghaderi - IRAN -Mashhad.
//@license http://www.gnu.org/copyleft/gpl.html GNU/GPL
//================================================== ======================================//

//======================================//
//Start Ajax Cod //
//======================================//

// Global Variable //
//-----------------//
var xmlHttp = null;
var ContentDIV;
var SelectionID = null;



// Global Function //
//-----------------//
function Create()
{
if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');//Internet Explorer 6 And Previous versions.
}
else
{
xmlHttp=new XMLHttpRequest();//All Of Browser Except Internet Explorer 6 And Previous versions.
}
return xmlHttp;
}
function AjaxSendFunc(URL,Variable,NameDIV)//Main Function.
{
Create();
update(NameDIV);
xmlHttp.open('GET',URL +'?Variable='+Variable,true);
xmlHttp.onreadystatechange= update;//"update" is Not Function! It Is Variable in Kernel Ajax!
xmlHttp.send(null);
}
function update(SelectedDIV)//is Not == "update" In the Top sentence!
{
if((SelectedDIV!='[object Event]')&&(SelectedDIV!=undefined))// Retern Java Then 'SelectedDIV' Is empty!! ([object Event]==Null).
{
ContentDIV = SelectedDIV;
}
// if(xmlHttp.readyState==0)
// {
// alert("Cod 0"); // Object Is Not Complet!
// }
// if(xmlHttp.readyState==1)
// {
// alert("Cod 1"); //Object Is Configuration!
// }
// if(xmlHttp.readyState==2)
// {
// alert("Cod 2"); //Sending Request In Server!
// }
// if(xmlHttp.readyState==3)
// {
// alert("Cod 3"); //Request is Processing...!
// }
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var message = xmlHttp.responseText;
//'ContentDIV' Is Your DIV desired , For Show Information!
document.getElementById(ContentDIV).innerHTML=mess age;
//alert("Cod 4"); // Request Is Complet!!!
}
else
{
alert("خطا در دریافت اطلاعات!! لطفا دوباره امتحان کنید!! در صورت عدم پاسخ مورد را به پشتیبان فنی اعلام نمایید.");
}
}
}
//--------------------------------------//
//End Ajax Cod .
//--------------------------------------//


کد سمت سرور :

string StrRequest;

protected void Page_Load(object sender, EventArgs e)
{
StrRequest = Request.QueryString["Variable"];
Response.Write("درخواست با موفقیت ارسال شد! مقدار دریافتی از سمت سرور : " + StrRequest);

}



فایل اصلی در هدر تاپیک (پست اول) ضمیمه شد.

[aminghaderi]

پس از قرار دادن کد های جاوااسکریپت در صفحه مربوط به کلاینت ، با استفاده از تابع زیر می توانید با سرور پارامتری را ارسال و از سرور دریافت کنید.


AjaxSendFunc('PersianAjax.aspx','سلام','OutPut ')


توضیح :
'PersianAjax.aspx' : صفحه مقصد برای دریافت اطلاعات (صفحه ی سروری که اطلاعات باید به ان ارسال شود. )

'سلام' : متغیری یا پارامتر رشته ای هست که می خواهیم به سرور بفرستیم.

'OutPut' : مکان قرار گیری رشته برگشتی از سرور که می تواند به دیگر المنت ها مثل input هم نسبت داد .(البته باکمی تغیر در تابع update ).

مثال :

<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="ارسال درخواست"
onclick="AjaxSendFunc('PersianAjax.aspx','سلام','OutPut ');" />
<div id="OutPut"></div>
</form>
</body>




فایل اصلی در هدر تاپیک (پست اول) ضمیمه شد.

[aminghaderi]

خوب متاسفانه توابعی که برای توسعه این هسته ، برای ارسال چندید پارامتر نوشتم ، به دلیل استفاده در یه پروژه تجاری (حقوق مصرف کننده و عدم رضایت تیم طراحی برای انتشار) نمی تونم انتشار بدهم ولی الگریتم برای این کار زیاد دارم ، نارحت نباشید?!:چشمک:
فقط زحمت کد نویسیش با خود شما ، اگر هم نوشتید و خواستید به صورت OpenSource انتشار بدید ، لطفا در همین تاپیک ارسال کنید تا دوستان هم استفاده کنند.
من هم اگر وقت کردم سعی می کنم این توابع رو به همین صوتی که می خوام عرض کنم ، می نویسم و همین جا برای استفاده می گزارم .(اونوقت دیگر کد مرببوط به پروژه نیست ، که رعایت حق مصرفه کننده داشته باشه.:چشمک:)

خوب الگریتم :(زیاد خاص هم نیست ، همتون اطلاع دارید ، فقط جهت یاد آوری هست.)

ما قراره یه رشته به سرور بفرستیم ؟! درسته ؟؟؟ پس می شود تمامی مقادیر رو در یه رشته جمع کرد و همه رو یکجا به سرور فرستاد ، خوب همین کار رو هم می کنیم.
مثال :
سه تا متغیر از نوع رشته ای داریم که قرار به سرور بفرستیم (a,b,c) به این صورت ردیفشون می کنیم:


str=a+","+b+","+c


حالا str رو به سرور می فرستیم.
str رو در سمت سرور تحویل می گیریم و با استفاده از جدا کننده "," (کاراکتر کاما) ساب رشته ها رو از رشته اصلی جدا می کنیم و در یه ارایه قرار می دهیم.
می شود این :

serverStr.[0]=a;
serverStr.[1]=b;
serverStr.[2]=c;


خوب حالا تمامی مقادیر رو سمت سرور دارید ، حالا دقیقا همین روش رو استفاده کنید و مقادیر سمت کلاینت رو هم در یافت کنید.
خیلی حرفه ای و سیستماتیک هم نمی خواد کار کنید ، که الان فکر کنید باید برید جاوااسکریپت هم یاد بگیرید ؟! فقط کافیه براش تعرف کنید متغیر ها که جدا شد هر کدام داخل کدام Div قرار گیرند.(این طوری ساده تره؟! )

فایل اصلی در هدر تاپیک (پست اول) ضمیمه شد.

[aminghaderi]

این بخش رو هم دوستان زحمتش رو بکشند ، من به هوای دوست عزیز بودم که اون هم اینقدر گرفت بود نتوانست کمکی داشته باشه ، دوستانی که به JQuery مسلط هستند و مایل هستند کدی را که نوشتن ، به صورت OpenSource برای استفاده در اختیار دوستان قرار بدهند ، لطفا کدشون رو همینجا قرار بدهند تا تاپیک منسجم بماند.
ممنون.

فایل اصلی در هدر تاپیک (پست اول) ضمیمه شد.

[aminghaderi]

این بخش آخر هست و شاید باید در ابتدا قرارش می دادم ، چون کمک دوستان بود که استارت استفاده از این روش برای من شد.
از همین جا از دوست عزیزم exlord (http://barnamenevis.org/forum/member.php?u=77199) بابت راهنمایی ها و نمونه کدی که در اختیار من گذاشت که باعث شد من کار با اجکس رو شروع کنم ، تشکر می کنم.
و همچنین تشکر می کنم از تمام دوستانی که در این راه به هر نحوی من رو یاری کرده اند.

منابع :

1- آموزش گام به گام اجکس


نویسنده : حسین خوش رفتار.
انتشارات : نشر گستر.
زبان : فارسی.
[این کتاب یه کتاب مرجع برای .net کارها و هم php کارها می تواند باشد.]

2- گوگل


که همیشه بنده رو شرمنده جستجو های بی نظیر خودش داره.

__________________________________________________ _____________________

با سپاس از همه عزیزان
امین قادری
شهریور 1389

فایل اصلی در هدر تاپیک (پست اول) ضمیمه شد.

[Tekyegah]

سلام ... من چندین ساله از این روش برای Ajax استفاده میکنم .

یکی از مشکلات این روش تداخل در درخواست هاست ، یعنی اگر شما در یه page درخواستی رو ارسال کرده باشید و به هر دلیل هنوز برگشت داده نشده باشه و درخواست جدید رو ارسال کنید . یکی از درخواست ها ( در حالتی که شما تعریف کردین درخواست دوم ) اجرا نمیشه .

[kablayi]

سلام ...
آموزشتون فوق العاده بود... یعتی به دادم رسید...
یک هفته بود داشتم با این تابع ()ajax.$ کـُشتی میگرفتم تا بتونم اطلاعات رو از SQL بخونم و بفرسم برای کلاینت...
با دیدن این آموزش شما بالاخره تونستم اطلاعات رو بفرسم و با یه افکت fade in روی صفحه نمایش بدم...
با این روش به راحتی میشه از jquery استفاده کرد....
پروژه جلو دستم تموم شه حتما یه مثال از روش آموزشی شما همراه با jquery میذارم...

حالا یه سوال:
غیر از دستور ()response.writeراه دیگه ای هم هست که اطلاعات سرور رو برای کلاینت بفرسیم...؟؟؟؟

[fakhravari]

سلام ...
آموزشتون فوق العاده بود... یعتی به دادم رسید...
یک هفته بود داشتم با این تابع ()ajax.$ کـُشتی میگرفتم تا بتونم اطلاعات رو از SQL بخونم و بفرسم برای کلاینت...
با دیدن این آموزش شما بالاخره تونستم اطلاعات رو بفرسم و با یه افکت fade in روی صفحه نمایش بدم...
با این روش به راحتی میشه از jquery استفاده کرد....
پروژه جلو دستم تموم شه حتما یه مثال از روش آموزشی شما همراه با jquery میذارم...

حالا یه سوال:
غیر از دستور ()response.writeراه دیگه ای هم هست که اطلاعات سرور رو برای کلاینت بفرسیم...؟؟؟؟

jquery با java script اشتباه نگیرین.
jquery دستورات ساده تر و راحت تری داره

[kablayi]

jquery با java script اشتباه نگیرین.
jquery دستورات ساده تر و راحت تری داره
حرف شما درسته اما میشه در بین دستورات جاوا اسکریپت از jquery هم استفاده کرد هیچ مشکلی هم پیش نمیاد...

[fakhravari]

حرف شما درسته اما میشه در بین دستورات جاوا اسکریپت از jquery هم استفاده کرد هیچ مشکلی هم پیش نمیاد...

:بامزه:خوب اره. ولی از روش jquery کار کن. کلا متدای java script در jquery کوتا سازی شده. و کار برنامه نویس راحت تر کرده

[kablayi]

:بامزه:خوب اره. ولی از روش jquery کار کن. کلا متدای java script در jquery کوتا سازی شده. و کار برنامه نویس راحت تر کرده

من از jquery بیشتر برای انتخاب element های درون صفحه و کار با اونها استفاده میکنم کاربرد خاص دیگه ای برام نداره... سعی کردم که از متد ()ajax.$ برای بکار بردن AJAX استفاده کنم ولی هر کاری کردم نتونستم... نمیدونم من یکی که نتونستم ازش استفاده کنم ... همش ارور میداد و متوجه هم نمیشدم مشکل از کجاست... اصلا کار کردن باهاش برام قابل درک نبود... پروپرتی هاش رو متوجه نمیشدم...
این که گفتم منظورم این بود که برای نمایش از Jquery استفاه کردم و خب فکر هم نمیکنم دو نوع دستور رو کنار هم نوشتن مشکلی باشه...

[aminghaderi]

سلام ... من چندین ساله از این روش برای Ajax استفاده میکنم .

یکی از مشکلات این روش تداخل در درخواست هاست ، یعنی اگر شما در یه page درخواستی رو ارسال کرده باشید و به هر دلیل هنوز برگشت داده نشده باشه و درخواست جدید رو ارسال کنید . یکی از درخواست ها ( در حالتی که شما تعریف کردین درخواست دوم ) اجرا نمیشه .
در حالتی که من اون موقع توضیح دادم اره ولی آدم هیج وقت ثابت نمی مونه ، والان می گم در جاوااسکریپت مکانیزمی وجود داره که می شه از تداخل جلوگیری کرد و کارش بر اساس توابع برگشتی هست کاری هست که الان جی کوئری داره ازش استفاده می کنه ، XmlHttpRequest چیزی نیست که بخواد غیر کاربردی بشه و چیز دیگه جاش بیاد ، فقط توسعه داده می شه چون خود ایجکسه (هسته ایجکسه) . روش فوق هم روش استفاده از اون هست که توسط افراد مختلف با توانایی علمی مختلف توسعه داده می شه ، کار توسعه گران جی کوئری عالی بوده چون اونها دیگه از سطح استادی هم گذشته اند و خدایان جاوااسکریپت محصوب می شن.
این روش قدیمی هست و توسعه اون هم فایده ای نداره وقتی جی کوئری باشه .

[aminghaderi]

سلام ...
آموزشتون فوق العاده بود... یعتی به دادم رسید...
یک هفته بود داشتم با این تابع ()ajax.$ کـُشتی میگرفتم تا بتونم اطلاعات رو از SQL بخونم و بفرسم برای کلاینت...
با دیدن این آموزش شما بالاخره تونستم اطلاعات رو بفرسم و با یه افکت fade in روی صفحه نمایش بدم...
با این روش به راحتی میشه از jquery استفاده کرد....
پروژه جلو دستم تموم شه حتما یه مثال از روش آموزشی شما همراه با jquery میذارم...

حالا یه سوال:
غیر از دستور ()response.writeراه دیگه ای هم هست که اطلاعات سرور رو برای کلاینت بفرسیم...؟؟؟؟
همه چیز روی از بیس یاد گرفتن خوبه ولی بعضی اوقات این باعث می شه روش بهتر و مهندسی شده فراموش بشه .
برای پروژه اول خوبه ولی پیشنهاد می کنم به جای این روش که من توضیح دادم از جی کوئری ایجکس استفاده کنین اون بهتر ، بهینه تر هست .

با فرمت های دیگه مثل جیسون ، XML هم قابل دریافت و ارسال هست ولی باست براش طراحی بشه .
اینجاست که می گم با جی کوئری ایجکس کار کنین چون اون توسعش کامله یعنی ایم فرمت ها رو کامل پشتیبانی می کنه.
کارهای فعلی ایجکسی من با جی کوئری و جیسون صورت می گیره ، که البته برای اون هم می باست یکم کد نویسی کنین چون اون هم به این راحتی نمی شه استفاده کرد ولی نتیجه خوبی می ده .

[aminghaderi]

من از jquery بیشتر برای انتخاب element های درون صفحه و کار با اونها استفاده میکنم کاربرد خاص دیگه ای برام نداره... سعی کردم که از متد ()ajax.$ برای بکار بردن AJAX استفاده کنم ولی هر کاری کردم نتونستم... نمیدونم من یکی که نتونستم ازش استفاده کنم ... همش ارور میداد و متوجه هم نمیشدم مشکل از کجاست... اصلا کار کردن باهاش برام قابل درک نبود... پروپرتی هاش رو متوجه نمیشدم...
این که گفتم منظورم این بود که برای نمایش از Jquery استفاه کردم و خب فکر هم نمیکنم دو نوع دستور رو کنار هم نوشتن مشکلی باشه...

در تاریخی که گفتم یاداوری کن همین جا یه نمونه ارسال و دریافت جیسونی با توضیحات بزارم که همه استفاده کنند.
موفق باشی .

[kablayi]

ممنون خوشحال میشم از تجربیات شما استفاده کنم...
چندباری که از این روش استفاده کردم به مشکلاتی برخوردم که الان دیگه ترجیح میدم از XmlHttpRequest استفاده نکنم...
دوباره رفتم سراغ همون JQuery-json ....!!! بالاخره تونستم ازش استفاده کنم و تا الان کارم راه افتاده ولی بازم مشکلاتی برخوردم که خوشحال میشم بتونم از تجربیاتتون استفاده کنم...

ایشالا مزاحم میشم...:لبخند: