وب سایت خود را بر پایه ajax بسازید. قسمت اول برای آماتورها

[ODE112]

همه شما بلدید چطوری با HTTp_REQUEST یه صفحه رو لود کنید کذش قابت هست و نیاز به تغییرات نداره و فایل ajax.js ما هم همون هست! ولی نمیخوام وقتمون رو با اون تلف کنیم! میخوام در مورد کنترل مقادیر لود شده و مدیریت اونا توی سایتمون بیشتر حرف بزنیم! اصل ajax هم همینه هنز استفاده از http_request
---------------------------------------------------

ajax به زبان ساده! برای همه قسمت اول:

اگر میخواهید وب سایت خود را با ajax بنا کنید یا از ajax در پیکره اون استفاده کنید لازم هست کدهای HTML سایت خودتون رو خوب بشناسید در مرحله اول! مهم ترین قسمت ajax همین هست

در اولین مرحله باید اجزای صفحه خودمون رو بشناسیم! یعنی چی؟ توضیح میدم
تصویر پایین صفحه اول یک سایت ساده با HTML یا PHP یا.... هست که همتون براحتی با فرونت پیج یا... میسازیدش و دقت نمیکنید به اصل کدهای HTML اون

صفحه اول سایت رو با Frontpage باز میکنیم
تصویر یک:

برای مثال ما صفحه زیر رو فقط با ابزارها در محیط FRONTPAGE ساختیم! حالا وقت این هست که برای قسمت های مورد نظر در سایت: منطقه شماره یک و دو و سه و سه تا دکمه بالای سایت ID تعریف کنیم تا بتونیم راحت شناسایشون کنیم

برای اینکار فایل index.htm رو بوسیه Frontpage یا Dreamweaver باز کنید و دنبال کلمه "john whoo" بگردید!

برای قسمتی که کلمه john whoo نوشته شده آیدی M_1 رو در نظر میگیریم! برای اینکار john whoo رو در یک تگ DIV قرار میدیدم به این شکل و آیدی اون رو میذاریم M_1

ادیت کنید به این شکل:

john whoo

به


<div id="M_1">john whoo</div>

خلاص!


برای نشانه گذاری منطقه دوم کلمه "Hello baby" رو جستجو کنید! و تغییر بدید به

hello baby

به

<div id="M_2">hello baby</div>

خلاص!


برای نشانه گذاری منطقه دوم کلمه Yatimche رو جستجوی و جایگزین کنید به این شکل

Yatimche

به

<div id="M_3">Yatimche"</div>


خلاص! ما 3 منطقه برای وب سایتتمون تعریف کردیم!

---------------------

حالا دستور دادن به دکمه ها ( تو آجاکس لینک نداریم دیگه دکمه میگم پس)

این کد رو پیدا کنید در فایل index.htm برای دستور دادن به دکمه یا عکس HOME

<img border="0" id="img1" src="button_A.gif" height="30" width="150" alt="HOME">

بعد از

 <img

بنویسی د

 onclick="beload('home','M_1')"

باید داشته باشید

<img onclick="beload('home.html','M_1')" border="0" id="img1" src="button_A.gif" height="30" width="150" alt="HOME">

خوب فعلا همین یک دکمه کافی هست! ولی معناش چی بود؟ دستور onclicki که نوشتیم میگه اگه بر روی این تصویر کلیک شد صفحه HOME در منطقه M_1 لود بشه!

همینطور میتونید دکمه اضافه کنید فقط باید در پرانتز 2 تا مقدار بنویسید! اولی صفحه ای که میخواید لود بشه
و دومی محلی که میخواید لود بشه!



حالا فایل ها رو بریزید روی هاستتون و برید به آدرسی که فایل ها اونجاست و فایل index.htm رو بخونید

مثلا http://www.roostercode.com/ajaxtest/index.htm

در فولدر ajaxtest باید این فایل ها رو داشته باشید:

ajax.js
index.html
home.html



#################################

حالا میریم روی قسمت های js کار کنیم! منظورم فایل های javascript هست
فایل اولی که ajax.js هست که برای همه وب سایت ها یکشکل هست و چیزی برای تغییر دادن نداره! پس ولش کنید

ولی فایلی که مربوط به وب سایت ajax شما اسمش رو گذاشتم ali.js حالا اونو با Dreamweaver باز کنید!

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

در واقع هر چه روی این قسمت کار کنید و حرفه ای تر عمل کنید نشون دادید که قدرت ajax شما بیشتر هست! وگرنه ساختن یک صفحه که ذرتی تو یک صفحه دیگه لود میشه رو هر kckholi بلده در واقع همه فکر میکنن ajax یادگرفتن یعنی داشتن فایل ajax.js در حالیکه اندر خم کوچه اولی هستن....
ولش کن



خوب فایل ali.js رو باز کردیم داریم توش

function DOMz(shirini)
{
	document.getElementById(shir).innerHTML = shirini
}

توضیح این فانکشن! وقتی شما دستور

 onclick="('folan','folan')"

رو به یک تصویر یا نوشته یا.... میدید با کلیک کردن روی اون دستور beload از روی فایل ajax.js صفحه مورد نظر رو دانلود میکنه یا میخونه یا هر چی و وقتی همش رو خوند فانکشن DOMz از روی فایل ali.js فعال میشه و محتوی صفحه لود شده براش فرستاده میشه

یعنی مقدار shirini برابر هست با محتویات صفحه مورد نظری که لودش کردید

دستور

 document.getElemenyById('xxx').innerHTML

میگه تگی که ID برابر هست با مقدار توی پرانتز یعنی xxx خالی بشه و محتواش برابر بشه مقدار shirini



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




اگه در دستور

 onclick="beload('home.html,'M_1')""

مقدار M_1 رو به M_2 تغییر بدیم صفحه مورد نظر در منطقه 2 وب سایت ما لود میشه و اینجوری میشه سایت تیریپسی با ajax ساخت! یا اگه مقدار home.html رو به conact.htm مثلا تغییر بدید صفحه conact.html لود میشه!


توجه کنید دوباره تو فایل home.html دیگه نباید هیدر و فودر و همه اینا رو گذاشت چون یکبار لود شدن و فقط معمولا نوشته و عکس باید توش بنویسید


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


ساعت 12 سر شب شروع کردم این 4 خط رو بنویسم الان ساعت 2:49 هست! دیگه خوابم میاد بقیش فردا
ازم ایراد بگیرید یا سوال بپرسید!
شب بخیر
به قول بیمسیا فعلا

 

[adnan]

دوست عزیز !

آموزش خیلی خوبی شروع کردی . اگر دوست داشتی من می تونم دسترسی استاد روی سایت www.irschool.com ّدهم که مطالب آموزشیت را هم آنجا قرار بدهی !

اگر خواستی با من تماس بگیر !

 

[ODE112]

دوست عزیز !

آموزش خیلی خوبی شروع کردی . اگر دوست داشتی من می تونم دسترسی استاد روی سایت www.irschool.com ّدهم که مطالب آموزشیت را هم آنجا قرار بدهی !

اگر خواستی با من تماس بگیر !

بزن بریم

 

[peiman]

عالیه
ممنون

 

[farbod_123]

تشکر
.

 

[sama_sally]

عالی بود مرسی

 

[hba]

عالی بود خوشم اومد
حتما ادامه بده
نری دیگه نیای همین جا بزن گم نشه\

اقا این فایل index.php رو من اجرا کردم ولی کار نکرد بعد در xxamp گذاشتم کار کرد
چرا مگه از دستورات سرور استفاده شده؟

 

[ODE112]

عالی بود خوشم اومد
حتما ادامه بده
نری دیگه نیای همین جا بزن گم نشه\

اقا این فایل index.php رو من اجرا کردم ولی کار نکرد بعد در xxamp گذاشتم کار کرد
چرا مگه از دستورات سرور استفاده شده؟

شاخه ای که توشه رو پیدا نمیکنه یا پرمشین برای خوندنش نداره
اینطوری بذار که از روی هارد مثلا کار بکنه!

onclick="beload('http://127.0.0.1/learn/home.php','M_1)"

 

[siavashmusic]

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

 

[shahkey]

خیلی خیلی عالی بود
فقط زودتر قسمت بدیشو بنویس

 

[ODE112]

خوب گفتیم فرداشب برای ajax سایتمون Loading... هم میذاریم.

خوب حالا میخوایم وقتی کاربر روی دکمه HOME کلیک میکنه تا زمانی که صفحه home.php لود میشه یه تصویر گیف در منطقه مورد نظر از وب سایت ما که انتخاب کردیم نمایش داده بشه

برای مثال من میخوام این عکس در زمان های لود صفحه جدید نمایش داده بشه

خوب برای اینکار اول فایل ajax.js رو با dreamweaver باز کنید و بیاید خط 11 یا اینو پیدا کنید

isiusjs.onreadystatechange = begirtahvil;

حالا قبل از خط بالا یه خط جدید بسازید و بنویسید توش:

imageloading(Destination);

یعنی باید اینجوری شده باشه فایلتون

alert("CONNECT FAILURE BABY"); return false;}
imageloading();
isiusjs.onreadystatechange = begirtahvil;

خوب حالا سیو کنید و فایل ajax.js رو ببندید

حالا بیاید فایل ali.js رو باز کنید با دریمویور و در خط 5 بنویسد:

function imageloading(roxito)
{
	document.getElementById(roxito).innerHTML = '<img src="http://roostercode.com/temp/loading_ani2.gif">';
}

یعنی کل فایل ali.js باید اینارو داشته باشه الان

function DOMz(shirini)
{
	document.getElementById(shir).innerHTML = shirini
}

function imageloading()
{
	document.getElementById(shir).innerHTML = '<img src="http://roostercode.com/temp/loading_ani2.gif">';
}

خوب حالا وقتی کاربر روی دکمه HOME یا هر دکمه دیگه ای که شما تنظیم کردید اول تصویر لودینگ میاد و بعد از اینکه اون صفحه کامل لود شد حذف میشه و محتوی فایل هوم رو نشون میده
آدرس عکس رو میتونید عوض کنید

میتونید بجای

document.getElementById(shir).innerHTML = '<img src="http://roostercode.com/temp/loading_ani2.gif">';

هر چی میخواید بنویسید
اگه میخواید فقط بنویسه Loading فقط بنویسید Loading... همین

نکته> اگه از روی لوکال تست میکنید ممکنه اصلا شما تصویر لودینگ رو نبینید چون خیلی سریع لود میشه صفحه مورد نظر ولی از روی وب سایت دست کم چند ثانیه طول میکشه
مثل لودینگ صفحه اول سایت یاهو دیدینش که
بقیش فرداشب

 

[adnan]

علی جان ! پیغام خصوصی مرا در یافت کردی ؟

 

[hba]

نظر هم می دیم
خیلی قشنگ نوشته بودی کلا زبان ساده نوشته ای که همه می فهمند
ممنون ازت همینطوری بنویس می خوام یه ارشیو برای خودم درست کنم

 

[shahkey]

عالیه
ادامه بده

 

[shahkey]

راستی یه سوال فنی

اگه اون صفحه home.htm اندازش از div بزرگتر باشه یا اسکرول بخوره مثل فریم توی صفحه ی جدیدم که با زدن دکمه میاد سکرول داره یا نه؟

 

[ODE112]

راستی یه سوال فنی

اگه اون صفحه home.htm اندازش از div بزرگتر باشه یا اسکرول بخوره مثل فریم توی صفحه ی جدیدم که با زدن دکمه میاد سکرول داره یا نه؟

شاه کلید! کلید کن اینجا پست دومی من نوشته اورفلو ایکس برای اسکرول دادن به دیو هست http://forum.persiantools.com/showthread.php?t=41424&highlight=div

 

[Adel]

علی جان من تست کردم فایلتو کار کرد فقط وقتی تویی فایل ajax.js رو خط 11 رو به 12 تبدیل می کنیم و خط 11

imageloading(Destination);

رو می نویسی بعد روی HOME کلیک کنی باز نمیشه و ارور میاد

آموزشتو ادامه بده خیلی جالبه در مورد برنامه هایی جانبیشم اگه توضیح بدی بهتره تویی یک ebook چند تا نرم افزار معرفی کرده بود در مورد اونا هم بگو ممنون

 

[Adel]

در ضمن یک سوال دیگه

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

یعنی مثلا HOME که بصورت یک عکس بصورت فلش باشه

؟

من چیزی تویی فلش ندیدم و به این شکل هم تا حالا ندیدم ممنون میشم بگی

و یک سوال دیگه که فکر کنم ادامه آموزشت بنویسی کامل تر بکنش اینه که وقتی یکی بروی HOME کلیک کرد و متن پیج HOMe.Htm مایش داده شد چجوری به قبل بر گرده مثلا وقتی روی HOME کلیک کرد متن HELLO, THIS IS HOME DATA نمایش داده شد چجوری م یتونه به متن John whoo رو که در منطفه 1 قبل از لود شدن پیج HOME.HTM بود بدون این که بخواد صفحه رو از اول رفرش کنه برگرده ؟

و یک چیز دیگه مثلا ما میایم بجایی این که بگیم دکمه HOME یاد فایل HOME.HTM رو در منطقه 1 باز کنه بیایم بگیم دکمه HOME فایلی که در آدرس

adel/index.php/..

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

چجوری میشه این مشکل رو رفع کرد ؟ البته این کار موقعی میشه که تویی فولدر عادل بصورت پیش فرض صفحه index.php آدرس عکسها بصورت لینک نباشه یعنی مثلا داخل صفحه index.php تصویر 1.jpg بصورت www.Name.com/adel//imag/1.jpg نیست بلکه به این شکله image/1.jpg و وثتی به این صورت باشه وقتی در صفحه فایل ایندکس در فولدر عادل رو می خونیم آدرس تصویر یا فایلهایی دیگر بصورت www.Name.Com/pt_ajax_help_a/1.jpg می خونه و مسلما باز نمی کنه

ممنون از لطفت

 

[Adel]

خبری نشد ؟

 

[mikhak]

سلام ديدم بحثتون در مورد ajax هستش گفتم به اينجا هم يه نظري بدين .
قسمت معرفي به دوستان كه يه بلوك هستش تو صفحه اول.
البته خيلي ساده هستش ولي رو ناك پياده سازيش كردم .
http://yasharco.com
قسمت معرفي به دوستانم كه يك بلوك تو صفحه اول هستش رو هم با ajax نوشتم
منتظر نظرتاتتون هستم
---------------
سينا