در این قسمت از آموزش Ajax به توضیح دریافت پاسخ XMLHttpRequest از سرور در مقالات طراحی سایت می پردازیم . پس از اینکه یک شی XMLHttpRequest را ساخته و به وسیله آن درخواست خود را به سرور ارسال نمودید ، سرور دستورات برنامه Ajax تعیین شده را پردازش کرده و یک خروجی را به عنوان پاسخ درخواست ، به کاربر ارسال می کند .
مرورگر در کامپیوتر کاربر این پاسخ را دریافت کرده و تغییرات لازم را در صفحه و بخش مربوطه انجام خواهد داد .
به وسیله قابلیت Respone در ایجکس ، می توانید کدی طراحی نمایید تا مرورگر پاسخ سرور را دریافت کند . برای این منظور از 2 خاصیت شی XMLHttpRequest به شرح زیر استفاده می شود :
√ خاصیت responseText : از این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک متن خالی از نوع داده ای string است .
برای مثال فرض کنید که محتوای یک عنصر پاراگراف باید با متن جدید جایگزین شود . در این حالت چون جواب سرور از نوع متن است ، از خاصیت responseText استفاده می شود .
√ خاصیت responseXML : این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک فایل XML بوده و یا قالب بندی داده ای شده باشد .
در ادامه به تشریح کاربرد این خاصیت ها و مثال استفاده از آنها پرداخته ایم . از خاصیت responseText شی XMLHttpRequest ، برای دریافت پاسخ استفاده می شود . سپس شما می توانید این خاصیت را به صورت مستقیم در کد خود به کار ببرید .
مثال : در مثال زیر ابتدا یک شی XMLHttpRequest به نام xmlhttp ساخته شده است . سپس درخواستی به سرور برای باز کردن فایل ajax_ex1.txt و استخراج متن درون آن فرستاده شده است . سپس جواب خروجی از سرور به وسیله خاصیت responseText دریافت شده و با متن موجود در تگ < div id ="ex_1" > جایگزین شده است .
< html >
< head >
< script type="text/javascript">
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(" ex_1 ").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax_ex1.txt", true);
xmlhttp.send();
}
</script>
< /head >
< body >
< div id = " ex_1 " > برای تغییر متن به وسیله ajax بر روی دکمه زیر کلیک نمایید < /div >
< button type="button" onclick="loadXMLDoc( )"> تغییر متن < /button >
< /body >
< /html >
پس از ایکنه با دریافت یک پاسخ ساده متنی از سرور آشنا شدید ، حال بایستی یک پاسخ قالب بندی شده به زبان XML را از سرور دریافت کنیم . برای این منظور از خاصیت responsXML شی XMLHttpRequest ، استفاده می کنیم .
در این پروسه ، ابتدا فایل XML خروجی از سرور دریافت شده و خاصیت responseXML آن را پردازش می کند . سپس اطلاعات آن را در اختیار مرورگر قرار می دهد تا در بخش هایی از صفحه که باید تغییر کنند ، استفاده شود .
برای درک بهتر این مسئله یک مثال ساده را برای شما تشریح می کنیم . در این مثال یک فایل XML به نام Book_List.xml داریم که درون آن لیست یک سری کتاب با نام نویسنده و سال انتشار قرار دارد . با اجرای دستور زیر این فایل از سرور توسط شی responseXML دریافت شده و عنوان کتاب ها از بین اطلاعات دریافتی استخراج می شود . سپس تگ < " div id = " ex-2" > ، این عنوان ها را در خروجی نمایش می دهد . برای مشاهده عملیات و خروجی مثال بر رور دکمه فرمان دریافت عنوان ها ، کلیک نمایید .
< html >
< head >
< script type="text/javascript">
function Book()
{
var xmlhttp;
var txt,x,i;
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 )
{
xmlDoc = xmlhttp.responseXM L;
txt = " ";
x = xmlDoc.getElementsByTagName ( "TITLE" ) ;
for ( i=0 ; i<x.length ; i++ )
{ txt=txt + x[i].childNodes[0].nodeValue + " " ; }
document.getElementById("ex_2").innerHTML=txt;
}
xmlhttp.open(" GET " , "Book_List.xml " , true ) ;
xmlhttp.send( );
}
</script>
< /head >
< body >
< div id = " ex_2 " > < /div >
< button type="button" onclick="Book( )"> مشاهده عنوان ها < /button >
< /body >
< /html >