ziXet
مدیر انجمن PHP/MYSQL
سلام
این مقاله رو حدود 1 سال پیش برای مجله برنامه نویس نوشتم و تو چند مورد نگارشی ازش ایراد گرفتن و گفتن درست کن منم حوصلشو نداشتم! چونکه از بچگی انشام خوب نبوده! - امروز به طور اتفاقی چشمم به این مقاله خورد گفتم بذارم تا سایر دوستان هم ازش استفاده کنم.
تو این مقاله یه کلاس جاواسکریپت برای برای handle کردن درخواست های ajax معرفی میشه که شما میتونید ازش تو پروژه هاتون به راحی استفاده کنید.
تو پروژه livedic هم از این کلاس استفاده شده.
ویژگی منحصر به فرد این کلاس handleکردن چندین درخواست همزمان ارسال درخواست ها با دو متد get و post ، رفع مشکل cache در مرورگر IE هست.
اما دلیلی که این مقاله رو تو این بخش آوردم اینه که به نظرم بدون داشتن دانش برنامه نویسی سمت سرور استفاده از ajax یک چیز بی معنی هست همانطور که درخواست های ajax برای اجرا حتما باید رو وب سرور باشن.
موفق باشید
--------------------------------------------------------------
خط 1 یک کپی از کلاس Apple ایجاد میکند و آن را در متغیر apple ذخیره میکند(توجه کنید که اشیا مانند هر متغیرهای دیگر میتوانند در یک متغیر ذخیره شوند)خط 2 صفت color که مربوط به شی apple است را چاپ میکند.(در اینجا red چاپ می شود.)خط 3 مقدار صفت color را به رشته yellow تغیر می دهد.خط 4 متد getInfo را که به صورت یک تابع در کلاس تعریف شده بود را فراخوانی می کند و چون این متد یک مقدار را برمیگرداند برای چاپ آن از alert استفاده کردیم.
در ادامه به دو مثال از ایجاد درخواست های ajax به روش های مختلف توجه کنید.
مثال 1:
http://www.zixet.com/ajax-article/example1/
مثال 2:
http://www.zixet.com/ajax-article/example2/
**فایل پیوست شده حاوی کد های کلاس به صورت نرمال و فشرده شده است.**
این مقاله رو حدود 1 سال پیش برای مجله برنامه نویس نوشتم و تو چند مورد نگارشی ازش ایراد گرفتن و گفتن درست کن منم حوصلشو نداشتم! چونکه از بچگی انشام خوب نبوده! - امروز به طور اتفاقی چشمم به این مقاله خورد گفتم بذارم تا سایر دوستان هم ازش استفاده کنم.
تو این مقاله یه کلاس جاواسکریپت برای برای handle کردن درخواست های ajax معرفی میشه که شما میتونید ازش تو پروژه هاتون به راحی استفاده کنید.
تو پروژه livedic هم از این کلاس استفاده شده.
ویژگی منحصر به فرد این کلاس handleکردن چندین درخواست همزمان ارسال درخواست ها با دو متد get و post ، رفع مشکل cache در مرورگر IE هست.
اما دلیلی که این مقاله رو تو این بخش آوردم اینه که به نظرم بدون داشتن دانش برنامه نویسی سمت سرور استفاده از ajax یک چیز بی معنی هست همانطور که درخواست های ajax برای اجرا حتما باید رو وب سرور باشن.
موفق باشید
--------------------------------------------------------------
امروزه در بین توسعه دهندگان وب تکنولوژی Ajax (آژاکس یا ای جکس) از اهمیت بسیاری برخوردار است به طوری که حجم بسیار زیادی از وب سایت ها به استفاده از این تکنولوژی روی می آورند و از جنبه های اعجاز انگیز این تکنولوژی به طرق گوناگون بهره می برند. از نمونه های بارز کاربرد و توسعه این تکنولوژی میتوان به نرم افزارهای Online Desktop اشاره نمود. این نرم افزارها در محیط وب و با استفاده از جاوااسکریپ و تکنولوژی Ajax و شاید یک زبان سمت گیرنده مثل PHP یا asp انقلابی در محیط وب ایجاد کرده اند. شرکت های بزرگ و پیشگام در این زمینه از جمله گوگل و یاهو با ارائه نرم افزارهای Online Desktop همچون Google Map یا سرویس جدید ایمیل یاهو توانایی خارق العاده این نرم افزارها را به نمایش گذاشته اند.
بی شک همه ی این تغیییر و تحولات و پیدایش این گونه از نرم افزارها با پیدایش تکنولوژی Ajax آغاز شد.
یکی از ساده ترین کاربردهای Ajax گرفتن اطلاعات از سرور و نمایش آنها در قسمتی از صفحه وب، بدون بارگذری مجدد صفحه است.
در نرم افزارهای Online Desktop یا نرم افزارهای نظیر ممکن است در یک زمان چندین درخواست Ajax برای گرفتن اطلاعات از سرویس دهنده ایجاد شود که اگر ساختار برنامه شما قابلیت پاسخ گویی به چندین درخواست در یک زمان را نداشته باشد، عملا کارکرد آن مختل خواهد شد.
مقالهها و دستورالعملهای بسیاری در رابطه با این تکنولوژی منتشر شده است و نحوه کار با اشیا و متدهای Ajax به صورت کامل مورد بررسی قرار گرفته شده است. ما در این مقاله سعی بر آن داریم تا یک کلاس آماده و کاربردی برای کار با Ajax معرفی کنیم تا حتی افرادی که آشنایی مقدماتی با این تکنولوژی را ندارند بتوانند از آن استفاده کنند. ویژگی منحصر به فرد این کلاس که آن را از سایر توابع نوشته شده متمایز میکند قابلیت پاسخوگویی هم زمان به چند در خواست از urlهای مختلف است.
Handling Multiple Request مبحثی است که در پیاده سازی پروژه های Online Desktop نقش بسیاری دارد اما تا کنون به آن توجه زیادی نشده است.
قبل از معرفی این کلاس باید چند نکته را راجع به نحوه نوشتن کلاس های سده در جاوااسکریپت و همچنین نحوه کار با اشیا در جاوااسکریپت را توضیح دهم.
جاوااسکریپت یک زبان مبتنی بر شی گرایی است و انعظاف بسیار خوبی در زمینه شی گرایی دارد.
هر شی در جاوااسکریپت شامل موارد زیر است:
- مجموعه ای از صفات یا خواص (properties)که حاوی داده اند.
- مجموعه ای از متدها که بروی خواص اجرا می شوند.
-مجموعه ای از رخدادها(events)
در جاوااسکریپت تعداد زیادی شی وجود دارد که دارای متد و خواص خاص خود هستند.
برای مثال برای شی(object)document دارای خواص، متدها و رخدادهای بسیاری است که برخی از آنها عبارتند از:
خواص یا صفات : cookie – defaultCharset – domain – location – protocol – URL – title
متدها: clear() - close() – write() – writeln
رخدادها: onkeypress – onClick – onMouseOver – onMouseOut – ondblclick
در مورادی ممکن است یک صفت خود یک شی باشد برای مثال document.body یک Object object است به این معنی که خود متد body از شی document همانند document یک شی است.
برای مثال برای دسترسی به یک property از شی body باید ان را به صورت document.body.property بنویسیم.
خب همانطور که گفتیم این اشیا از پیش تعریف شده بودند، حال اگر بخواهیم خود یک شی را ایجاد کنیم چه کنیم؟
هر شی توسط یک کلاس معرفی می شود.
به طور کلی در جاوااسکریپت 3 راه برای تعریف کلاس وجود دارد که ما ساده ترین و متداول ترین آنها که استفاده از function است را برای شما شرح می دهیم.
کد:
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo=function(){
return ‘color:’+this.color+’, typel:’+this.type;
}
}
در کد بالا ابتدا یک کلاس به نام Apple ایجاد کردیم که یک متغیر به نام type با عنوان آرگومان دریافت میکند.
برای اشاره به خود کلاس از this استفاده می کنیم پس type یک صفت از کلاس Apple است که با متغیر type که به عنوان آرگومان به Apple ارسال شده بود مقدار دهی می شود. همچنین صفت red هم مربوط به کلاس Apple است که به صورت پیشفرض با رشته red مقدار دهی شده است.
در این کلاس یک متد هم تعریف کردیم به نام getInfo ، همانطور که ملاحظه می کنید نحوه تعریف متد تقریبا شبیه به تعریف یک تابع درون تابع دیگری است با این تفاوت که در ابتدا this.MethodName قرار میگیرد و بعد کلمه کلیدی function استفاده می شود.
اما برای استفاده از این کلاس باید ابتدا یک کپی از آن تهیه کنیم و سپس متدها یا صفات مورد نظر خود را فراخوانی کنیم.
به کد زیر توجه کنید:
کد:
var apple = new Apple('Mac');
alert(apple.color);
apple.color = "yellow";
alert(apple.color);
alert(apple.getInfo());
خط 1 یک کپی از کلاس Apple ایجاد میکند و آن را در متغیر apple ذخیره میکند(توجه کنید که اشیا مانند هر متغیرهای دیگر میتوانند در یک متغیر ذخیره شوند)خط 2 صفت color که مربوط به شی apple است را چاپ میکند.(در اینجا red چاپ می شود.)خط 3 مقدار صفت color را به رشته yellow تغیر می دهد.خط 4 متد getInfo را که به صورت یک تابع در کلاس تعریف شده بود را فراخوانی می کند و چون این متد یک مقدار را برمیگرداند برای چاپ آن از alert استفاده کردیم.
حال که نحوه تعریف و فراخوانی یک کلاس را یاد گرفتید میتوانیم برویم سر مبحث اصلی یعنی کلاس Ajax
همانطور که قبلا ذکر کردم این کلاس توانایی پردازش چندین درخواست به طور هم زمان را دارد و شما میتوانید به راحتی آن را در نرم افزارهای تحت وب خود به کار گیرید.
کد:
[/SIZE][/FONT]function Ajax(){
this.main_target;
this.loading_target;
this.loading_content;
this.url;
this.parameters;
this.xmlObject;
this.lang=new Array();
this.lang['204']='No Content';
this.lang['205']='Reset Content';
this.lang['401']='Unauthorized';
this.lang['403']='Forbidden';
this.lang['404']='Destination address not found.';
this.lang['405']='Method Not Allowed';
this.lang['406']='Not Acceptable';
this.lang['407']='Proxy Authentication Required';
this.lang['408']='Request Time-Out';
this.lang['409']='Conflict';
this.lang['413']='Request Entity Too Large';
this.lang['414']='Request-URL Too Large';
this.lang['415']='Unsupported Media Type';
this.lang['500']='There is an error on server.';
this.lang['501']='Not Implemented';
this.lang['502']='Bad Gateway';
this.lang['503']='Out of Resources';
this.lang['504']='Gateway Time-Out';
this.lang['505']='HTTP Version not supported';
this.lang['NAN']= 'Failed to create XML object – Your browser doesn\'t support AJAX!';
this.x=function(){
this.object=false;
if(window.XMLHttpRequest){//FF, Opera, Safari, Chrome
this.xmlObject=new XMLHttpRequest();
if(this.xmlObject.overrideMimeType){
this.xmlObject.overrideMimeType("text/xml");}
}
else if(window.ActiveXObject){
try{//IE
this.xmlObject=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{//IE
this.xmlObject=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
if(!this.xmlObject){
alert(this.lang['NAN']);
return false;
}
else{
return true;
}
}
this.setvals = function(a,b,c,d,e,f){
this.main_target=a;
this.loading_target=b;
this.loading_content=c;
this.url=d;
this.parameters=!!f&&!e?(function(oForm) {
var aParams = new Array();
for (var i=0 ; i < oForm.elements.length; i++) {
var sParam = encodeURIComponent(oForm.elements[i].name);
sParam += "=";
if(oForm.elements[i].checked){
sParam += "1";
} else if (oForm.elements[i].type.toLowerCase() == "button" ||
oForm.elements[i].type.toLowerCase() == "submit") {
sParam = "";
} else {
sParam += encodeURIComponent(oForm.elements[i].value);
}
aParams.push(sParam);
}
return aParams.join("&");
})(e):f;
}
this.post = function(){
if(this.x()){
this.xmlObject.onreadystatechange=this.changestate;
this.xmlObject.open("POST",this.url+'?noCache='+ (+new Date));
this.xmlObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
this.xmlObject.send('&'+this.parameters);
}
}
this.get = function(){
if(this.x()){
this.xmlObject.onreadystatechange=this.changestate;
this.xmlObject.open("GET",this.url+'?&noCache='+ (+new Date));
this.xmlObject.send(null);
}
}
this.finish = function(){
this.getElement(this.loading_target).innerHTML='';
this.getElement(this.main_target).innerHTML=this.xmlObject.responseText;
}
this.changestate=(function(ajax){
return function(){
if(ajax.xmlObject.readyState==1){
try{
ajax.loading();
}
catch(e){}
}
if(ajax.xmlObject.readyState==4){
if(ajax.xmlObject.status==200){
ajax.finish();
} else if(ajax.xmlObject.status==0||ajax.xmlObject.status==2){
alert("Failed to connect to the server!\nPlease check your internet connection.");
ajax.getElement(ajax.loading_target).innerHTML="Connection Error!";
} else if(ajax.xmlObject.status!=200){
alert('An Error has been occured:\n'+ajax.lang[ajax.xmlObject.status]);
ajax.getElement(ajax.loading_target).innerHTML=ajax.lang[ajax.xmlObject.status];
}
}
}
})(this);
this.loading=function(){
this.getElement(this.loading_target).innerHTML=this.loading_content;
}
this.getElement=function(x){
if(document.getElementById(x)==null){
return false;
}
else{
return document.getElementById(x);
}
}
};[FONT=Tahoma][SIZE=2]
توضیح کلاس:
این کلاس 8 صفت یا property دارد که در مورد هرکدام مختصری توضیح ارائه میدهیم:
1 – xmlObject : در این صفت شی Ajax ذخیره می شود.
2 – main_target : این صفت ID مکانی از صفحه که قرار است اطلاعات جدید در آن لود شود را مشخص می کند. این مکان در صفحه وب می تواند یه div یا table یا تگ p یا هر شی دیگری که خاصیت id را میتوان به آن نسبت داد، باشد.
3 – loading_target : این صفت ID مکانی از صفحه که قرار است در آن لودینگ قرار گیرد را مشخص می کند.
4 – loading_content : این صفت میتواند یک عکس یا هر کد HTML دیگری را به صورت رشته در خود ذخیره کند و در قسمت مربوط به لودینگ در زمان لود شدن نمایش دهد.
5 – url : این صفت آدرس مکانی که Ajax به آن متصل می شود و از آن اطلاعات می گیرد را در خود ذخیره میکند.
6 – parameters : این صفت پارامترهایی که با متد POST یا GET باید به آدرس مورد نظر ارسال شود را در خود جای میدهد.
7 - rand_length این صفت در خود کلاس به صورت پیشفرض مقداردهی شده است و طول رشته تصادفی را مشخص میکند. )در رابطه با رشته تصادفی در ادامه توضیح خواهیم داد)
8 – randchars : صف این صفت نیز به صورت پیشفرض مقدار دهی شده است و کاراکترهای مجاز برای ساخت رشته تصادفی را در خود جای داده است.
9 – error : این صفت یک متغیر از نوع آرایه است که تمامی خطاهای ممکن و متن ارورها را در خود ذخیره میکند. (این کلاس توانایی کنترل تمامی Errorها را داراست!)
پس از معرفی صفات این کلاس به سراغ متدهای این کلاس میرویم.
این کلاس دارای 9 متد است و هرکدام از این متدها وظایفی برعهده دارند که به اختصار آنها را شرح خواهیم داد.
1 – متد x: وظیفه اصلی این متد ایجاد xmlhttpRequest در مرورگرهای مختلف، و ذخیره آن در صفت xmlObject است.
2 – متد setvals : این متد وظیفه مقدار دهی صفت های درون کلاس را برعهده دارد.
3 – متد post : این متد درخواست ajax را با متد POST به سرویس گیرنده ارسال میکند.
4 – متد get: : این متد درخواست ajax را با متد GET به سرویس گیرنده ارسال میکند.
5 – متد changestate: این متد توسط رویداد(event)xmlObject فراخوانی می شود و وضعیت در خواست را مدیریت میکنید.
6 – متد loading : این متد در صورت ست شدن ID و محتوایی که باید به عنوان لودینگ نمایش داده شود، قسمت لودینگ را نمایش میدهد.
7 – متد finish : این متد هم پس از انجام یافتن با موفقیت درخواست فراخوانی می شود و اطلاعات دریافتی را در مکان مورد نظر که با آی دی main_target نام گذاری شده بود، جایگزین میکند.
8 – متد rand : برخی از مرورگرها مانند IE یا مرورگرهایی که بر اساس این مرورگر کار میکنند دارای مشکل اساسی در cache کردن اطلاعات دریافتی از یک urlهستند، برای جلوگیری از این مشکل این متد در کلاس تعبیه شده است تا همواره یک url جدید که با یک آرگومان به نام r نام گذاری شده برای درخواست فرستاده شود تا کش بروی صفحه جدید لود شده تاثیر نداشته باشد.
9 – متد getElement : این متد هم شی مربوط به ID مورد نظر را برمیگرداند.
پس از آشنایی مختصر با متدها و صفات این کلاس می رویم به سراغ نحوه کار با این کلاس:
1 – ارسال درخواست با متد GET :
کد:
Var ajax = new Ajax;
ajax.setvals(‘maintarget_ID’, ‘loadingtarget_ID’ , ‘loding_content’, ‘url’, null);
ajax.get();
توضیح کد:
در خط اول یک کپی از کلاس Ajax ایجاد میکنیم و در متغیر ajax قرار میدهیم.
در خط بعدی با فراخوانی متد setvals ، صفات درون کلاس را با ارسال آرگومان به این متد مقدار دهی میکنیم.
و در خط آخر هم متد get را فراخوانی میکنیم و منتظر نتیجه میمانیم! (در این مثال هیچ پارامتری با متد GET فرستاده نمیشود و تنها درخواست نمایش صفحه داده میشود)
2 – ارسال درخواست با متد POSTهمراه با ارسال پارامتر:
کد:
Var ajax = new Ajax;
ajax.setvals(‘maintarget_ID’, ‘loadingtarget_ID’ , ‘loding_content’, ‘url’, ‘parameters’);
ajax.post();
توضیح کد:
این کد نیز همانند کد بالا با این تفاوت که آرگومان پنجم را که در کد قبل مقدار null قرار دادیم، میتوانیم در اینجا یک آرگومان به صفحه مربوطبه ارسال کنیم.
برای ارسال آرگومان باید از شکل کلی "variable1=value1&variable2=value2…." استفاده کرد. برای مثال برای ارسال دو آرگومان fruit و color که به ترتیب مقدار Apple و red را دارند باید فراخوانی متد setvals اینگونه باشد:
کد:
ajax.setvals(‘maintarget_ID’, ‘loadingtarget_ID’ , ‘loading_content’, ‘url’, ‘namefruit=Apple&color=red’);
همانطور که مشاهده نمودید نحوه استفاده از این کلاس بسیار آسان است.
در ادامه به دو مثال از ایجاد درخواست های ajax به روش های مختلف توجه کنید.
مثال 1:
http://www.zixet.com/ajax-article/example1/
مثال 2:
http://www.zixet.com/ajax-article/example2/
**فایل پیوست شده حاوی کد های کلاس به صورت نرمال و فشرده شده است.**
پیوست ها
آخرین ویرایش: