کلاس کامل Ajax مخصوص کاربران حرفه ای!

ziXet

مدیر انجمن PHP/MYSQL
سلام

این مقاله رو حدود 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 دارای خواص، متدها و رخدادهای بسیاری است که برخی از آنها عبارتند از:
خواص یا صفات : cookiedefaultCharsetdomainlocationprotocolURLtitle
متدها: clear() - close()write()writeln
رخدادها: onkeypressonClickonMouseOveronMouseOutondblclick
در مورادی ممکن است یک صفت خود یک شی باشد برای مثال 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/

**فایل پیوست شده حاوی کد های کلاس به صورت نرمال و فشرده شده است.**

 

پیوست ها

  • ajax-class.zip
    2.6 کیلوبایت · بازدیدها: 146
آخرین ویرایش:

ziXet

مدیر انجمن PHP/MYSQL
ظاهرا یه انجمن به نام Ajax توی قسمت server-side هست! من تاحالا فکر میکردم این تو بخش client-side هستش:دی

اونجا هم همین تاپیکو میذارم اگه مدیران صلاح دونستن اینو پاک کنن.
 

Masoud1365

مدیر انجمن
بسیار کلاس جامع و کاملی بود . با تشکر از امیر عزیز که این کلاس رو اینجا قرار دادند.
با اجازه امیر آقا :
من یکی دو سال پیش یه سایتی رو طراحی کردم که توی اون سایت از تکنولژی ajax بهره گرفتم و یه کلاسی هم برای اون نوشتم که یه متد هم برای درخواست post نوشتم گفتم بزارمش اینجا که اگر به این کلاس اضافه بشه تکمیل تر میشه !
PHP:
 function getRequestBody(oForm) {
            var aParams = new Array();

            for (var i=0 ; i < oForm.elements.length; i++) {
                var sParam = encodeURIComponent(oForm.elements[i].name);
                sParam += "=";
                sParam += encodeURIComponent(oForm.elements[i].value);
                aParams.push(sParam);
            }

            return aParams.join("&");
        }
برای استفاده از این متد برای فرمتون یک اسم میزارید و به عنوان آرگومان اسم فرم رو به این متد ارسال میکنید . این متد خودش مقادیر ارسالی رو به طور صحیح به صورت رشته درمیاره !:wink:

موفق باشید
 
آخرین ویرایش:

ziXet

مدیر انجمن PHP/MYSQL
سلام

خواهش میکنم!

پیشنهاد بسیار خوبیه! - اگه زحمت بکشی کلاس ادیت شده رو بذاری تا من برم ادیت کنمش!
الان که دیدم ظاهرا تو این کلاس encodeURIComponent هم که برای encode کردن رشته برای متد get تو IE استفاده میشه هم فراموش کردم که بذارم!

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

موفق باشید
 

Masoud1365

مدیر انجمن
سلام

خواهش میکنم!

پیشنهاد بسیار خوبیه! - اگه زحمت بکشی کلاس ادیت شده رو بذاری تا من برم ادیت کنمش!
الان که دیدم ظاهرا تو این کلاس encodeuricomponent هم که برای encode کردن رشته برای متد get تو ie استفاده میشه هم فراموش کردم که بذارم!

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

موفق باشید

چشم ! من یکمی سرم خلوت بشه حتما اینو درستش میکنم ( البته یکمی هم فراموش کارم ) . اگر هم دیر شد و شما سرت خلوت شد . شما زحمتشو بکش.

ممنون
 

eAmin

Well-Known Member
سلام.

بی خیال، شر تغییر این کلاس رو از سر همتون کم کردم:wink:
دیدم نیم ساعت بیشتر کار نداره، گفتم من اینکار رو انجام بدم. یک تغییراتی هم دادم که بهتر و بهینه تر از قبل شده.

متد rand حذف شد، و بجای اون ساعت جاری سیستم به عنوان جلوگیری از cache استفاده شد.
تابع getRequestBody کاملترش گذاشته شد و بصورت inline در متد setvals قرار داده شد.

کد:
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{ 
                    this.xmlObject=new ActiveXObject("Msxml2.XMLHTTP"); 
                } catch(e) {
                    try{ this.xmlObject=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
                }
            }
            if(!this.xmlObject){
                throw new Error(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);
            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+'?noCash='+(+new Date) + '&' + this.parameters);
            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);
        }
    };

    this.getByClass = function(cls, tag) {
        var ele = document.getElementsByTagName(tag || '*'), arr = [];
        for (var i=0; i < ele.length; i++) {
            var elems = ele[i];
            if ((new RegExp("(?:^|\\s)"+cls+"(?:\\s|$)")).test(elems.className)) arr.push(elems);
        }
        return arr;
    };
};
طرز استفاده بعد از تغییرات انجام داده شده:

with form:
کد:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax test</title>
<script type="text/javascript" src="ajax.js"></script>
<script language="javascript">

var get = function() {
    var ajax = new Ajax();
    ajax.setvals('content', 'content', "<img src='a-loading.gif' />", 'ajax.php', document.forms[0]);
    ajax.post();
}

</script>
</head>

<body>

<div id="content" style="font-family:verdana;font-size:14px;width:800px;padding:40px;">eAmin</div>

<form action="">
    <label for="foo">Foo :</label>
    <input type="text" name="foo" />
    <label for="bar">Bar :</label>
    <input type="text" name="bar" />
    <input type="button" value="send" onclick="get()" />
</form>

</body>
</html>
no form
کد:
var get = function() {
    var ajax = new Ajax();
    ajax.setvals('content', 'content', "<img src='a-loading.gif' />", 'ajax.php', null, "foo=foo&bar=bar");
    ajax.post();
}
موفق باشید.
 
آخرین ویرایش:

foranyone

Well-Known Member
این کلاسی که ارائه شد امکان history رو هم میده ؟

تو IE6 مشکلی نداره ؟
 

ziXet

مدیر انجمن PHP/MYSQL
این کلاسی که ارائه شد امکان history رو هم میده ؟

تو IE6 مشکلی نداره ؟
نه history رو ساپورت نمیکنه! چون ممکنه بعضی ها اجتیاج نداشته باشن. ولی اگر بخواید من مینویسم.
تو IE مشکلی نداره
 

foranyone

Well-Known Member
نه history رو ساپورت نمیکنه! چون ممکنه بعضی ها اجتیاج نداشته باشن. ولی اگر بخواید من مینویسم.
تو IE مشکلی نداره

کاش این کلاس در دو نسخه ارائه بشه که یکیش از history هم ساپورت کنه ولی اون یکی نه !:)

دستت درد نکنه امیررضا و امین:rose:
 
سلام ، جناب لطفاً یک نمونه بزار که ازش به صورت get & post استفاده کردی

یعنی سورس استفاده کردنش

ممنون
 

ziXet

مدیر انجمن PHP/MYSQL
سلام ، جناب لطفاً یک نمونه بزار که ازش به صورت get & post استفاده کردی

یعنی سورس استفاده کردنش

ممنون
توی پست اول دوتا example اومده! از تو sourceش میتونید ببینید.
البته تو خود مقاله هم مثال زده شده
 
خیلی کلاس جالبی بود مرسی

فقط اینکه من این خط رو از دید خودم یک مشکل میدونم

<button onclick="send_get('secA','secA','<img src=\'a-loading.gif\'>','test.php','val1');" style="width: 104">

که باید اون صفحه php رو تو این تگ معرفی کنیم
 
و اینکه با همه مرورگر ها سازگاره دیگه ؟ مشکلی نداره !؟

و 1 سوال دیگه :

من چطوری میتونم 2 تا متغیر زو با GET بگیرم

کد:
function send_get(a,b,c,d,e){
	ajax = new Ajax;
	d=d+'?val='+ajax.getElement(e).value + '&val2='+ajax.getElement(e).value;
	ajax.setvals(a,b,c,d,e,null);
	ajax.get();
}

من یک متغیر val2 هم میگیرم و تو صفحه test.php همراه با val دارم چاپش میکنم

اما فقط مشکل داره

ممنونه میشم راهنمایی کنید
 
آخرین ویرایش:

ziXet

مدیر انجمن PHP/MYSQL
خیلی کلاس جالبی بود مرسی

فقط اینکه من این خط رو از دید خودم یک مشکل میدونم

<button onclick="send_get('secA','secA','<img src=\'a-loading.gif\'>','test.php','val1');" style="width: 104">

که باید اون صفحه php رو تو این تگ معرفی کنیم
خب شما میتونی اسم فایل php یا هر چیز دیگه ای رو توی اوت تابع بنویسی ! این فقط یه مثال بود.
 

ziXet

مدیر انجمن PHP/MYSQL
و اینکه با همه مرورگر ها سازگاره دیگه ؟ مشکلی نداره !؟

و 1 سوال دیگه :

من چطوری میتونم 2 تا متغیر زو با GET بگیرم

کد:
function send_get(a,b,c,d,e){
	ajax = new Ajax;
	d=d+'?val='+ajax.getElement(e).value + '&val2='+ajax.getElement(e).value;
	ajax.setvals(a,b,c,d,e,null);
	ajax.get();
}

من یک متغیر val2 هم میگیرم و تو صفحه test.php همراه با val دارم چاپش میکنم

اما فقط مشکل داره

ممنونه میشم راهنمایی کنید
نباید مشکلی داشته باشه!
از متد post استفاده کنید
 
دوست من منظورم اینه که مثلاً تو Section A دو تا متغیر GET رو چاپ کنم

مثلاً من تو index.php دو تا input text گذاشتم و به هرکدوم یک ID دادم
کد:
<input type="text" name="a" size="4" id="val1"> 
<input type="text" name="b" size="4" id="val2">

<button onClick="send_get('secA','secA','<img src=\'a-loading.gif\'>','test.php','val1');" style="width: 104">
ولی واسه این تگ button نمیدونم چه کار کنم که مقدار val2 هم بفرسته به test.php

وقتی به همین صورت چیزی داخل input ها مینویسم فقط مقدار input اول رو میگیره و 2 بار نمایش میده

من میخوام هر چندتا input که خواستم بفرستم و تو section A نمایش بدم


کد:
function send_get(a,b,c,d,e){
	ajax = new Ajax;
	d=d+'?val1='+ajax.getElement(e).value + '&val2='+ajax.getElement(e).value;
	ajax.setvals(a,b,c,d,e,null);
	ajax.get();
}

ممنون میشم راهنمایی کنی ، تو مثال هایی که گذاشتی همچین چیزی که من میخوام نداره
 
آخرین ویرایش:

جدیدترین ارسال ها

بالا