آموزش Ajax

**MJ_Alex** · April 14th, 2006, 08:51 PM

با اجازه اساتید این تاپیک رو باز می کنم تا محل و منبعی باشه برای طرفداران این تکنولوژی. از همه هم دعوت میکنم تا هر چیزی که دارن اعم از آموزش ، منبع و... رو بذارن کنن تا همه با هم یاد بگیریم.
در مورد مکان تاپیک هم نمی دونستم تو کدوم بخش بزنم آخه ای جکس از چند تا تکنولوژی استفاده میکنه. اما شایان گفت اینجا بزنم تا بعدا جدا بشه... به بزرگی خودتون ببخشید دیگه.
اول از همه یه مقدمه کوچولو عرض میکنم تا شروعی بر کارمون باشه : (این مقدمه رو از اینجا برداشتم : http://notvoid.persianblog.com/ البته با یه کمی تغییر)
اگر شما تا به حال حتی يک صفحه وب هم نساختيد ولی حتما متوجه فرق بين صفحات وب و برنامه هايی که در ويندوز اجرا ميکنيد شده ايد. تا قبل از آمدن AJAX (و بسياری سايت ها هم چنان)صفحات وب يا همان وب سايت ها دارای قابليت بسيار محدود بودند.در صفحات وبی که به صورت Dynamic (صفحات Dynamic صفحاتی هستند که قابليت دريافت و تبادل اطلاعات با کاربر را دارند)طراحی ميشوند در تعامل با کاربر اکثر اوقات صفحه مجبور به لود شدن مجدد بود تا بتواند تغييرات دلخواه کاربر( به عنوان مثال نمايش نتايج جستجو) را نمايش دهد که اين عمل لود شدن دوباره(يا به اصطلاح postback) نه تنها زمانگير بود بلکه موجب سردرگمی کاربر و در نتيجه پايين آمدن جذابيت سايت ميشد. اما مایکروسافت با ایجاد دستور XMLHttpRequest تحولی عظیم در دنیای صفحات وب بوجود آورد و موجب ایجاد تکنولوژی جدیدی شد.ولی واقاُ AJAX چيست؟ AJAX ترکيبی از چندين تکنولوژی طراحی صفحات وب است.بحث راجع به اينکه اسمش از کجا اومد و کی اول ابداعش کرد رو ميگذريم .AJAX ترکيبی از تکنولوژی ها طراحی صفحات static و کد نويسی سمت کاربر (javascript)و کد سمت سرور(مثل ASP.NET ,PHP,...) و XML وتبادل غير متقارن داده هاست.واو ...از اينهمه کلمه قلمبه سلمبه نترسيدا خلاصش اين که AJAX ميتونه اطلاعات و داده ها رو بدون اينکه در نمايش صفحه توقفی ايجاد کنه بين سرور و کلاينت تبادل کنه و در صورت لزوم اطلاعات را به قسمتی از صفحه اضافه کنه بدون اينکه بقيه صفحه رو ببره و بياره.به عنوان نمونه سايت های Google Suggest و يا Google Maps به درستی از AJAX استفاده کردند.در شکل زير تفاوت يک طراحی معمول بدون استفاده از AJAX رو با يک صفحه به همراه AJAX رو نشون ميده.

خب حالا یه مثال از آژاکس : در این مثال ما یه ماشین حساب رو طراحی می کنیم که هم AJAX و هم صفحات داینامیک معمول رو در بر میگیره. برای دیدن این مثال اینجا رو ببینید و از اینجا هم دانلود کنید. برای اجرای این مثال روی لوکال هاست به PHP و Apache نیاز دارید. این هم منبع این مثال : http://www.sematopia.com/?p=34
می پردازیم به کد : اول از همه جاوا اسکریپت :
فایل ajax.js :

کد:

var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}

function ajax_call() {
xmlhttp.open("GET", 'ajaxWork.php?num1=' +
document.getElementById('num1').value +
'&num2=' + document.getElementById('num2').value , true);

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById('result').value = xmlhttp.responseText;
}
}

xmlhttp.send(null)
return false;
}

حالا نوبت به کدهای PHP میرسه
اول فایل ajaxWork.php :

کد:

< ?php

include("ajaxClass.php");

$objSem = new ajax;
$objSem->readURLParameters();
$objSem->staticExample();

echo $objSem->result;
? >

تو این کد صفحه جدیدی به نام ajaxClass.php درخواست کردیم که کدش اینه :

کد:

< ?php

class ajax {

var $queryParam = array();
var $result = 0;
var $num1 = 0;
var $num2 = 0;

function readURLParameters() {
$qstr = explode("&", $_SERVER['QUERY_STRING']);
foreach ($qstr as $value) {
$paramVal = explode("=",$value);
if (array_key_exists(1,$paramVal)) {
$this->queryParam[$paramVal[0]] = $paramVal[1];
}
}
}

function staticExample() {
if (array_key_exists("num1",$this->queryParam) & array_key_exists("num2",$this->queryParam)) {
$this->result = $this->queryParam["num1"] * $this->queryParam["num2"];
$this->num1 = $this->queryParam["num1"];
$this->num2 = $this->queryParam["num2"];
}
}

}
? >

و در آخر هم کد index.php :

کد:

<?php

include("ajaxClass.php");

$objSem = new ajax;
$objSem->readURLParameters();
$objSem->staticExample();

?>

<html>
<script src="ajax.js" type="text/javascript"></script>
<body>
<br><br>
<p>AJAX Example:</p>
<form name="form1" action="" onsubmit="return ajax_call()">
	<input type="text" name="num1" id="num1"></input> *
	<input type="text" name="num2" id="num2"></input> = 
	<input type="text" name="result" id="result"></input>
	<br><br>
	<input type="submit" name="semajax" value="AJAX"></input>
</form>
<!-- -->
<br><br>
<p>Standard Example:</p>
<form name="form1" action="index.php">
	<input type="text" name="num1" id="num1" value="<? echo $objSem->num1 ?>">num1 ?>></input> *
	<input type="text" name="num2" id="num2" value="<? echo $objSem->num2 ?>">num2 ?>></input> = 
	<input type="text" name="result" id="result" value="<? echo $objSem->result ?>">result ?>></input>
	<br><br>
	<input type="submit" name="semajax" value="Standard"></input>
</form>
</body>
</html>

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

**Mehdi** · April 14th, 2006, 09:30 PM

يكي هم اينجاست

يه مثال ساده برا اي جكس : پي اچ پي ؛ دات نت ؛ پرل

**MJ_Alex** · April 14th, 2006, 10:21 PM

آقا مهدی ممنون
و اما یه بسته بسیار جالب به نام Sajax
این بسته چند تا مثال داره که به زبانهای php , asp , coldfusion , io , lua , perl , python , ruby نوشته شده !
نمونه ها رو اینجا و اینجا ببینید.

دانلود بسته

**Mehdi** · April 14th, 2006, 10:24 PM

يكي ديگه JSpan هست ولي من Sajax رو ترجيح ميدم

**MJ_Alex** · April 14th, 2006, 10:40 PM

یه منبع بسیار مفید از شرکت موزیلا : http://developer.mozilla.org/en/docs/Category:AJAX

**mehdi25** · April 15th, 2006, 12:18 AM

خوب چیزی رو شروع کردین .

امیدوارم که به جایی برسه که یه قسمت مستقل برای AjaX هم زده بشه .

راستی مهدی جان آواتر جدید مبارک

**mehdi25** · April 15th, 2006, 12:26 AM

اگه از مثال های ASP هم استفاده بشه ممنون میشم .

**MJ_Alex** · April 15th, 2006, 12:39 AM

نوشته اصلی توسط mehdi25

اگه از مثال های ASP هم استفاده بشه ممنون میشم .

تو بسته Sajax هست
چشم بازم میزارم ...

**MJ_Alex** · April 15th, 2006, 12:45 AM

این هم مثالهایی برای ASP.Net که تحت عنوان Ajax.Net نامگذاری شده !
حتما سر بزنید چون خیلی مفیده و مثالهاش هم تو همین صفحه هستن ...

http://ajax.schwarz-interactive.de/c...e/default.aspx

**شايان** · April 15th, 2006, 05:33 AM

خیلی خوبه ... ادامه بدید ... اگر احتیاج به کار مدیریتی در مورد تاپیک های آژاکس داشتید ، در خدمتتون هستم .

**mehdi25** · April 15th, 2006, 05:41 AM

نوشته اصلی توسط MJ_Alex

این هم مثالهایی برای ASP.Net که تحت عنوان Ajax.Net نامگذاری شده !
حتما سر بزنید چون خیلی مفیده و مثالهاش هم تو همین صفحه هستن ...

http://ajax.schwarz-interactive.de/c...e/default.aspx

ممنون

**Mehdi** · April 15th, 2006, 10:45 AM

توي مثالي كه من توضيح دادم هم از دات مثال زدم

**MJ_Alex** · April 15th, 2006, 11:46 AM

از لطف دوستان ممنونم و اما دو تا وبلاگ بسیار مفید در رابطه با ای جکس
تو این وبلاگ (زبان انگلیسی) برنامه هایی رو که با ای جکس ساخته شدن معرفی میکنن حتما ببینید : http://ajaxblog.com
یه وبلاگ به زبان فارسی که کار احسان عمادزاه هست. البته دو تا مطلب بیشتر در مورد ای جکس نداره ولی مثال خوبی زده : http://notvoid.persianblog.com

**MJ_Alex** · April 15th, 2006, 12:14 PM

نوشته اصلی توسط شايان

خیلی خوبه ... ادامه بدید ... اگر احتیاج به کار مدیریتی در مورد تاپیک های آژاکس داشتید ، در خدمتتون هستم .

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

**MJ_Alex** · April 15th, 2006, 01:43 PM

این هم یه مثال با توضیحاتش که مفیده
منبع به همراه تست آنلاین : http://aleembawany.com/weblog/webdev..._tutorial.html

اسکریپت که بین <head> و /head> قرار میگیره :

کد:

function loadurl(dest) {
 
 try {
  
   // Moz supports XMLHttpRequest. IE uses ActiveX. 
   // browser detction is bad. object detection works for any browser
   xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
  new ActiveXObject("Microsoft.XMLHTTP");
  
 }
 catch (e) {
   // browser doesn't support ajax. handle however you want
 }
 
 // the xmlhttp object triggers an event everytime the status changes
 // triggered() function handles the events
 xmlhttp.onreadystatechange = triggered;
 
 // open takes in the HTTP method and url.
 xmlhttp.open("GET", dest);
 
 // send the request. if this is a POST request we would have
 // sent post variables: send("name=aleem&gender=male)
 // Moz is fine with just send(); but
 // IE expects a value here, hence we do send(null);
 xmlhttp.send(null);
 
}

function triggered() {
 
  // if the readyState code is 4 (Completed)
  // and http status is 200 (OK) we go ahead and get the responseText
  // other readyState codes:
  // 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
  if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
  
      // xmlhttp.responseText object contains the response.
      document.getElementById("output").innerHTML =
  xmlhttp.responseText;
   }
 
}

کد بادی صفحه :

کد:

<body>
<div id="output" onclick="loadurl('/resume/resume.txt')">click here to load my resume into this div</div>
</body>

موضوع: آموزش Ajax

ابزارهای موضوع

آموزش Ajax