قدم به قدم به سوي Ajax [بایگانی]

بازدید نسخه کامل شده : قدم به قدم به سوي Ajax

Asef

01-21-2006, 04:29 AM

آژاكس :ee:
ميخوايم اينجا مقداري در مورد اين مقوله جالب و نسبتا جديد به بحث و بررسي بپردازيم. اما هدف اينجا اينه كه به بحثي ساده و روان كه فهم ساده داشته باشه بپردازيم. من در حد توانم مطالب رو بيان ميكنم. در صورت قصور و ايراد، ممنون ميشم دوستان تذكر بدن :)
خب چي ميخواي بگي؟!
حتما ميدونيد كه براي دريافت يك صفحه آدرس اون رو در آدرس بار تايپ ميكنيم:

http://blackmice.com

نتيجه اون ميشه ديدن صفحه سايت!
حالا فرض كنيد كه در داخل سايت و قسمت اعضا هستيم. در اين قسمت لينك هايي ميبينم با اين شكل:
http://www.blackmice.com/member.php?u=10 (http://www.blackmice.com/member.php?u=10)
http://www.blackmice.com/member.php?u=11 (http://www.blackmice.com/member.php?u=11)
http://www.blackmice.com/member.php?u=12
...
و الي آخر ...
به طور سنتي براي ديدن پروفايل هر شخص روي لينك كليك ميكنيم و به صفحه پروفايل ميريم.
ما براي ديدن هر صفحه پروفايل بايد كل صفحه رو از نو باز كنيم و از سايت خونده بشه و براي ما ارسال بشه!!! در صورتي كه فقط تنها قسمتي كه در تمامي پروفايل ها متفاوت هست بخش اطلاعات هست و بقيه صفحه كاملا با هم مشابه هستند.
اين يك معضل بزرگي هست، در صورتي كه اگه كمي هوشمندانه نگاه كنيم ما ميتونيم فقط و فقط قسمت مربوط به اطلاعات پروفايل رو دريافت كنيم و بقيه صفحه با خيال راحت سرجاي خودش باشه!!
اما اينكه اين امر چگونه ممكن هست رو با استفاده از متدي به نام آژاكس (آجاكس) بهش دسترسي داريم.
خب اين يك مثال ساده بود و شايد هم زياد كاربردي نباشه. مثال ديگه اي كه ميشه زد اينه كه ما داخل يك سايت بزرگ قرار داريم و ميخوايم داخلش به جستجو بپردازيم. به طور سنتي بعد از كليك روي دكمه سرچ صفحه سفيد ميشه ! چند لحظه اين سفيدي رو بايد تحمل كنيد ....! خب ! بله! صفحه نتايج به همراه تمامي محتوايت ديگه صفحه (منجمله تبليغات و بنر سايت و خلاصه همه چيز) دوباره از نو بايد دريافت بشن. اما همونطور كه حدس زديد وب مستر سايت با چند ساعت وقت گذاشتن ميتونه به ميزان قابل توجهي در پهناي باند مصرفي خودش صرفه جويي كنه و جستجوي سايت رو براساس آژاكس بنويسه و درنهايت ويزيتور هاي خودش رو هم راضي نگه داره.

اينا درست ولي چطور ممكنه ازش استفاده كرد؟!
اينها مثال هاي ملموسي هستد كه زدم و نشون ميده كه در كل اين متد چه كاري رو ميخواد برامون انجام بده اما اينكه چطور اين كار رو انجام بديم به صورت ساده سعي ميكنم توضيح بدم.

ملزومات؟
ما يكم بايد HTML بلد باشيم (البته يكم)
به علاوه مقداري JavaScript براي اينكه ارتباط بين سرور و كلاينت رو برقرار كنيم! (البته يكم بيشتر از يكم!)
و همين طور مقداري زبان سمت سرور مانند PHP كه البته ما ميتونيم اين رو فعلا ناديده بگيريم و از صفحات استاتيك استفاده ميكنيم!

مثلا اين آژاكس ما ميخواد چكار كنه؟
هدف ما اينه كه بعد از كليك روي چند لينك داخل سايتمون بدون بارگذاري مجدد صفحه، يك صفحه ديگه داخل صفحمون باز بشه. (بي آلايش و ساده!)

ميشه بيشتر توضيح بدي؟
بله!
ما 1-يك صفحه داريم و 2-چند لينك و3-يه فضايي كه قراره صفحه جديد بارگزاري بشه.
1- صفحه كه به صورت html هست و هرچيزي كه دوست داريد طراحي كنيد
2- لينك ما يك لينك عادي نيست! يكم جاوا اسكريپت قاطيش ميكنيم تا بفهميم كه چه زماني روش كليك شد. (نگران نباش توضيح ميدم!)
3-اين محلي كه قراره داخلش صفحه جديدي باز بشه رو بايد به يك شكلي تشخيص بديم. پس براي شناساييش ما براش يك ID در نظر ميگيريم. (اينم سادست و توضيح ميديم)

خب زودتر بگو اينا رو چطور درست كنيم؟!
يك صفحه ساده طراحي كن و يك گوشه رو هم بزار براي يك Div‌ كه قراره توش محتواي جديد قرار بگيره و يه قسمت رو هم براي لينك ها. من اينو برات طراحي كردم!:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Simple Ajax Example</title>
</head><body>

<h2>Simple Ajax Example!</h2><table border="0" width="100%" id="table1" height="550">
<tr>
<td width="153" height="25">Profile 1</td>
<td rowspan="4" valign="top"><div id="ProfileInfo">Profile Info will be here</div></td>
</tr> <tr>
<td width="153" height="25">Profile 2</td>
</tr>
<tr>
<td width="153" height="25">Profile 3</td>
</tr>
<tr>
<td width="153"> </td>
</tr></table>
</body>
</html>

اين بالا چي ميبينيد؟
خب يه تيبل داريم با دو ستون. ستون سمت چپ خودش چند تا رديف داره كه توش 3 تا لينك داريم. (بعدا قرار ميديم) توي ستون سمت راست هم Div ما قرار داره كه بهش يك ID نسبت داديم به نام ProfileInfo.
اين صفحه رو بسازيد و داخل مرورگر نگاهش كنيد.

درست كردم حالا لينك ها چي ميشه؟!
سوال خوبيه!
كم كم آماده ميشيم كه با جاوا اسكريپت آشنا بشيم ولي خيلي سريع و ساده.
ما ميخوايم وقتي روي لينكمون كليك شد خودمون بتونيم مديريت كنيم و بهش بگيم چكار كنه! ولي اين با Html ساده ميسر نيست! ولي خيلي خيلي ساده با جاوا اسكريپت اين كار رو انجام ميديم. چطور؟
در مباحث برنامه نويسي با مقوله اي آشنا ميشيم به نام Event. اين ايونت يعني اينكه چه زماني چه رويدادي اتفاق اقتاده. رويداد ميتونه كليك كردن با موس باشه. ميتونه حركت ماوس رو شي ما (ProfileInfo ) باشه و لود شدن صفحه و خيلي چيزاي ديگه.!
حالا ميريم سر كار عملي!
در اين كد كه ميبينيد وقتي كه روي لينك كليد شد، لينك ما يك Event دريافت ميكنه به نام onclick

<a href="#" onclick="LoadProfile(1);">Profile 1</a>
وقتي اين رويداد كليك اتفاق افتاد چكار ميكنه؟!
بله در اين موقع ما ميتونم روي اتفاقي كه ميخوايم بيوفته مديريت كنيم. به طور مثال در اين مثال نوشته شده:

onclick="LoadProfile(1);"
اين به زبان فارسي يعني اينكه بعد از كليد روي لينك، خواهشا پروفايل شماره يك رو بارگذاري كن!.
http://www.blackmice.com/images/icons/icon3.gif اما توجه بسيار مهم!!! LoadProfile روالي هست كه بايد خودمون بنويسيم و به طور پيش فرض موجود نيست.
كد بالا به زبان برنامه نويسي ميشه:
هنگام كليك، روال LoadProfile را به همراه آرگومان(پارامتر) 1 اجرا كن.

LoadProfile چي هست بيشتر توضيح ميدي؟
صد درصد! نكته اساسي همين جاست.
LoadProfile يك تابع جاوا اسكريپت هست. و بايد كد نويسي كنيم و اين تابع رو بنويسيم. آرگومان (پارامتر) 1 هم يعني اينكه مقدار يك رو به تابع ارسال كن. درست به مانند توابع رياضي.

روش نوشتن يك تابع رو توضيح بده!
...
زمان قسمت بعدي منوط به استقبال از مبحث
همچنين قسمت هاي نامفهوم رو مشخص كنيد تا روش بحث كنيمو توضيح بدم

Asef

01-21-2006, 04:30 AM

روش نوشتن يك تابع رو توضيح بده!
قبل از هرچيز بايد بدونيد كه كليه دستورات جاوا اسكريپت داخل صفحات html رو داخل تگ مخصوص خودش مينويسيم:

<script language=javascript>
// Javascript Code Here
</script>

تعريف تابع در جاوا اسكريپت:

function FuncName (Arg1 , Arg2 ,…)
{
// Javascript Code Here
}

function يك كلمه كليدي هست كه نشون ميده ميخوايم يك تابع تعريف كنيم
FuncName اسم تابع ماخواهد بود و از اين به بعد با اين نام ميتونيم فراخواني بكنيمش
Arg1 , Arg2 ,… آرگومان هايي هستند كه با استفاده از اون ها تابع مقاديري رو دريافت ميكنه. اينها اختياري هستند و تابع ما ميتونه هيچ ورودي نداشته باشه:

function FuncName ()
{
// Javascript Code Here
}

توجه كنيد كه همواره در جاوا اسكريپت براي تعريف توابع بايد از پرانتز باز و بسته اسفاده بشه.
توجه كنيد كه جاوا اسكريپت زباني هست كه به بزرگي و كوچكي حروف حساس هست، پس بنابر اين FuncName با funcName و ... متفاوت هست.

يك مثال از استفاده از توابع بزن!
يك صفحه جديد html در فرانت پيج باز كنيد (براي كد نويسي جاوا اسكريپت فرانت پيج گزينه بسيار مناسبي هست)
در داخل هدر صفحه اين كد رو قرار بده:
<script language=javascript>
function MyFirstFunction(Arg)
{
alert (Arg);
}
</script>

در داخل بادي صفحه اين كد رو قرار بديد:

<a href="#" onclick="MyFirstFunction('Hello World');">Click Here</a>

صفحه رو ذخيره و در مرورگر باز كنيد يا در بخش preview فرانت پيج باز كنيد. روي لينك كليك كنيد.

پيغامي به شما نشون داده ميشه.
اما كد ما چي داره؟
يك تابع جاوا اسكريپت به نام MyFirstFunction به همراه يك آرگومان كه اسمش رو گذاشتيم Arg
يك لينك كه بعد از ايونت كليك روي اون تابعي كه قبلا تعريف كرديم رو با پارامتر 'Hello World' فراخواني ميكنه
تابع ما حاوي يك دستور ساده و از پيش تعريف شده جاوا اسكريپت به نام Alert () هست كه خودش يك آرگومان داره.
بعد از فراخواني تابع درون تابع ما مقدار Arg ‌ رو به دستور Alert ارسال ميكنيم تا يك پيغام رو به ما نشون بده.

چطور يك تابع ميتونه يك مقدار رو برگردونه؟
سوال بسيار مهم و اساسي هست. خب در رياضيات كار اصلي يك تابع اين هست كه براساس ورودي يه خروجي داشته باشه.
اين خروجي رو در جاوا اسكريپت به اين شكل خواهيم داشت:

return RetValue;

در هر قسمت ار تابع كه خواستم كار تابع به پايان برسه و مقدار نهايي برگشت داده بشه به اين شكل عمل ميكنيم. RetValue مقداري هست كه ميخواهيم برگست داده بشه.

RetValue يه متغير هست و بايد داخل تابع تعريف شده باشه.

تعريف متغير در جاوا اسكريپت چطوريه؟!

VarType VarName = VarValue;

VarType نوع متغير ما هست كه ميتونه int يعني عدد صحيح، char يعني كاراكتر و ... باشه. براي ما تا اينجا نوع int كفايت ميكنيه.
VarName اسم متغير هست كه هر اسمي كه ميخوايم قرار ميديد.
VarValue مقدار اوليه اي هست كه با متغير بهنگام تعريف اختصاص ميديم كه دلبخواه هست و ميتونيد اينكار رو نكنيد
حالا يك متغير از نوع صحيح تعريف ميكنيم:

int MyFirstVar = 12;

يه تابع بنويس كه x , y رو بگيره و مقدار x به توان y بعلاوه 100 رو بدست بياره!

function MathOperate(x,y)
{
int MathResult;
MathResult = Math.pow(x,y) 100;
return MathResult;
}

همه موارد رو قبلا توضيح دادم. فقط بدونيد كه Math.pow يك تابع از پيش تعريف شده جاوا اسكريپت هست كه دو مقدار رو گرفته و به توان هم ميرسونه.

يك مقاله كه يكي از دوستان زحمت كشيدن قرار دادن در فروم
لينك 1 (http://my.blackmice.com/showpost.php?p=120568&postcount=19) - لينك 2 (http://my.blackmice.com/showpost.php?p=120571&postcount=20)

Asef

01-21-2006, 04:31 AM

همچنين پست 3

iMohsen

01-21-2006, 03:11 PM

نمی خواستم پست اضافه بدم ..اما انگار آصف منتظر ارسال پسته ..:دی

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

ممنون میشم ادامه بدی ..
محسن!

Asef

01-21-2006, 07:03 PM

خب چون برداشت هر شخص با توجه به معلوماتش از مطالب فرق داره من گفتم نظرتون رو بگيد و كجا رو ايراد داريد. مگر اينكه اصلا نگاه نكرده باشه كسي چون امكان نداره همه، همه ي مطالب رو گرفته باشن!
خلاصه من ادامه ميدم ولي بحث ميتونه خيلي مفيد تر از خود مقاله باشه

Asef

01-21-2006, 08:49 PM

قسمت دوم هم آماده شد.
اگه به نظرتون بحث جاوا اسكريپت كافيه بريم مباحث ديگه وگرنه هركي مشكل داشت مطرح كنه

Ghamnevis

01-21-2006, 09:38 PM

من آصف جان در حال تمرين و ممارست هستم :)

هرجا به اشكالي برخوردم سوالم رو ميپرسم :)

بازم ممنون :)

genius_boy

01-29-2006, 12:10 AM

Asef

01-29-2006, 06:52 AM

سلام
ممنون از آموزشت من تا حد پیش رفتم فقط یه ایرادی داشتم ، می شد مثال رو به این صورت نوشت:

int MathResult = Math.pow(x,y) + 100;
آخه خودت گفتی فورم اصلیش به این صورته:

VarType VarName = VarValue;
ادامه بده عالیه!
درسته خلاصه ترش اين ميشه. ولي خواستم بگم اجباري نداريد براي اين كه پشت سر هم بنويسيد.

emad86_20011

02-03-2006, 11:35 AM

خیلی ممنون آصف!منو از جهل نجات دادی:wacko: ! فکر میکردم آژاکس یه زبون برنامه نویسیه:blink:

emad86_20011

02-03-2006, 11:38 AM

می گم این نوع پیشرفته Inline Frame نیست؟؟:d :d :d

Asef

02-03-2006, 11:50 PM

خیلی ممنون آصف!منو از جهل نجات دادی:wacko: ! فکر میکردم آژاکس یه زبون برنامه نویسیه:blink:
زياد نگران نباش خودمم چند ماه بيشتر نيست اينو فهميدم :d :d http://qsmile.com/qsimages/23.gif

Nendoke

02-03-2006, 11:58 PM

حالا من فکر می کردم Ruby مثل آژاکس هست , ولی بعد فهمیدم که یه زبان برنامه نویسیِ / http://qsmile.com/qsimages/33.gif

SherlockHolmes

02-04-2006, 12:08 AM

ورژن مایکروسافتی آژاکس هم اومد!!
http://www.asp.net/images/atlaslogo.gif (http://atlas.asp.net)
ساده تر و احتمالا غیر استاندارد تر! :d
بشتابید!! :d :d

Nendoke

02-04-2006, 12:19 AM

آره اونم دیدم , ولی آژاکس اون روی Soap سوار شده , نسل جدیدش که داره می آد رو روی Xml-rpc هست , ولی غیر از IE این .NET رو من قبول دارم البته فقط برای یاد گرفتن ,

SherlockHolmes

02-04-2006, 12:37 AM

خوب واضحه!!
اگه ماکروسافت یه کار درست در طول زندگیش برای w3c کرده باشه همین soap که اصلا تکنولوژیش مال مایکروسافته!مسلمه که روی تکنولوژی خودش کار میکنه!

Asef

02-04-2006, 04:30 AM

يه بدي كه آژاكس داره ايندكس نشدن صفحاتيه كه با اين متد بار گزاري ميشن. كه تقريبا به نظر من خيلي جاها فلجش ميكنه آدم ترجيح ميده ازش استفاده نكنه.
//

ورژن مایکروسافتی آژاکس هم اومد!!
http://www.asp.net/images/atlaslogo.gif (http://atlas.asp.net/)
ساده تر و احتمالا غیر استاندارد تر! :d
بشتابید!! :d :d

http://qsmile.com/qsimages/118.gif http://qsmile.com/qsimages/118.gif

emad86_20011

02-04-2006, 01:43 PM

خوب آصف اين حرفا رو ول كن!! برو سر اصل مطلب!!
داشتي ميگفتي!!:)
حالا با جاوا چطوري اطلاعات رو بگيريم بزاريم تو اين div

masihyeganeh

02-25-2006, 10:09 PM

خدایی دیدم هیچ کس آموزش نمیده گفتم برم از زیر سنگ هم که شده درش بیارم و برای بر و بچ BMC بیارمش
این هم مقالش:

آشنايي با تکنولوژي آژاکس AJAX

اين مقاله سعي دارد شما را با تکنولوژي AJAX آشنا نموده و همچنين براي شروع کار با اين تکنولوژي، دو مثال ساده در اختيار شما قرار خواهد داد. پنج بخش اصلي اين مقاله عبارتند از:

- معرفي تکنولوژي AJAX: کاربردها و امکانات
- نحوه ايجاد درخواستهاي HTTP
- نحوه بررسي پاسخهاي ارسال شده از سرويس دهنده (Server)
- بررسي نحوه کار با اين تکنولوژي بوسيله يک مثال
- کار با پاسخهاي ارسال شده به فرمت XML

معرفي تکنولوژي AJAX: کاربردها و امکانات

آژاکس (AJAX: Asynchronous JavaScript and XML) يک تکنولوژي براي ايجاد ارتباط بين دو امکان بسيار قدرتمند نرم افزارهاي Browser است که به تازگي مورد توجه زيادي قرار گرفته است. اين تکنولوژي قبلا چندان توسط برنامه نويسان و توسعه دهندگان وب مورد توجه نبود تا وقتي که نرم افزارهايي مانند Gmail، Google Suggest و Google Map با استفاده از اين تکنولوژي کار خود را آغاز نمودند.

اين دو امکان قدرتمند در نرم افزارهاي Browser که قبلا به آنها اشاره شد عبارتند از:
- امکان ارسال درخواست براي سرور و دريافت و مديريت پاسخها بدون نياز به بازيابي (reload) صفحات
- امکان بررسي و تجزيه و تحليل داده هايي به فرمت XML

نحوه ايجاد درخواستهاي HTTP

براي ايجاد و ارسال يک درخواست HTTP به سرور شما نيازمند کلاسهايي هستيد که اين امکانات را براي شما ايجاد مي نمايند. براي مثال در نرم افزار Internet Explorer يک کلاس که در واقع يک ActiveX ميباشد به نام XMLHTTP اين کار را انجام ميدهد و در نرم افزارهايي مانند Mozilla، Safari و ساير نرم افزارهاي مشابه کلاسي به نام XMLHttpRequest همان امکانات و توانايي هاي مورد نياز براي اين کار را در اختيار شما قرار مي دهد.

با توجه به آنچه گفته شد، براي ارسال درخواست خودتان در ابتدا با استفاده از بررسي نوع نرم افزاري که هر بازديدکننده اي در حال استفاده از آن است ميتوانيد به صورت زير عمل کنيد. توجه داشته باشيد که براي راحتي کار و نمايش نمونه اوليه روش ايجاد درخواست کد ذيل به صورت نمونه ساده شده در اختيار شما قرار گرفته است. مثالهاي تکميلي و واقعي انجام اين عمل در بخشهاي بعدي همين مقاله موجود مي باشد.

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

بعضي از نسخه هاي نرم افزار Mozilla در هنگام بررسي و تحليل پاسخهاي سرور در صورتي که اين پاسخها داراي فرمت XML نباشند بدرستي کار نخواهند کرد. براي رفع اين مشکل و جلوگيري از ايجاد خطا در هنگام دريافت پاسخ از سرور، شما ميتوانيد از يک متد ديگر براي معرفي نوع اطلاعات دريافتي و تعيين آنها به فرمت text/xml استفاده نماييد. اين کار را ميتوانيد به روش زير انجام دهيد:

http_request = new XMLHttpRequest();
http_request.overrideMimeType("text/xml");

نکته بعدي تصميم گيري در مورد اعمالي است که ميخواهيد پس از دريافت پاسخ از سرور انجام دهيد. در اين مرحله تنها کاري که بايد انجام دهيد اين است که به درخواست HTTP تابعي را که وظيفه بررسي پاسخهاي ارسال شده از طرف سرور را دارا ميباشد معرفي نماييد. اين کار با اختصاص نام تابعي که ميخواهيد بررسي پاسخهاي سرور را بوسيله آن انجام دهيد به خصوصيت onreadystatechange که از خصوصيتهاي درخواست HTTP ميباشد انجام پذير است. براي مثال ميتوانيد اين کار را به روش زير انجام دهيد:

http_request.onreadystatechange = nameOfTheFunction;

دقت داشته باشيد که در حين انجام اين کار پس از نام تابع از پرانتز استفاده نميشود و همچنين هيچ پارامتري نيز به تابع ارسال نميشود. همچنين براي اجام اين کار ميتوانيد از يک روش ديگر نيز استفاده نماييد. در اين روش در عوض اختصاص نام يک تابع به خصوصيت ذکر شده ميتوانيد از يک تکنيک موجود در زبان JavaScript براي معرفي اعمالي که ميخواهيد بر روي پاسخهاي انجام دهيد به روش زير استفاده نماييد:

http_request.onreadystatechange = function(){
// do the thing
};

حال که شما اعمالي را که مي خواهيد بر روي پاسخهاي ارسال شده از طريق سرور انجام دهيد مشخص نموده ايد، به بررسي روش ارسال درخواست به سرور خواهيم پرداخت. براي ارسال درخواست بايد از دو تابع ()open و ()send که از توابع درخواست HTTP مي باشند به روش ريز استفاده نماييد:

http_request.open("GET", "http://www.example.org/some.file", true);
http_request.send(null);

همانطور که مشاهده مي کنيد، تابع ()open داراي سه پارامتر مي باشد که ميخواهيم به بررسي اين سه پارامتر بپردازيم

پارامتر اول روش ارسال درخواست HTTP را مشخص مي نمايد، اين روش ميتواند يکي از مقادير POST، GET، HEAD و يا ساير مواردي را که سرور شما از آنها پشتيباني مينمايد داشته باشد. بخاطر داشته باشيد که حتما از حروف بزرگ در نام روش استفاده نماييد چرا که بعضي از Browserها مانند FireFox ممکن است که درخواست شما را ارسال نکنند. براي اطلاعات بيشتر در ارتباط با روش درخواستهاي HTTP ميتوانيد به سايت W3C مراجعه نماييد.

پارامتر دوم آدرس صفحه اي است که درخواست HTTP براي آن ارسال مي شود. بدليل مسايل امنيتي شما نميتوانيد درخواست خود را به اين روش براي يک سايت ديگر ارسال نماييد و فقز قادر هستيد درخواستها را به آدرس سايتي که در آن هستيد ارسال کنيد. در صورت ارسال درخواست به آدرس يک سايت ديگر ارسال درخواست انجام نخواهد شد و شما با پيغام خطاي permission denied مواجه خواهيد شد. يکي از مهمترين اشکالاتي که ممکن است در اين ارتباط پيش بيايد آن است که براي مثال در صفحه اي که آدرس آن http://webilix.com است درخواستي را با اين روش به آدرس http://www.webilix.com ارسال نماييد که در اين صورت نيز با پيغام خطاي ياد شده مواجه خواهيد شد و درخواست ارسال نخواهد شد.

آخرين پارامتر در تابع ()open مشخص کننده همزماني و يا غير همزماني ارسال درخواست خواهد بود. اين پارامتر که در واقع مستقيما به کلمه Asynchronous در عبارت Asynchronous JavaScript and XML اشاره مي نمايد مشخص مي کند که آيا در هنگام ارسال درخواست و تا زمان دريافت پاسخ به صورت کامل دستورات بعدي اجرا شوند و يا خير. اين پارامتر يکي از مقادير true يا false را ميتواند داشته باشد که مقدار true به منزله آن است که تا هنگام دريافت پاسخ از سرور ساير دستورات اجرا مي شوند و مقدار false مشخص کننده آن است که اجراي دستورات تا هنگام دريافت پاسخ سرور به صورت کامل متوقف خواهد شد. به طور معمول از آنجايي که ممکن است مدت زمان زيادي براي دريافت پاسخ از سرور طول بکشد و در صورتي که مقدار اين پارامتر false انتخاب شده باشد در اين صورت کاربر تقريبا قادر به انجام هيچ کاري در صفحه نخواهد بود در بيشتر موارد از مقدار true براي اين پارامتر استفاده مي شود.

پس از بررسي تابع ()open و آشنايي با نحوه استفاده از پارامترهاي آن به بررسي تابع ()send مي پردازيم

مقدار پارامتر تابع ()send ميتواند هر مقداري که ميخواهيد در هنگام ارسال درخواست براي سرور ارسال نماييد باشد. داده ها بايد با فرمتي مشابه آنچه در آدرسهاي صفحات وب مشاهده مي نماييد (name=value&anothername=othervalue&so=on) ارسال شوند. توجه داشته باشيد که در صورتي که روش ارسال درخواست را به صورت POST تعريف نموده ايد (در دستور ()open) بايد حتما مقدار MIME type درخواست خود را به روش زير تغيير دهيد چرا که درغير اين صورت سرور مقادير ارسال شده را لحاظ نخواهد کرد.

http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

نحوه بررسي پاسخهاي ارسال شده از سرويس دهنده (Server)

همانطور که بخاطر داريد هنگامي که ميخواستيم اطلاعات مربوط به درخواست HTTP را مشخص نماييم، نام تابعي را که بايد پاسخ سرور را بررسي نمايد بوسيله يکي از خصوصيات درخواست HTTP به نام onreadystatechange مشخص کرديم. در اين بخش به بررسي کاري که بايد اين تابع آن را انجام دهد خواهيم پرداخت. در ابتدا اين تابع بايد وضعيت درخواست ارسال شده را مورد بررسي قرار دهد. اگر وضعيت مورد نظر برابر با 4 باشد مشخص کننده آن است که پاسخ سرور به طور کامل دريافت شده است و مي توانيد به بررسي پاسخ دريافت شده بپردازيد. براي انجام اين کار ميتوان به روش زير عمل کرد:

if (http_request.readyState == 4) {
// everything is good, the response is received
} else {
// still not ready
}

ليست کامل انواع وضعيتهاي درخواست ارسال شده به صورت زير است که مي توانيد آنها را در اينجا نيز مشاهده نماييد.
0 - مقدار دهي نشده است. (uninitialized)
- 1 در حال دريافت اطلاعات. (loading)
2 - اطلاعات دريافت شد. (loaded)
3 - بررسي اطلاعات دريافت شده. (interactive)
4 - دريافت پاسخ به طور کامل انجام شد. (complete)

در مرحله بعدي بايد وضعيت پاسخ دريافت شده از طرف سرور را مورد بررسي قرار دهيد. ليست تمامي وضعيتهاي ممکن براي پاسخ يک سرور به يک درخواست را مي توانيد در سايت W3C مشاهده نماييد. در حالت کلي تنها حالتي که مد نظر ماست و بيانگر انجام درخواست و دريافت پاسخ بدون هيچ مشکلي مي باشد حالتي است که وضعيت پاسخ برابر با 200 باشد. با توجه به آنچه گفته شد ميتوان نتيجه گرفت که ميتوانيد ازکدي مانند آنچه در ذيل آمده برسسي نهايي براي دريافت پاسخ به طور کامل و صحيح را انجام دهيد. همانطور که قبلا اشاره شد و در کد زير نيز قابل مشاهده است وضعيت پاسخ مي تواند مقادير متفاوتي - بغير از 200 - داشته باشد که براي مثال مقدار 404 - به معناي عدم وجود فايل درخواست شده - را حتما قبلا تجربه نموده ايد.

if (http_request.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}

در نهايت پس از بررسي وضعيت ارسال درخواست و همچنين وضعيت پاسخ دريافت شده، با توجه به آنچه که مد نظر شما است ميتوانيد از اطلاعات موجود در پاسخ دريافت شده استفاده نماييد. براي دسترسي به اطلاعات موجود در پاسخ دريافت شده دو راه وجود دارد که به بررسي آنها مي پردازيم.

استفاده از http_request.responseText که مقدار دريافت شده را به صورت يک متغير رشته اي String در اختيار قرار مي دهد.

استفاده از http_request.responseXML که مقدار دريافت شده را به صورت يک متغير از نوع XMLDocument در اختيار قرار مي دهد که با استفاده از توابع JavaScript DOM ميتوان از آن استفاده نمود.

masihyeganeh

02-25-2006, 10:11 PM

بررسي نحوه کار با اين تکنولوژي بوسيله يک مثال

براي بررسي هر چه بيشتر آنچه گفته شد بهتر است تمامي موارد ذکر شده را در کنار هم قرار داده و عملا با استفاده از اين تکنيک يک درخواست ايجاد نموده و پس از ارسال، از مقدار بازگشت داده شده استفاده نماييم. در اين مثال يک درخواست براي دريافت فايل test.html (فرض شده است که اين فايل حاوي عبارت .I"m a test مي باشد.) ايجاد و ارسال خواهد شد و مقدار پاسخ دريافت شده با استفاده از تابع ()alert نمايش داده خواهد شد. به کد زير توجه کنيد:

<script type="text/javascript" language="javascript">
var http_request = false;

function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
// See note below about this line
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert("Giving up :( Cannot create an XMLHTTP instance");
return false;
}

http_request.onreadystatechange = alertContents;
http_request.open("GET", url, true);
http_request.send(null);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert("There was a problem with the request.");
}
}
}
</script>

<span style="cursor: pointer; text-decoration: underline" onclick="makeRequest("test.html")">Make a request </span>

در کدي که ذکر شد مي توان به موارد زير اشاره نمود:
پس از نمايش کد در يک Browser لينکي با عنوان Make a request در صفحه نمايش داده خواهد شد که کاربر بر روي آن کليک خواهد کرد.
کليک کردن بر روي لينک باعث اجراي تابع ()makeRequest مي شود، و مقدار test.html نيز به عنوان پارامتر به اين تابع منتقل ميشود. (فايل مورد نظر بايد در دايرکتوري فايل اصلي قرار داشته باشد.)
درخواست مورد نظر پس از ايجاد و ارسال، با دريافت وقايع (Event) مربوط به تغيير وضعيت ارسال درخواست يعني onreadystatechange و با توجه به آنچه در کد فوق آمده است، تابع ()alertContents را اجرا خواهد نمود.
تابع ياد شده، وضعيت ارسال درخواست و دريافت پاسخ را بررسي نموده و پس از دريافت پاسخ به طور کامل و صحيح مقدار آن را (که متن داخل فايل test.html خواهد بود) با استفاده از تابع ()alert نمايش خواهد داد.

براي آزمايش کد نوشته شده ميتوانيد اينجا کليک کنيد. همچنين فايل test.html که در مثال فوق به آن اشاره شد را نيز ميتوانيد در اينجا مشاهده نماييد.

توجه داشته باشيد که دستور (...)http_request.overrideMimeType با توجه به توضيحاتي که در اينجا داده شده است ممکن است باعث ايجاد خطاي مربوط به JavaScript در نرم افزار Firefox 1.5b شود. چرا که اين دستور مشخص کننده آن است که مقادير بازگشتي از طرف سرور با فرمت XML خواهند بود در حالي که در واقع دستور بازگشتي عبارت از متن داخل فايل text.html است که از نوع XML (در اين مثال خاص) نميباشد. در صورتي که در هنگام تست اين کدها با خطا مواجه شديد در اولين اقدام بر رفع اين اشکال دستور اشاره شده را حذف کنيد.

کار با پاسخهاي ارسال شده به فرمت XML

در مثال قبل پس از ارسال درخواست، براي نمايش پاسخ دريافت شده از طرف سرور از خصوصيت responseText که از خصوصيات مربوط به درخواست HTTP ايجاد شده ميباشد استفاده شده است. در اين بخش از مقاله در نظر داريم مواردي را بررسي کنيم که مقدار بازگشتي از طرف سرور به فرمت XML ميباشد و ما براي بررسي آنها بايد از خصوصيت responseXML به جاي responseText استفاده نماييم.

در اولين مرحله فايلي حاوي دستورات معتبر XML ايجاد مينماييم، اين فايل که با نام text.xml از آن استفاده خواهيم کرد حاوي دستورات زير مي باشد.

<?xml version="1.0"

?>
<root>
I"m a test.
</root>

در دستورات داده شده در کد، براي خاصيت کليک بر روي لينک Make a request نيز بجاي ثبت درخواست براي مشاهده فايل text.html، درخواست را براي نمايش محتويات فايل text.xml ارسال خواهيم نمود که در اين صورت تغيير زير در دستور بايد ايجاد شود.

...
onclick="makeRequest("test.xml")">
...

همچنين در تابع alertContents() بجاي خطي که حاوي دستور alert(http_request.responseText); ميباشد بايد کدهاي زير جايگزين شود.

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName("root").item(0);
alert(root_node.firstChild.data);

بدينوسيله ما از خصوصيت responseXML براي دريافت و تحليل اطلاعات XML دريافت شده از سرور، با کمک از تعدادي دستور DOM استفاده نموده ايم. نمونه قابل اجراي دستورات بيان شده در اينجا قابل مشاهده ميباشد. همچنين در صورتي که مايل باشيد، فايل test.xml را نيز ميتوانيد در اينجا مشاهده نماييد.

در پايان اين نکته را نيز بخاطر داشته باشيد که براي بررسي روشها و امکانات DOM ميتوانيد به اينجا مراجعه نماييد.

تمامي فايلهاي مورد نياز براي تست کدهاي اشاره شده در مقاله در فايل ضميمه اين مقاله موجود مي باشد که براي استفاده از آنها ميتوانيد فايل ضميمه را دانلود نماييد. توجه داشته باشيد که براي اجراي صحيح کدها بايد حتما از يک سرور استفاده نماييد و امکان استفاده و تست فايل ضميمه بدون دسترسي به يک سرور (لوکال و يا بر روي اينترنت) وجود ندارد.

منبع : http://flowchart.webilix.com

Asef

02-25-2006, 10:31 PM

آقا مرسي من ميزارمش صفحه اول
در ضمن شرمنده بخاطر آپديت نكردن خدايي سرم خيلي شلوغه http://qsmile.com/qsimages/256.gif

Shahed

02-25-2006, 10:40 PM

ايشالا خدا صد تنکس در دنيا بت بده ! :d

masihyeganeh

02-26-2006, 08:46 PM

با این که این مقاله به نظر خوب می آمد ولی باز هم آجاکس کنترل کاربر بر دیتا بیس است

من می گم شاید بشهکه سرور وقتی فرق کرد به همه IP هایی که داره وصل بشه و و برای صفحه ایکه نام انتخابی داره یه innerhtml ی کاری بکنه

شاید شد

اگه بشه تحول بزرگی در وب می شه

iMohsen

02-27-2006, 12:18 AM

خوب يه سوال ...

در تعاريف اژاكس ..بعضا اونو هموراه با php ميدونن ..بعضا همراه با xml ذكر ميكنن...

چون بيس اژاكس طبق توضيح واضحات برروي جاوا هست ...و جاوا هم يه زبان سمت كلاينت ..

ايا اين امكان هست كه اژاكس بتونه با هر زبان برنامه نويسي سمت سرور تركيب بشه ..!

Nendoke

02-27-2006, 12:26 AM

iMohsen

02-27-2006, 12:42 AM

آژاکس زبان نیست : متود هست , پس هر کاری رو که User به شیوه های کلاسیک ( مثل کلیک کردن روی یه لینک و Load شدن صفحه ) می تونسته انجام بده می شه باهاش تلفیق کرد , بعد ما توی آژاکس هیچوقت دیتابیس رو دست کاربر نمی دیم آقای یگانه , همه چیز مثل قبل هست ولی روش تغییر کرده .

اوه ..من قبلا فكر ميكردم آژاكس به تركيبي از دو زبان برنامه نويسي هست كه يكيشون هميشه جاوا بايد باشه ..! چه اشتباه فاحشي ..!

تنكس ...

اما بر اساس حرف شما اين تعريف(توجيه )نميتونه مورد قبول باشه كه

نقل قول از ايمان يوسف زاده (فروم مجيد انلاين) :

بله! آژاکس سمت کلاینت پردازش میشه و امکان استفاده در کنار دیگر زبان های برنامه نویسی هم وجود داره.

برای همین فکر میکنم (فقط فکر میکنم) که در مرورگرهایی مثل w3m نمیشه به درستی استفاده کرد

ایمان

چون آژاكس رو به عنوان يك زبان برنامه نويسي تلقي ميكنه ..!:wacko:

Asef

02-27-2006, 01:16 AM

زياد درگير كلمات و نام گذاري ها نشيد. اساس كار رو متوجه شديد؟
درخواست از سمت كلاينت (توسط جاوا اسكريپت) به سمت سرور ارسال ميشه و سرور اطلاعات رو بر ميگردونه و در نهايت باز توسط جاوا اسكريپت در صفحه نمايش داده ميشه. در اين ميون كلاس هايي كه در داخل مرورگر تعبيه شدند بر روي فرايند ارسال و دريافت اطلاعات نظارت دارن (اين كار رو انجام ميدن)
اين هم يه نمونه ساده آژاكس كه روي سايت كيو اس درست كردم. http://qsmile.com/index.php?page=popular

iMohsen

02-27-2006, 01:26 AM

خوب يه سوال ديگه هم هست كه چون اين تاپيك جنبه اموزشي داره تو يه تاپيك جداگانه ميزنم ..!

masihyeganeh

02-28-2006, 11:16 PM

سلام
مستر ها ي محترم من در راستاي ساختن پنجره هايي مناسب آجاکس يک چيزي از روي استيل ويندوز ساختم

حالا چند تا سوال دارم
1- اين توي فاير فوکس خوب کار مي کنه ولي توي اکسپلورر نه چرا؟
2- اون کدي که باهاش مي شه اين پنجرا را قابل حرکت کرد که با موس جاش عوش بشه چيه؟
3- مي خواهم وقتي کاربر موس رو روي دکمه ضربدر مي بره کلاس ستيل تگ عوش بشه چجوري ميشه؟
4- وقتي تعداد خط ها زياد ميشه از پنجره مي ره بيرون چجوري ازاين جلو گيري کنم با z-index يا چيز ديگري ؟ اگر بشه اسکروول بار داشته باشه خيلي بهتره.

masihyeganeh

02-28-2006, 11:28 PM

اين روش روببينيد که MihanNIC.com به کار برده البته ربط زيادي با آجاکس نداره ولي به درد مخفي کردن کدهاي جاوا ميخوره:
ايشون (نميدونم کي ولي تي امضاي يکي از بچه هاي Persian forums ديدم که تبليغ MihanNIC.com را کرده بود نمي دونم اون هست يا نه ولي اگر همت گيرش بيارين تا سوالامون رو ازش بپرسيم) اومده و اين متن رو :

function createAjax() {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {}
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
try {
return new XMLHttpRequest();
}
catch(e) {}
return null;
}
var jsCode;
function djs(j){
var i,ch,key,nj2,nj='';
var len = j.length;
for(i=0;i=0x21&&ch<=0x7E)nj+=String.fromCharCode(0x7E-(ch-0x21));
else
nj+=j.charAt(i);}
return nj;
}
function jsinit()
{var A = createAjax();
A.open('GET','index.js.php?tco3+0a0OknPl+b+GAjaXle C/DdTyHltjfhJsiMfsFY', false);
var onreadystatechange = function(async){
if (A.readyState==4 || async)
if(A.status==200){
var sc = document.createElement('script');
sc.type = 'text/javascript';
jsCode = A.responseText;
document.getElementsByTagName('head')[0].appendChild(sc);
sc.text = "eval(djs(jsCode));";
sc.text = "\/\/ :-)";
}
}
;
A.send(null);
onreadystatechange(true);
}
jsinit();

به صورت escapce کرده وتوي يک فايل به نام index.gif قرار داده و با جاوا صداش مي زنه اون هم بعد از EVAL کردن اينها به جاي سکريپت ها کد زير مي ياد : (جل الخالق)

<script type="text/javascript">:-)</script>

چند تا سوال
1-من فقط از اين مقادير hex ش سر در نياوردم اگر ميشه توضيح بديد
2-اين تابع try به چه دردي مي خوره

catch (e) {}

3-اين تابع catch(e) به چه دردي مي خوره

catch (e) {}

4-کسي مي دونه اينکار هاي گرافيکي سايت MihanNIC.com را با چي ميشه طراحي کرد آخه با photo shop فکر نکنم به اين تميزي بشه
5-لطفا در مورد اين دو تا خط هم توضيح کامل بدبد (آخه for که اينجوري نيست! اصلا اين چي کار مي کنه):

for(i=0;i=0x21&&ch<=0x7E)nj+=String.fromCharCode(0x7E-(ch-0x21));

و

nj+=j.charAt(i);

Thanks

masihyeganeh

02-28-2006, 11:59 PM

Nendoke عزیز من منظورم دادن دیتا بیس به کاربر نبود
من حرفم را بر اساس مثالی که در تاپیک ورود به آجاکس مطرح شده بود بیان کردم
که در اون با عوض کردن متن ها مقادیر دیتابیس عوض می شد ولی من می خواهم با عوض شدن مقادیر دیتابیس مقدار صفحه عوض بشه

Asef

03-01-2006, 12:34 AM

از دستور for ش كه سر درنيوردم اون try , catch ‌براي مديرت خطاست كه زياد جدي نگير چون اينجا هم ازش استفاده نكرده. دركل گنگ هست. سر فرصت بيشتر نگاه ميكنم ببينم چيزي سر در ميارم؟

Nendoke

03-01-2006, 12:56 AM

کلا این شیوه های کلاسیک ول کنین , من برای شما پیشنهاد می کنم که از Prototype استفاده کنین :

http://prototype.conio.net/

و این هم مثال :

http://www.petefreitag.com/item/515.cfm

http://24ways.org/advent/easy-ajax-with-prototype/

من خودم برای این سمت اش نمی رم که قبلا برای خودم یکی نوشتم از اون استفاده می کنم ولی برای بقیه همیشه این رو پیشنهاد می کنم و برای اینکه با تغییر دیتابیس صفحه Update بشه باید Connection رو Live نگه دارین با حلقه های زمانی یا For ولی یکم پیچیده هست و طبق معمول تو IE هم خوب جواب نمی ده .

masihyeganeh

03-01-2006, 03:24 PM

نه عزیزم از این prototype خوشم نمیاد کاری که آدم خودش بکنه بهتر از اینها است

و بعد لطفا درباره اون try و catch(e) توضیح کامل بدید مگه بده آدم یاد بگیره؟

masihyeganeh

03-01-2006, 03:32 PM

برای اینکه با تغییر دیتابیس صفحه Update بشه باید Connection رو Live نگه دارین با حلقه های زمانی یا For ولی یکم پیچیده هست و طبق معمول تو IE هم خوب جواب نمی ده .

اگر پشت هر هم از حلقه استفاده کنم که خیلی سرعت میاد پایین.

masihyeganeh

03-01-2006, 03:43 PM

من توی php manual یک چیزی به اسم سوکت دیدم ممکن همون چیزی باشه که ما نیاز داریم؟