آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

ساختار 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 تغییر دهید



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


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

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

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