طراحی سایت در شرکت طراحی سایت مبنا
طراحی سایت هدف نیست، ارتقا تجارت هدف است

دریافت پاسخ XMLHttpRequest از سرور

10 / 10 از 1 کاربر

در این قسمت از آموزش 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 >

ارسال نظر و نظرات ثبت شده
نام شما :
ایمیل :
تلفن تماس :
متن پیغام :