|
04-14-2006, 08:51 PM
|
#1 |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
 |
آموزش Ajax
با اجازه اساتید این تاپیک رو باز می کنم تا محل و منبعی باشه برای طرفداران این تکنولوژی. از همه هم دعوت میکنم تا هر چیزی که دارن اعم از آموزش ، منبع و... رو بذارن کنن تا همه با هم یاد بگیریم.
در مورد مکان تاپیک هم نمی دونستم تو کدوم بخش بزنم آخه ای جکس از چند تا تکنولوژی استفاده میکنه. اما شایان گفت اینجا بزنم تا بعدا جدا بشه... به بزرگی خودتون ببخشید دیگه. اول از همه یه مقدمه کوچولو عرض میکنم تا شروعی بر کارمون باشه : (این مقدمه رو از اینجا برداشتم : 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 : Code:
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;
}
اول فایل ajaxWork.php : Code:
< ?php
include("ajaxClass.php");
$objSem = new ajax;
$objSem->readURLParameters();
$objSem->staticExample();
echo $objSem->result;
? >
Code:
< ?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"];
}
}
}
? >
Code:
<?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>
حتما رو این مثال کار کنید موفق باشید ...
__________________
گر در همه شهر یک سر نیشتر است /// در پای کسی رود که درویشتر است با این همه راستی که میزان دارد /// میل از طرفی کند که زر بیشتر است |
|
|
|
04-14-2006, 09:30 PM
|
#2 |
 مدیر برنامه نویسی وب
Join Date: Aug 2004
Location: Anywhere
Posts: 6,050
|
__________________
Feeling Angry  |
|
|
|
|
04-14-2006, 10:21 PM
|
#3 |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
|
آقا مهدی ممنون
و اما یه بسته بسیار جالب به نام Sajax این بسته چند تا مثال داره که به زبانهای php , asp , coldfusion , io , lua , perl , python , ruby نوشته شده ! نمونه ها رو اینجا و اینجا ببینید.  دانلود بسته |
|
|
|
|
04-14-2006, 10:24 PM
|
#4 |
|
مدیر برنامه نویسی وب
Join Date: Aug 2004
Location: Anywhere
Posts: 6,050
|
يكي ديگه JSpan هست ولي من Sajax رو ترجيح ميدم
 |
|
|
|
|
04-14-2006, 10:40 PM
|
#5 |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
|
یه منبع بسیار مفید از شرکت موزیلا : http://developer.mozilla.org/en/docs/Category:AJAX
|
|
|
|
|
04-15-2006, 12:18 AM
|
#6 |
 Registered User
Join Date: Oct 2004
Location: طهران
Posts: 1,465
   |
خوب چیزی رو شروع کردین .
امیدوارم که به جایی برسه که یه قسمت مستقل برای AjaX هم زده بشه . راستی مهدی جان آواتر جدید مبارک
__________________
================================================== ==================== این ای دی غیر فعال می باشد ، ای دیه جدید Mehdi_25 فعال شده .
خدایا ! ...... به من زیستنی عطا کن که در لحظه مرگ بر بی ثمری لحظه هایی که برای زیستن گذشت است ، حسرت نخورم . ...... و مردنی عطا کن که بر بیهودگیش سوگوار نباشم . خدایا ! ...... تو چگونه زیستن را به من بیاموز . ...... چگونه مردن را خود خواهم آموخت . ================================================== ==================== |
|
|
|
|
04-15-2006, 12:26 AM
|
#7 |
|
Registered User
Join Date: Oct 2004
Location: طهران
Posts: 1,465
|
اگه از مثال های ASP هم استفاده بشه ممنون میشم .
|
|
|
|
|
04-15-2006, 12:39 AM
|
#8 | |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
|
Quote:
چشم بازم میزارم ... |
|
|
|
|
|
04-15-2006, 12:45 AM
|
#9 |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
|
این هم مثالهایی برای ASP.Net که تحت عنوان Ajax.Net نامگذاری شده !
حتما سر بزنید چون خیلی مفیده و مثالهاش هم تو همین صفحه هستن ... http://ajax.schwarz-interactive.de/c...e/default.aspx |
|
|
|
|
04-15-2006, 05:33 AM
|
#10 |
|
مدیر ارشد
Join Date: Sep 2003
Location: Internet
Posts: 5,373
|
خیلی خوبه ... ادامه بدید ... اگر احتیاج به کار مدیریتی در مورد تاپیک های آژاکس داشتید ، در خدمتتون هستم .
__________________
من رو دنبال کنید ... در ...   |
|
|
|
|
04-15-2006, 05:41 AM
|
#11 | |
|
Registered User
Join Date: Oct 2004
Location: طهران
Posts: 1,465
|
Quote:
 |
|
|
|
|
|
04-15-2006, 10:45 AM
|
#12 |
|
مدیر برنامه نویسی وب
Join Date: Aug 2004
Location: Anywhere
Posts: 6,050
|
توي مثالي كه من توضيح دادم هم از دات مثال زدم
|
|
|
|
|
04-15-2006, 11:46 AM
|
#13 |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
|
از لطف دوستان ممنونم و اما دو تا وبلاگ بسیار مفید در رابطه با ای جکس
تو این وبلاگ (زبان انگلیسی) برنامه هایی رو که با ای جکس ساخته شدن معرفی میکنن حتما ببینید : http://ajaxblog.com یه وبلاگ به زبان فارسی که کار احسان عمادزاه هست. البته دو تا مطلب بیشتر در مورد ای جکس نداره ولی مثال خوبی زده : http://notvoid.persianblog.com Last edited by MJ_Alex; 04-15-2006 at 11:58 AM.. |
|
|
|
|
04-15-2006, 12:14 PM
|
#14 | |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
|
Quote:
فقط اگه میشه یه سنجاق به تاپیک بزنین تا بالا باشه ممنون |
|
|
|
|
|
04-15-2006, 01:43 PM
|
#15 |
|
Registered User
Join Date: Feb 2006
Location: یه جایی همین ورا
Posts: 92
|
این هم یه مثال با توضیحاتش که مفیده
منبع به همراه تست آنلاین : http://aleembawany.com/weblog/webdev..._tutorial.html اسکریپت که بین <head> و /head> قرار میگیره : Code:
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;
}
}
Code:
<body>
<div id="output" onclick="loadurl('/resume/resume.txt')">click here to load my resume into this div</div>
</body>
|
|
|
|
 |
| امکانات بيشتر | |
| نحوه نمايش | |
|
|
Linear Mode
