ساختار Ajax - تشریح Syntax ایجکس با یک مثال
تشریح ساختار Ajax :
در این بخش قصد داریم تا با اراثه یک مثال ساده از دستورات Ajax و نمایش خروجی واقعی
آن ، شما را با ساختار کلی این تکنیک و نحوه عملکرد آن آشنا نماییم .
در مثال زیر ، یک صفحه ساده
HTML داریم که در آن یک تگ < div > و یک دکمه فرمان button قرار دارد
.
تگ < div > در ابتدا یک متن را نمایش می دهد و قصد داریم کاری کنیم تا پس از
کلیک کاربر بر روی دکمه فرمان ، متن جدید آن از سرور دریافت شده و به روز رسانی شود
.
کد موجود در صفحه HTML به صورت زیر است :
|
کد صفحه
|
< html >
< head >
< script type = " text/javascript " >
function loadXMLDoc ( )
{
.... کد ها و دستورات Ajax در اینجا قرار می گیرد ...
}
< /script >
< /head >
< body >
< div id="myDiv" >
متن این قسمت را با Ajax تغییر دهید
< /div >
< button type="button" onclick=" loadXMLDoc() " >
Change Content < /button >
< /body >
< /html >
|
در کد بالا ، هنگامی که کاربر بر روی دکمه فرمان کلیک می نماید ، تابع
( ) loadXMLDoc که کد آن در بخش < head > صفحه قرار دارد
، فراخوانی و اجرا شده و یک درخواست را به سرور ارسال می کند . سرور درخواست
را دریافت کرده و آن را پردازش می کند . سپس خروجی تولید شده را به صفحه بر می گرداند
. مرورگر این خروجی را دریافت کرده و محتویات تگ < div > را تغییر داده و به
روز رسانی می کند .
کد تابع ( ) loadXMLDoc در جدول زیر قرار داده شده است
. در قسمت بعدی ، به تشریح و آموزش نوشتن این دستورات خواهیم پرداخت .
کد تابع
loadXMLDoc ( )
|
function loadXMLDoc()
{
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","ajax_info.txt",true);
xmlhttp.send();
}
|
خروجی مثال :
در جدول زیر خروجی مثال را در عمل نمایش داده شده است . برای مشاهده عمکلرد دستورات
بر روی دکمه فرمان کلیک نمایید :
|
خروجی مثال
|
متن این قسمت را با Ajax تغییر دهید
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان بگذارید :