کمک کنید تا ajax یاد بگیرم (درک من از ajax را بخوانید)

[foranyone]

با سلام خدمت تمامی دوستان گلم ، من قبلا خیلی با جاوا اسکریپت و فریم ورک های آن کار کردم ولی ایجکس بلد نیستم!

امروز یه مثال ساده از اون رو بررسی کردم و درکی رو که از کد ها داشتم اینجا براتون نوشتم لطفا هرکجای کار اشتباه فکر می کنم راهنماییم کنین.

با تشکر



درک من :

[FONT=&quot]در سند [/FONT]HTML [FONT=&quot] که کاربر باید اطلاعات را در آن وارد نماید [/FONT]ajax.js [FONT=&quot] را [/FONT]include [FONT=&quot] می کنیم[/FONT]:[FONT=&quot] فایل [/FONT]ajax.js [FONT=&quot] حاوی 2 تابع بسیار مهم با عناوین [/FONT]DoCallback[FONT=&quot] (با آرگومان [/FONT]data[FONT=&quot]) و [/FONT] [FONT=&quot] [/FONT]processReqChange[FONT=&quot] (بدون آرگومان) می باشند. تابع اول وظیفه ارسال اطلاعات را دارد و تابع دوم به محض پاسخ از سرور اجرا میشود و تابعی را که باید اجرا شود مشخص می کند.[/FONT]​

[FONT=&quot]فرم خود را طراحی میکنیم و برای تمامی اطلاعاتی که قرار است ارسال شوند [/FONT]ID [FONT=&quot] و [/FONT]name[FONT=&quot] در نظر میگیریم . این [/FONT]name [FONT=&quot] ها قرار است در فایل [/FONT]php [FONT=&quot] توسط [/FONT]$_post [FONT=&quot] پردازش شوند. [/FONT]​

[FONT=&quot]نکته ی مهم این است که فرم نباید [/FONT]submit [FONT=&quot] شود ، به عبارتی بهتر است از [/FONT]event [FONT=&quot] هایی مثل [/FONT]onclick [FONT=&quot] برای پردازش فرم استفاده نمائیم.[/FONT]​

[FONT=&quot]یک [/FONT]div [FONT=&quot] هم طراحی می کنیم و [/FONT]display [FONT=&quot]ا آنرا [/FONT]none [FONT=&quot] میکنیم و تصویری را که دوست دارم موقع ارتباط با سرور لود شود در آن قرار می دهیم این [/FONT]Div [FONT=&quot] هم باید [/FONT]id [FONT=&quot] داشته باشد ، تا بتوانیم بعدا [/FONT]display [FONT=&quot] آنرا [/FONT]block [FONT=&quot] کنیم[/FONT]​

[FONT=&quot]موقع اجرای [/FONT]event [FONT=&quot]، [/FONT]onclick [FONT=&quot] باید یک تابع اجرا شود ، این تابع جاوا اسکریپتی واسطی بین فرم و توابع [/FONT]ajax [FONT=&quot] می باشد که اطلاعات را دریافت کرده و پردازش ها ی خاص یا گاها تغیرات خاص را انجام داده و اطلاعات درست را به [/FONT]DoCallbak [FONT=&quot] ارسال خواهد نمود. این تابع را از این به بعد تابع واسط می خوانیم.[/FONT]​

[FONT=&quot]این توابع باید قبل از [/FONT]include [FONT=&quot]کردن فایل [/FONT]ajax.js [FONT=&quot] نوشته شوند زیرا شاید در آنها از متغیرهایی استفاده نمائیم که توسط توابع [/FONT]ajax [FONT=&quot] مورد استفاده قرار گیرند.[/FONT]​

[FONT=&quot]همچنین قبل از این تابع واسط باید متغیری با نام [/FONT]what [FONT=&quot] با [/FONT]LoginStatus(req.responseText[FONT=&quot]) مقداردهی شود تا هر وقت سرور خواست جواب ارسال کند این تابع به صورت هوشمند فراخوانی شوده و پاسخ مناسبی را صادر کند (نام این متغیر می تواند غیر از [/FONT]what[FONT=&quot] نام دیگری باشد ولی حتما باید داخل تابع [/FONT]processReqChange[FONT=&quot] نیز از همان نام استفاده شود )[/FONT]​

[FONT=&quot]، داخل تابع واسط باید مشخص شود که :[/FONT]​

·[FONT=&quot] [/FONT][FONT=&quot]درخواست ها باید به کدام فایل ارسال شود که باید داخل متغیری به نام [/FONT]url [FONT=&quot] ذخیره شود . این نام نیز به شرطی می تواند نامی جز [/FONT]url [FONT=&quot] باشد که در تابع [/FONT]DoCallback[FONT=&quot] در قسمت [/FONT]reg.open [FONT=&quot] از همان نام استفاده شود .[/FONT]​

·[FONT=&quot] [/FONT][FONT=&quot]قسمتس که قرار است تصویر [/FONT]loading [FONT=&quot] را نمایش دهد ، باید[/FONT] [FONT=&quot] به صورت [/FONT]object [FONT=&quot] توسط [/FONT]getelElementById [FONT=&quot] خوانده شده و در متغیری به نام [/FONT]loadBar[FONT=&quot] (یا هر نام دیگر) ذخیره شود. همچنین باید [/FONT]object [FONT=&quot] ، [/FONT]message [FONT=&quot] (یا هر نام دیگر ) نیز که حاوی نتایج پردازش خواهد بود ، توسط تابع فوق خوانده شود در انهای تابع بدون توجه به نوع [/FONT]method [FONT=&quot] فرم [/FONT] [FONT=&quot]اطلاعات باید به صورت زوج مقدار [/FONT]= [FONT=&quot] [/FONT]value [FONT=&quot] که توسط [/FONT]& [FONT=&quot] از هم جدا شده اند ، به تابع [/FONT]DoCallback [FONT=&quot] ارسال شوند حال اطلاعات به سرور ارسال شده است .اطلاعات در ظاهر به صورت [/FONT]GET [FONT=&quot] ارسال شده است ولی چیزی که مهم است متدی است برای فرم تعین کرده ایم که اگر از [/FONT]method [FONT=&quot] پست استفاده کرده باشیم حتما باید با [/FONT]$_POST [FONT=&quot] خوانده شوند .[/FONT]​

[FONT=&quot]وقت آن رسیده است که ما منتظر بمانیم پس باید تصویر [/FONT]loading [FONT=&quot] برای کاربر نمایش داده شود پس بعد از فراخوانی [/FONT]Callback [FONT=&quot] باید تصویر [/FONT]loading [FONT=&quot] را با [/FONT]id [FONT=&quot] انتخاب کنیم و [/FONT]style [FONT=&quot] آنرا تغیر دهیم تا دیده شود.[/FONT]​

[FONT=&quot] [/FONT]​

[FONT=&quot]حال سرور جوابی را به کلاینت ارسال می کند که داخل متغیر [/FONT]reg.responseText [FONT=&quot] ذخیره شده است. این متغیر در حقیقت نتیجه ی حاصل از اجرای فایل [/FONT]php [FONT=&quot] می باشد که به جای اینکه مستقیم به خروجی برود و صفحه رفرش شود ، نتایج را به تابع مناسب جاوا اسکریپتی تحویل می دهد. حال ما باید نتایج حاصله را داخل یکی از [/FONT]div [FONT=&quot] هایی که قبلا در نظر گرفته ایم مثل [/FONT]message [FONT=&quot] نمایش دهیم ، همچنین باید لودینگ را حذف کنیم.[/FONT]​

و این هم قلب ایجکس:

function DoCallback(data) { 
alert(data);
  // branch for native XMLHttpRequest object 
  if (window.XMLHttpRequest) { 
    req = new XMLHttpRequest(); 
    req.onreadystatechange = processReqChange; 
    req.open('POST', url, true); 
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    req.send(data); 
    // branch for IE/Windows ActiveX version 
 } 
  else if (window.ActiveXObject) { 
    req = new ActiveXObject('Microsoft.XMLHTTP');
     if (req) { 
      req.onreadystatechange = processReqChange; 
      req.open('POST', url, true); 
      req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
      req.send(data); 
    } 
  } 
}


function processReqChange() {

  // only if req shows 'loaded' 
   if (req.readyState == 4) { 
    // only if 'OK' 
     if (req.status == 200) { 
      eval(what); 
    } else { 
      alert('مشكل در برقراري ارتباط با سرور: ' + req.responseText); 
    }  
  }  
} // JavaScript Document

​

 

[foranyone]

سلام من موفق شدم اواین اسکریپت ایجکس رو بنویسم

اینجا براتون آپلودش کردم ، فقط نمی دونم چرا اگه داخل فایل php فارسی نوشته باشم درست نمایش داده نمیشه !

 

[foranyone]

در ضمن من تمامی تاپیک های انجمن AJAx رو نگاه کردم مشکل نمایش فارسی رو نتونستم حل کنم (فقط در opera درست نشون داده میشه)

 

[eAmin]

سلام.

تا حدودی درسته، ولی زیاد پیچیده نیست.
قلب ای جکس در اصل این دو هست:

new XMLHttpRequest(); // Mozilla browser, Safari, Opera, IE7+ & etc...
new ActiveXObject("Microsoft.XMLHTTP"); // IE6 or older

که طبق توضیحاتی که دادم، باید یه تابع بنویسی تا همه مرورگرها بتونن از اون به خوبی استفاده کنن.
این شی ها چندین متد دارن که عبارتند از:

open
send
onreadystatechange
status
abort
statusText
readyState
setRequestHeader
getAllResponseHeaders
getResponseHeader
responseText
responseXML

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

function xhr() {
	return window.XMLHttpRequest ? new XMLHttpRequest() : try { new ActiveXObject("Msxml2.XMLHTTP") } catch(e) { new ActiveXObject("Microsoft.XMLHTTP") };
}

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

function sendReq() {
	var req = xhr();
	req.open()
	req.onreadystatechange = function(){};
	req.send();
	req.setRequestHeader();
	req.getResponseHeader();
	// ...
}

اگر بازهم فکر می کنی مشکل داری و نمی تونی درک کنی، می تونم یه فایل آموزش word که خودم برای یکی از دوستان نوشتم رو در اختیارت قرار بدم. البته کاملش نکردم و دیگه ادامه ندادم ولی می تونه برای شروع مناسب باشه.

 

[foranyone]

دستت درد نکنه امین جان ، توضیحاتت مفید و کامل بود ، لطف میکنی اگه فایل word راو برا دانلود همه اینجا قرار بدیش

 

[Masoud1365]

امین جان این یه تیکه کد که نوشتی با همه مرورگرها و IE ها سازگاره ( منظورم از IE ها ورژن های مختلف اونه )

function xhr() {
	return window.XMLHttpRequest ? new XMLHttpRequest() : try { new ActiveXObject("Msxml2.XMLHTTP") } catch(e) { new ActiveXObject("Microsoft.XMLHTTP") };
}

 

[eAmin]

دستت درد نکنه امین جان ، توضیحاتت مفید و کامل بود ، لطف میکنی اگه فایل word راو برا دانلود همه اینجا قرار بدیش

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

امین جان این یه تیکه کد که نوشتی با همه مرورگرها و IE ها سازگاره ( منظورم از IE ها ورژن های مختلف اونه )

function xhr() {
	return window.XMLHttpRequest ? new XMLHttpRequest() : try { new ActiveXObject("Msxml2.XMLHTTP") } catch(e) { new ActiveXObject("Microsoft.XMLHTTP") };
}

بله، با اکثر مرورگرهای فعلی سازگاره: Firefox, Safari, Opera, IE5-8, Chrome و ...
البته برای IceBrowser باید createRequest() رو هم به تابع اضافه کنید.

 

[eAmin]

سلام.

از اونجا که سرم بدجوری شلوغ هست، فعلا این سایت رو به شما معرفی می کنم که همراه با مثال عملی هست، بعدا اگر وقت خالی پیدا کردم فایل doc رو قرار می دم.
http://boplo.ir/web-design/ajax-learn-tutorial