پیاده سازی یک وب سایت پویا بوسیله ajax

[tanha2007]

تشکر سعید جان.
خوب فکر کنم که من تگ xml را جا گذاشته بودم...

الان این فایل کار میکند، و خیلی خوشحال خواهم شد ... که tutorial را پست نمایید... جهانی سپاسگزارم ...

[musiox]

عزیزان این که فقط شد آموزش . پس پیاده سازیه وب سایت چی شد ؟

[yaqubian]

فصل ششم – نگاهی بر معماری AJAX
تو این قسمت با اجازه دوستان سعی کردم یه نگاه مختصر به معماری AJAX بندازم و بوسیله این مطالب یه سری از سئوالات دوستان رو جواب بدم.
اگه از نقطه نظر معماری یه نرم افزار به AJAX توجه کنیم، موارد زیر تفاوتهای اون رو از سایر معماری های برنامه های تحت وب نشون می ده:
1- استفاده از یه موتور client side بعنوان واسط بین UI یا همون user interface و سرور.
2- فعالیت کاربر باعث فراخوانی موتور سمت مشتری شده به جای اینکه یک صفحه به سمت سرور request ارسال کند.
3- ترنسفر xml data بین سرور و موتور client side
Client engine همون کلید اصلی در طراحی مدل AJAX هستش. بدون این موتور رویداد هر کاربر باید به سمت سرور واسه پردازش فرستاده بشه.
توی شکل 3 و 4 می شه تفاوت معماری کلاسیک برنامه های تحت وب و معماری AJAX رو دید.
یه نکته باید اینجا بگم و اون اینه که واسه ساخت برنامه های AJAX ما سه رویکرد متفاوت داریم:
1- رویکرد Javascript
2- رویکرد JAVA
3- رویکرد Flash
که البته من به صورت یه جدول نقاط ضعف و قوت هر کدوم رو نشون می دم.
خب دوستان تا اینجا فکر کنم همه فهمیدیم AJAX چیه و می خوایم از اون چه استفاده ای بکنیم.
تو فصل بعدی می خوایم یه کار عملی شروع کنیم. البته من سعی می کنم یه سری نکات مربوط به طراحی وب رو هم داخلش درس بدم. از همه دوستان تقاضا دارم که همکاری کنن- ممنون - پس لطفا نرم افزارهای زیر رو همه نصب کنن(که البته فکر کنم اکثرا اینا رو نصب دارن روی سیستم هاشون):
Dreamweaver cs3
Frontpage 2003
Swish max 2005 یا 2007
Photoshop cs
واسه راحتی کار هم از هر نوع نرم افزاری که آپاچی و mysql رو واستون نصب می کنه می تونین استفاده کنین. من خودم easyphp نسخه 2 رو پیشنهاد می کنم.
یه سری نرم افزارهای کوچولو هم نیازه که تو ادامه بحث به اونها می پردازیم.

[yaqubian]

دوست عزیز musiox
به روی چشم - شرمنده این مدت سرم خیلی شلوغ بوده - می دونی که بعد از اعلام نمره ها این دانشجوها پدر آدم رو در میارن!
از فصل بعد شروع می کنم به طراحی. اگه پیشنهادی در مورد موضوع طراحی هم دارید بگید. مثلا چه نوع وب سایتی مد نظرتونه؟ مرسی
موفق باشید

[yaqubian]

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

[tanha2007]

من که زیاد مشتاقم ....

[yaqubian]

سلام دوستان
خدمتتون عرض کنم اول از همه برنامه جستجو بوسیله ajax رو می ذارم واستون که خیلی از دوستان سئوال کردن. مطالب طراحی سایت رو هم دارم تایپ می کنم انشاءاله در اولین فرصت می ذارم رو وب.
راستی اسم بانکتون رو بذارید mathstat.
موفق باشید

[tanha2007]

سلام سعید جان.
دستت درد نکنه واقعا جالب و مفیده ...

[alimooghashang]

اگه اینکارا بکنی واقعا باحالی

ایول و مرسی

[mostafa_shaeri_tj]

چكار كنم كه شي xmlhttprequest جوابه request ها رو تو خودش cache نكنه ؟
اگه ميشه مثال بزنين براي جواب ...
خيلي ممنون

[alimooghashang]

اقایون دمتون گرم

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

مرسی

https://barnamenevis.org/showthread.php?t=113885

[محمدامین شریفی]

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

استاد منم دارم با asp.net همچنین کاری می خواهم برای پروژه ام با asp کنم و پایگاه داده ثبت نامش هم آمده است میایید مثل سازمان سنجش هنگامی که شما در asp ثبت نام کرده ایم در php هم یک رد و بدل صورت گیرد.
برای اینکار هم سرور php برای شما مهیا است و هم به طور جداگانه asp اگه حاضرید.بگید

[yaqubian]

بله حتما
خوشحال می شم.
چند فصل همزمان داره تایپ می شه
آماده بشه می ذارم واسه دوستان.
موفق باشید

[valida]

آقا ممنون

[szabeh]

با تشکر از دوستانی که زحمت میکشند. منتظر ادامش هستیم

[jaza_sa]

استاد !!! پس کی این دانشجویا دست از سر شما برمیدارن
منتظر ادامه تدریس شما هستیم ...

[yaqubian]

دوست عزیز jaza_sa
من پیام خصوصیتون رو جواب دادم ولی ارسال نشد. چون شما تنظیمات دریافت رو غیرفعال کردید.
email تون رو بدید در خدمتم.
موفق باشید

[artonline]

سلام دوستان
می خواستم اگه موافقید واسه علاقمندان ajax شروع کنیم به آموزش طراحی یه وب سایت پویا از ابتدا تا سطح حرفه ای بوسیله ajax البته اگه عمری باقی بود. دوستان لطفا نظراتشون رو بدن.
ممنون - موفق باشید.

با با ای ول ...
نیکی و پرسش ؟!

[Hamid68]

کاملا موافقم

[bikar_kgk]

آقا اگه زودتر شروع کنید ممنون میشم

[asal sadat]

دست شما درد نکنه من خیلی بهش نیاز دارم

[aryaei2000]

با سلام من هستم اینم یه پورتال آجاکس
این پورتال PHP/MYSQL/AJAX هست کار جالبیه و لی زبونش انگلیسیه

[امید امرایی]

با سلام
خیلی از دوستانی که در حال اجرای سیستم ها مبتنی بر Ajax هستن با این موضوع مشکل دارن که بارگذاری اسکریپت های زیاد باعث سربار زیاد می شه .
با این تابع می تونید اسکریپت های خودتون رو به صورت پویا به برنامه (سایت) لود کنید .

function loadScript(src){

    if (src != '' && src != null) {

        var S = new String(src);

        var Scrpt = S.split(';');

        for (j = 0; j < Scrpt.length; j++) {

            var JS = document.createElement('script');

            JS.type = 'text/javascript';

            JS.src = Scrpt[j];

            document.getElementsByTagName('head')[0].appendChild(JS);

        }

    }

}

در صورتی که بخواید چند اسکریپت رو هم زمان لود کنید می تونید اونها رو با یک ; از هم چدا کنید

loadScript('somesource.js');



or



loadScript('script1.js;script2.js;script3.js');

همچنین می تونید با استفاده از کلاس XHRConn که خدمتتون قبلا معرفی کردم بعد از بار شدن کامل یک صفحه که با استفاده از Ajax لود شده اسکریپت ها شو به صورت داینامیک لود کنید .

مثال :

var MyAjaxConn = new XHRConn();



MyAjaxConn.send('page.php' , '',

    function(Response,CallerObject){

       alert(Response + ' loaded and now will started to load scripts');

       loadScript('this_page_script.js;another_for_this.j  s');

    }

);

[solmaztaremy]

سلام
من خیلی مبتدی هستم یعنی تازه شروع به کار سایت کردم اگه سوال خنده دار پرسیدم !
می شه لطفا بگین امکان submit یا فرستادن اطلاعات به سرور فقط از طریق xml آیا میشود یک صفحه html داشت و امکان submit .
لطفا اگه می شه کمکم کنید چون xmlبلد نیستم و اینکه چه نرم افزارهایی باید واسه سایتم نصب کنم تا بتونم امکان فرستادن email را به آدرس یکی از کاربرا داشته باشم

[monaizadi]

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

function getHttp()
{
var xmlhttp;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
if( typeof XMLHttpRequest != "undefined" )
{
xmlhttp = new XMLHttpRequest();
}
}
}
return xmlhttp
{

نمی دونم مشکلش از چیه. توی IE درست جواب می ده.

[a_bita]

سلام
منم هستم .اما یه چیزی من با پی اچ پی به اندازه 30 درصد اشنا هستم .برای یادگیری اجاکس کافیه؟
در ضمن ممنون میشم اگه کسی پیدا شه اشکال منو توی این تاپیک حل کنه
https://barnamenevis.org/showthread.php?t=124689
و از دوستان خواهش میکنم که کدارو توی تگ پی اچ پی بذارین که به هم نریزه

[aligilani1986]

سلام دوستان
می خواستم اگه موافقید واسه علاقمندان ajax شروع کنیم به آموزش طراحی یه وب سایت پویا از ابتدا تا سطح حرفه ای بوسیله ajax البته اگه عمری باقی بود. دوستان لطفا نظراتشون رو بدن.
ممنون - موفق باشید.

سلام. پيشنهاد خوبيه.

البته من پروژه پايان دوره ليسانس خودم كه سيستم انتخاب واحد اينترنتي بود رو با Ajax پياده سازي كردم.
اميدوارم بتونم مفيد باشم.

[narsic]

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

[as13851365]

من یک مشکل دارم و اون هم استفاده از متد POST است !

از اونجایی که ( من جستجو کردم ) بیشتر مثال ها با متد GET بود من نتونستم از متد POST استفاده کنم !

من یک فرم دارم با 5 تا INPUT حالا می خوام محتوای این فرم رو با آژاکس پست کنم و نتیجه رو در بانک ذخیره کنم از ولی هر کاری کردم نشد یعنی هیچی ارسال نمی شه !

اگه یکی از دوستان یک نمونه کوچیک از ارسال یک فرم رو با متد POST در این قسمت قرار بده ممنون می شم

این هم یک نمونه کد که من نوشتم :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<script language="javascript" type="text/javascript">
function xxaajjaaxx()
  {
	var xajax;  // The variable that makes Ajax possible!
	try{
		xajax = new XMLHttpRequest();
	} catch (e){
		try{
			xajax = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				xajax = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				alert("Your browser broke!");
				return false;
			}
		}
	}
    xajax.onreadystatechange = function()
	  {
	    if(xajax.readyState==4)
		   document.getElementById('s1').innerHTML=xajax.responseText;
	  }
	xajax.open("POST","a.php");
	xajax.send(null);
  }
</script>

<form name="form1">
<input type="text" name="bname" id="bname" /><br />
<input type="text" name="bfamily" id="bfamily" /><br />
<input type="button" value="send" onclick="xxaajjaaxx()"/>
</form>

<div style="border:dotted 1px #33FF00;width:400px;" id="s1"></div>

</body>
</html>

این هم محتوای فایل صفحه دوم :

<?php 

$bname=$_POST['bname']; 

$bfamily=$_POST['bfamily']; 

echo "=> $bname $bfamily <="; 

?>

اگه جایی از کد رو اشتباه نوشتم و یا ... ممنون می شم به من بگید !

[aligilani1986]

سلام.
اول اينكه onreadystatechange بايد بعد از متد open و قبل از متد send ايجاد بشه.

من 1 فايل zip برات فرستادم كه توش 3 فايل a.php (فايل سرور) , ba.php (فايل فرم) , xmlhttp.js براي آژاكس.
هم براي post و هم براي get كار ميكنه.
نگاهي بهش بيانداز. اگه سوالي داشتي تو همين تاپيك بپرس

[as13851365]

از اونجایی که من تازه اول راه استفاده از آژاکس هستم ممنون از این که کمکم کردی

اول اينكه متد onreadystatechange بايد بعد از متد open و قبل از متد send ايجاد بشه.

دوست عزیز aligilani1986 جان من با مثالهای آقا سعید عزیز دارم پیش می رم اگه به مثالهای practice1 و یا practice2 و یا practice3 نگاهی بندازید می بینید که من کدها رو از روی اونها کپی کردم . حالا آیا روش کار حتما به این صورت است که شما می گید ؟ (متد onreadystatechange بايد بعد از متد open و قبل از متد send ايجاد بشه. )

حالا یه سوال : من در یک صفحه از سایت یک قسمت برای ثبت پیغام برای مدیر دارم حالا می خوام وقتی که مدیر در کنترل پنل سایت هست وقتی که کاربری برای مدیر سایت پیغامی ارسال کرد همون لحظه متوجه بشه مثلا یک پیغامی در بالای صفحه ظاهر بشه ( پیغام جدید برای مدیر ) نه این که بعد از ریفلش صفحه متوجه پیغام بشه !!

اگر می شه برای این هم یک توضیحی و یا اگه امکانش هست یک مثالی بزنید ممنون می شم.

[as13851365]

خوب یه مشکل :

کدهای که دوست عزیز aligilani1986 خان قرار دادن تمام المنتهای موجود در فرم رو ارسال می کنه

به عنوان مثال اگر در یک فرم از Checkbox و RadioButton استفاده کنید و از توابعی که دوست گرامی گفته استفاده کنید خواهید دید که تمام المنتها ارسال می شه چه checkbox هایی که انتخاب شده اند و چه اونهایی که انتخاب نشده اند! که نباید چنین باشه ! ( radioButton ها هم همین طوری هستند )

به عنوان نمونه به کد زیر نگاه کنید :
محتوای فایل ba.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<script language="javascript" type="text/javascript" src="xmlhttp.js"></script> 
<form name="form1" id="form1"  onsubmit="submitform (document.getElementById('form1'), 'a.php', 's1','post'); return false;">
name <input type="text" name="bname" id="bname" /><br />
family <input type="text" name="bfamily" id="bfamily" /><hr />
c1 <input type="checkbox" name="c1" value="1"/><br />
c2 <input type="checkbox" name="c2" value="2"/><hr />
c3 
<input type="checkbox" name="c3[]" value="1"/>
<input type="checkbox" name="c3[]" value="2"/>
<input type="checkbox" name="c3[]" value="3"/>
<input type="checkbox" name="c3[]" value="4"/><hr />

r1 <input type="radio" name="r1" value="r1"/>
<input type="radio" name="r1" value="r2"/>
<input type="radio" name="r1" value="r3"/><hr />

  <select name="select">
  <option value="select1">select1</option>
  <option value="select2">select2</option>
  <option value="select3">select3</option>
  <option value="select5">select4</option>
  </select><hr />
<p>
  <input type="submit" value="send_ajax" />
</p>
</form>

<div style="border:dotted 1px #33FF00;width:400px;" id="s1"></div>

</body>
</html>

محتوای فایل a.php

<?php

//print_r($_POST);

$bname=$_POST['bname'];

$bfamily=$_POST['bfamily'];

$c1=$_POST['c1'];

$c2=$_POST['c2'];

$c3=$_POST['c3'];

$r1=$_POST['r1'];

$se=$_POST['select'];

echo "

   name = $bname<br>

   family = $bfamily<hr>

   c1 = $c1<br>

   c2 = $c2<hr>

   ";

for($i=0;$i<count($c3);$i++)

   echo "c3[$i] = $c3[$i]<br>";



echo "<hr />r1 = $r1 <hr /> select = $se";

?>

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

function getformvalues (fobj){
	var str = "";
	aok = true;
	var val;
	for(var i = 0; i < fobj.elements.length-1; i++){
		str += fobj.elements[i].name + "=" + encodeURI(fobj.elements[i].value) + "&";
	}
	return str;
}

حالا راه حلی که من براش پیدا کردم : در ضمن اگر یکی از دوستان کد بهتری یا راه حل بهتری سراغ داره حتما در این قسمت قرار بده تا من یکی ممنونش بشم

function getformvalues (fobj){
	var str = "";
	aok = true;
	for(var i = 0; i < fobj.elements.length-1; i++)
	{
		if((fobj.elements[i].type=="checkbox")&&(fobj.elements[i].checked==""))continue;
		if((fobj.elements[i].type=="radio")&&(fobj.elements[i].checked==""))continue;
		str += fobj.elements[i].name + "=" + encodeURI(fobj.elements[i].value) + "&";
	}
	return str;
}

این هم کد های آماده ی هر سه فایل برای دانلود دیگر دوستان ( ارسال فرم به کمک آژاکس با متدهای POST و GET )

1.rar

[irancms]

سلام به همگی و ممنون از سعید عزیز
آقا آموزش ها تمم شد؟
من یک سوال دارم.
در یک صفحه من 10 رکورد آحر رو فراخوانی کردم.
حالا قصد دارم که زمانی که روی هر لینک کلیک میشه ، صفحه تیره بشه ، علامت لودین نشون داده بشه و بعد با متد get و یا post اطلاعات از صفحه دوم خونده بشه و نمایش داده بشه و بعد سفحه به حالت عادی برگرده.

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

باتشکر

[asafarda]

چرا هیچکس جواب سوال منو نداد؟

[aligilani1986]

خوب یه مشکل :

کدهای که دوست عزیز aligilani1986 خان قرار دادن تمام المنتهای موجود در فرم رو ارسال می کنه

به عنوان مثال اگر در یک فرم از Checkbox و RadioButton استفاده کنید و از توابعی که دوست گرامی گفته استفاده کنید خواهید دید که تمام المنتها ارسال می شه چه checkbox هایی که انتخاب شده اند و چه اونهایی که انتخاب نشده اند! که نباید چنین باشه ! ( radioButton ها هم همین طوری هستند )

دوست عزيز as13851365 كدي كه من فرستادم، كلي بوده و براي زمانيكه نياز به ارسال فرمهاي متعدد با فيلدهاي متفاوت داريد، مناسب است.
البته كد شما هم درست است. و ممنون كه توضيح داديد.

در پست قبلي اشتباهي كردم. من متد setrequestheader را با پراپرتي onreadystatechange اشتباه گرفتم.
دوستان لطفا ببخشيد.
as13851365 عزيز در حال نوشتن كد مربوط به پيام كلاينت به ادمين هستم. در اسرع وقت پست ميكنم.

[as13851365]

سلام به همگی و ممنون از سعید عزیز
آقا آموزش ها تمم شد؟
من یک سوال دارم.
در یک صفحه من 10 رکورد آحر رو فراخوانی کردم.
حالا قصد دارم که زمانی که روی هر لینک کلیک میشه ، صفحه تیره بشه ، علامت لودین نشون داده بشه و بعد با متد get و یا post اطلاعات از صفحه دوم خونده بشه و نمایش داده بشه و بعد سفحه به حالت عادی برگرده.

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

باتشکر

درباره اون قسمتی که گفتید می خواهید صفحه تاریک و روشن بشه یکی از دوستان قبلا یک کدی برای این کار گذاشته بود اگر جستجو کنید اول اون رو پیدا می کنید و بعد از این که از اون کد استفاده کردید می تونید از کدهای ارسال برای درخواست دومت استفاده کنی

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

[narsic]

چرا هیچکس جواب سوال منو نداد؟

دوست عزیز من سوآل شما رو ندیدم ؟

[aligilani1986]

حالا یه سوال : من در یک صفحه از سایت یک قسمت برای ثبت پیغام برای مدیر دارم حالا می خوام وقتی که مدیر در کنترل پنل سایت هست وقتی که کاربری برای مدیر سایت پیغامی ارسال کرد همون لحظه متوجه بشه مثلا یک پیغامی در بالای صفحه ظاهر بشه ( پیغام جدید برای مدیر ) نه این که بعد از ریفلش صفحه متوجه پیغام بشه !!

اگر می شه برای این هم یک توضیحی و یا اگه امکانش هست یک مثالی بزنید ممنون می شم.

سلام . من اين كد رو برات حاضر كردم.

قبل از همه بايد پايگاه داده رو ايجاد كني. اطلاعات جدول و پايگاه در فايل db.sql است. فايل contacts.php براي كلاينت و بصورت كد نويسي php بدون آژاكس و فايل admin.php براي ادمين .

نكته ي اصلي در اين كد تابع settimeout است settimeout نام يك تابع كه بعنوان آرگومان ميپذيرد را در فواصل زماني ميلي ثانيه كه اينرا نيز بعنوان آرگومان ميپذيرد به اجرا در مي آورد.

اميدوارم كمكت كرده باشم.

[zoghal]

یک سوال برام بوجود اومده ؟! با وجود فرم ورک های استاندارد جاوااسکریپت مثل mootools,porototypejs و از جمله jquery که با یک دستور اعمل ارسال و دریافت مثل ایجکس رو برای شما فراهم میسازند؟

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

[aligilani1986]

یک سوال برام بوجود اومده ؟! با وجود فرم ورک های استاندارد جاوااسکریپت مثل mootools,porototypejs و از جمله jquery که با یک دستور اعمل ارسال و دریافت مثل ایجکس رو برای شما فراهم میسازند؟

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

شايد دليلش اينه ، كه چون ميترسيم از اين فريم ورك ها استفاده كنيم. ترسمان هم بدليل نا آشنايي با اين فريم ورك هاست.

آدمي از چيزي كه نميشناسه ، ميترسه.