آموزش Ajax - دریافت پاسخ XmlHttpRequest از سرور

مقدمه :

پس از اینکه یک شی XMLHttpRequest را ساخته و به وسیله آن درخواست خود را به سرور ارسال نمودید ، سرور دستورات برنامه Ajax تعیین شده را پردازش کرده و یک خروجی را به عنوان پاسخ درخواست ، به کاربر ارسال می کند .
مرورگر در کامپیوتر کاربر این پاسخ را دریافت کرده و تغییرات لازم را در صفحه و بخش مربوطه انجام خواهد داد .

به وسیله قابلیت Respone در ایجکس ، می توانید کدی طراحی نمایید تا مرورگر پاسخ سرور را دریافت کند . برای این منظور از 2 خاصیت شی XMLHttpRequest به شرح زیر استفاده می شود :

  • خاصیت responseText : از این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک متن خالی از نوع داده ای string است .
    برای مثال فرض کنید که محتوای یک عنصر پاراگراف باید با متن جدید جایگزین شود . در این حالت چون جواب سرور از نوع متن است ، از خاصیت responseText استفاده می شود .
  • خاصیت responseXML : این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک فایل XML بوده و یا قالب بندی داده ای شده باشد .

در ادامه به تشریح کاربرد این خاصیت ها و مثال استفاده از آنها پرداخته ایم .


استفاده از خاصیت responseText :

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

مثال : در مثال زیر ابتدا یک شی XMLHttpRequest به نام xmlhttp ساخته شده است . سپس درخواستی به سرور برای باز کردن فایل ajax_ex1.txt و استخراج متن درون آن فرستاده شده است . سپس جواب خروجی از سرور به وسیله خاصیت responseText دریافت شده و با متن موجود در تگ < div id ="ex_1" > جایگزین شده است .

Example
< 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 >
کد

برای تغییر متن به وسیله ajax بر روی دکمه زیر کلیک نمایید

خروجی


استفاده از خاصیت responseXML :

پس از ایکنه با دریافت یک پاسخ ساده متنی از سرور آشنا شدید ، حال بایستی یک پاسخ قالب بندی شده  به زبان  XML را  از سرور دریافت کنیم . برای این منظور از خاصیت responsXML شی XMLHttpRequest ، استفاده می کنیم .

در این پروسه ، ابتدا فایل XML خروجی از سرور دریافت شده و خاصیت responseXML آن را پردازش می کند . سپس اطلاعات آن را در اختیار مرورگر قرار می دهد تا در بخش هایی از صفحه که باید تغییر کنند ، استفاده شود .

برای درک بهتر این مسئله یک مثال ساده را برای شما تشریح می کنیم . در این مثال یک فایل XML به نام Book_List.xml داریم که درون آن لیست یک سری کتاب با نام نویسنده و سال انتشار  قرار دارد .  با اجرای دستور  زیر این فایل از سرور توسط شی responseXML دریافت شده و عنوان کتاب ها از بین اطلاعات دریافتی استخراج می شود . سپس تگ < " div id = " ex-2" > ، این عنوان ها را در خروجی نمایش می دهد . برای مشاهده عملیات و خروجی مثال بر رور دکمه فرمان دریافت عنوان ها ، کلیک نمایید .

Example
< 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 >
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :        
سوال امنیتی : پایتخت ایران ؟