آموزش غیر از ویبولتینآموزش های عمومیانجمنبخش عمومی و مفید سایتعمومی

Ajax

Ajax
Ajax
Ajax
مورد این که Ajax چیه و به چه درد میخوره می دونم مطلب زیاد خوندین ولی همین قدر بدونید که این سایت (نه انجمنش) کلا Ajax هست.

برای این که بتونید از Ajax استفاده کنید باید با JavaScript و یه زبان برنامه نویسی سمت سرور مثل PHP, ASP.NET, … آشنا باشید. مثالی که امروز با اون کار می کنیم با PHP هست.

برای کار امروز ما کلا سه تا فایل داریم (جدا گذاشتم که ساده تر بشه):

1- index.html: صفحه ای هست که یه فرم ساده توی اونه و اون فرم را با Ajax ارسال میکنیم و نتیجه رو هم به همین صورت در صفحه نشون میدیم.

2- test.php: این فایل فایلی هست که عملیاتی که قرار است روی سرور انجام شود توی این مینویسیم دقیقا مثل همون فایلی هست که توی برنامه نویسی کلاسیک توی Action فرم می نوشتیم.

3- Ajax.js: یه فایل هست که کلیه دستورات جاوا اسکریپتمون رو توی اون مینویسیم و اون رو توی index.html الحاق کردیم.

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

خوب حالا بریم سراغ محتویات فایل ها:
1- index.html:

کد: انتخاب همه

<a title="موارد مشابه Ajax" target="_blank" class="m_internal" href="https://vmizban.ir/6968/ajax.html">Ajax</a> Example 1

2- test.php:

کد: انتخاب همه <?

print(‘Salam ‘ . $_POST[‘TextBox1’]);

?>

3- Ajax.js: چون قسمت عمده آموزش به این مربوط میشه محتویات این فایل رو کم کم با توضیح که جلو بریم نشون میدم.

خوب اول یه تابع نوشتیم که یه دونه شیء XmlHttpRequest برای ما بر میگردونه ؟ چون توی مرورگرهای مختلف فرق میکنه پس باید چک کنیم که ببینیم از کدوم میتونیم استفاده کنیم.

کد: انتخاب همه function GetXmlHttpRequest()
{
var XmlHttpReq;

var msxmlhttp = new Array(
‘Msxml2.XMLHTTP.5.0’,
‘Msxml2.XMLHTTP.4.0’,
‘Msxml2.XMLHTTP.3.0’,
‘Msxml2.XMLHTTP’,
‘Microsoft.XMLHTTP’);
for (var i = 0; i != msxmlhttp.length; i )
{
try {
XmlHttpReq = new ActiveXObject(msxmlhttp[i]); //For IE
} catch (e) {
XmlHttpReq = null;
}
}

if(!XmlHttpReq )
XmlHttpReq = new XMLHttpRequest();//For NS

return XmlHttpReq;

}

تابع بعدی مهمترین بخش هست که اونو توضیح کامل میدم:

کد: انتخاب همه function PostData(Data, Url)
{

var XmlHttpReq = GetXmlHttpRequest();

if(!XmlHttpReq)
{
alert(‘Your Browser not support Ajax!’);
return false;
}

XmlHttpReq.open(“POST”, Url, true);

XmlHttpReq.onreadystatechange = function()
{
if(XmlHttpReq.readyState == 4 && XmlHttpReq.status == 200)
PrintResult(XmlHttpReq.responseText);
};

XmlHttpReq.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

XmlHttpReq.send(Data);

return true;

}

در خط اول این تابع یه متغیر به نام XmlHttpReq تعریف میکنیم و تابع GetXmlHttpRequest که اول نشون دادیم رو فراخونی می کنیم که یه XmlHttpRequest Object داشته باشیم.

کد: انتخاب همه var XmlHttpReq = GetXmlHttpRequest();

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

کد: انتخاب همه if(!XmlHttpReq)
{
alert(‘Your Browser not support Ajax!’);
return false;
}

توی خط بعد مشخص میکنیم که Method ارسال و صفحه ای که باید داده ها به اون ارسال بشه چیه؟

کد: انتخاب همه XmlHttpReq.open(“POST”, Url, true);
که Method ما در اینجا POST است و صفحه رو از ورودی تابع جاری که توی متغیر Url اسم اون هست میگیریم.

در خط بعد میگیم که وقتی در خواست ما وضعیتش تغییر کرد چه کاری انجام دهد (چون جاوا اسکریپت یک زبون رخداد گرا هست میتونیم بهش بگیم وقتی فلان اتفاق افتاد فلان کار رو انجام بده)

کد: انتخاب همه XmlHttpReq.onreadystatechange = function()
{
if(XmlHttpReq.readyState == 4 && XmlHttpReq.status == 200)
PrintResult(XmlHttpReq.responseText);
};

خوب توضیح خطوط بالا:

کد: انتخاب همه if(XmlHttpReq.readyState == 4 && XmlHttpReq.status == 200)
PrintResult(XmlHttpReq.responseText);

تا حالا شده که مثلا یه صفحه وب رو مرورگرتون باز نکنه خطای 404 و یا خطاهای 500 و 301 و … از این قبیل وقتی همه چیز مرتب باشه کد وضعیت 200 میشه ما توی این خطوط چک میکنیم و میگیم که هر وقت همه چیز مرتب بود و در خواست ما جواب درستی داشت نتایج رو توی صفحه نشون بده(با فراخونی تابع PrintResult).

حتی میتونیم شرایطی بگذاریم و دیگر خطاها رو هم بررسی کنیم و بگیم که چکار کنه.

حال که بهش گفتیم وقتی تنیجه خوب بود چکار کنه باید داده ها رو ارسال کنیم.
چون متد ما در اینجا POST هست بایستی هدر مربوط به اون رو هم برای درخواستمون ست کنیم:

کد: انتخاب همه XmlHttpReq.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
اگه متد ما GET بود خط بالا را نمی خواهیم.

حال ارسال میکنیم:

کد: انتخاب همه XmlHttpReq.send(Data);
*در مورد متغیر Data توضیح میدم.

تابع بعد تابعی هست که بوسیله اون محتوای فرم رو میخونیم و بوسیله تابعی که بالا گفتم داده ها رو ارسال میکنیم:

کد: انتخاب همه function AjaxSubmitForm(FrmObject)
{
var Data;

Data = “&TextBox1=” FrmObject.TextBox1.value;

PostData(Data, ‘test.php’);

return false;
}

در خط دوم این تابع متغیر Data که بالا گفتیم رو مقدار دهی میکنیم همین طور که می بینید یه رشته است و چیز عجیب و غریبی نیست فقط الگوی کار به این شکله که اول یه کاراکتر & بعد نام عنصر و بعد مقدار عنصر که اینجا ما فقط یه دونه TextBox داریم.

در خط بعد تابع PostData را به همراه داده و صفحه مقصد (همونی که قبلا توی Action فرممون می نوشتیم).

توی خط بعد هم مقدار false بر میگردونیم. چون این تابع رو در رخداد onsubmit فرم فراخونی میکنیم نمی خواهیم فرم توسط مرورگر submit بشه.

تابع آخر هم تابعی هست که مقادیر نتیجه رو چاپ میکنه:

کد: انتخاب همه function PrintResult(TheData)
{
window.document.getElementById(‘Result’).innerHTML = TheData;
}
این که نیاز با توضیح نداره.
کد کامل صفحه Ajax.js رو اون زیر گذاشتم…

کد: انتخاب همه /* —————————————————————————- */

function GetXmlHttpRequest()
{
var XmlHttpReq;

var msxmlhttp = new Array(
‘Msxml2.XMLHTTP.5.0’,
‘Msxml2.XMLHTTP.4.0’,
‘Msxml2.XMLHTTP.3.0’,
‘Msxml2.XMLHTTP’,
‘Microsoft.XMLHTTP’);
for (var i = 0; i != msxmlhttp.length; i )
{
try {
XmlHttpReq = new ActiveXObject(msxmlhttp[i]); //For IE
} catch (e) {
XmlHttpReq = null;
}
}

if(!XmlHttpReq )
XmlHttpReq = new XMLHttpRequest();//For NS

return XmlHttpReq;

}

/* —————————————————————————- */

function AjaxSubmitForm(FrmObject)
{
var Data;

Data = “&TextBox1=” FrmObject.TextBox1.value;

PostData(Data, ‘test.php’);

return false;
}

/* —————————————————————————- */

function PostData(Data, Url)
{

var XmlHttpReq = GetXmlHttpRequest();

if(!XmlHttpReq)
{
alert(‘Your Browser not support Ajax!’);
return false;
}

XmlHttpReq.open(“POST”, Url, true);

XmlHttpReq.onreadystatechange = function()
{
if(XmlHttpReq.readyState == 4 && XmlHttpReq.status == 200)
PrintResult(XmlHttpReq.responseText);
};

XmlHttpReq.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

XmlHttpReq.send(Data);

return true;

}

/* —————————————————————————- */

function PrintResult(TheData)
{
window.document.getElementById(‘Result’).innerHTML = TheData;
}

/* —————————————————————————- */


(1) Ajax Amsterdam - Kader Spielplan und
Ajax Amsterdam - Kader Spielplan und weitere Infos zur Mannschaft


(2) Bitter blow as Ajaxs wonder year ends
Bitter blow as Ajaxs wonder year ends in defeat - football


(3) Ausverkauf bei Ajax Amsterdam Acht
Ausverkauf bei Ajax Amsterdam Acht Abgänge drohen


(4) De Ligt Barcelona and Ajax nearing
De Ligt Barcelona and Ajax nearing final agreement - reports - AS.com


(5) Ajax junge Wilde fordern alte Dame
Ajax junge Wilde fordern alte Dame Juve Sport DW 09.04.2019


(6) Ryan Gravenberch Der neue Stern am
Ryan Gravenberch Der neue Stern am Ajax-Himmel


(7) Ajax Amsterdam - Vereinsprofil Transfermarkt
Alles zum Verein Ajax Amsterdam Eredivisie aktueller Kader mit Marktwerten Transfers Gerüchte Spieler-Statistiken Spielplan News


(8) AFC Ajax - nieuws - Ajax tv - merchandise - tickets
Lees het laatste nieuws over Ajax bekijk Exclusive videos op Ajax TV bestel merchandise of tickets voor wedstrijden van Ajax of download de app


(9) Ajax Programmierung Wikipedia
Ajax [ˈeidʒæks] auch AJAX Akronym von englisch Asynchronous JavaScript and XML bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Browser und dem Server. Dieses ermöglicht es HTTP-Anfragen durchzuführen während eine HTML-Seite angezeigt wird und die Seite zu verändern ohne sie komplett neu zu laden.


(10) Ajax have plugged De Ligt and De Jong
How Ajax have plugged De Ligt and De Jong holes to prove doubters

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

18 + شش =

دکمه بازگشت به بالا