رفتن به مطلب
iranwebserver
iReza

آموزش Ajax - سطح مبتدی

پست های پیشنهاد شده

سلام :54:

اینبار با آموزش Ajax اومدم و امیدوارم بتونید از این مقاله استفاده کنید.

Ajax یا آجاکس،مخفف Asynchronous JavaScript and XML هست.

آجاکس یک زبان برنامه نویسی نیست! یک تکنیک هست که به وسیله اون میشه یک صفحه رو بدون رفرش بارگذاری کرد.

29528832698155569810.gif

تصویر بالا،یک نمای کلی از عملکرد آجاکس هست،شیء ارسالی به سرور حتما باید از نوع XmlHttp باشه (برای مرورگرهای قدیمی از ActieXObject استفاده میشه)ساخت متغیر در JavaScript طبق معمول با var صورت میگیره و ما باید این متغیر رو به شیء قابل ارسال تبدیل کنیم،با کد زیر:

variable=new XMLHttpRequest();

و اما برای مرورگرهای قدیمی:

variable=new ActiveXObject("Microsoft.XMLHTTP");

برای اینکه شما وبسایتتون رو با همه مرورگرها استاندارد کنید،میتونید از دستورات زیر استفاده کنید:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

در حال حاظر شما شیء Ajax رو برای همه ی مرورگرها آماده کردید.

برای ارسال شیء باید از xmlhttp.open و xmlhttp.send استفاده کنید.

پارامتر اول open،متُد اون هست که ما اینجا از متُد GET استفاده میکنیم.

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

پارامتر سوم،بطور پیشفرض همیشه فقط true قرار بدید که مد ASync هست (فعلا در رابطه با این پارامتر صحبتی نمیکنم)

اما send,ما xmlhttp.send رو روی حالت ;() xmlhttp.send قرار میدیم چون این پارامترها فقط زمانی پر میشن که ما از متُد POST استفاده کنیم.

وقتی ما شیء رو ارسال کردیم،قطعا سرور جوابی میده! خوب،برای دریافت و تجزیه این پاسخ باید از این کُد استفاده کنید:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

کد بالا،جواب سرور رو به صورت رشته های متنی که در HTML به تگ ها و متن ها تبدیل میشن دریافت میکنه،البته میشه به جای responseText از responseXml استفاده کرد که در اون صورت داده ها به شکل ساختار XML دریافت میشن پس دستور اول پیشنهاد میشه.

MyDiv نام id تگی هست که داده ها و پاسخ سرور در اون به نمایش گذاشته میشه.تمام این ها زمانی ممکنه که وضعیت تبادل اطلاعات به پایان رسیده باشه و اطلاعات آماده دریافت باشن،پس ما این کد رو در این بیس استفاده میکنیم:

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

خوب الان شما تونستید با مرحله مقدماتی Ajax آشنا شید،کد کلی این پروژه به این صورته :

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","FILEADDRESS",true);
xmlhttp.send();

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

***** جهت استاندارد سازی رشته ها فرم های مختلف

جهت اینکه مقادیر شما درست به مقصد برسن، شما باید اون ها رو طبق یک الگو در کنار هم بچینین.

function getFormValues(formobj){
var str = "";
var valueArr = null;
var val = "";
var cmd = "";
for(var i = 0;i < formobj.elements.length;i++){
switch(formobj.elements[i].type){
case "text":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "textarea":
str += formobj.elements[i].name +
"=" + encodeURI(formobj.elements[i].value) + "&";
break;
case "select-one":
str += formobj.elements[i].name +
"=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
break;
case "checkbox":
if(formobj.elements[i].checked == true){
str += formobj.elements[i].name +
"=" + formobj.elements[i].value + "&";
}
break;
}
}
str = str.substr(0,(str.length - 1));
return str;
}

فقط کافیه شیء و محتوی ارسالی رو از این تابع عبور بدید.

در اینجا ما چهار نوع فرم رو که select,text,textarea,checkbox میتونیم به مقصد ارسال کنیم.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

×