جلسه دوم آموزش Ajax-نمونه ای جکس و ایجاد آبجکت XMLHttpRequest

۰ دیدگاه

جلسه دوم آموزش Ajax-نمونه ای جکس و ایجاد آبجکت XMLHttpRequest

با سلام. توی این مطلب میخوایم به دوستان عزیز سورس باران جلسه دوم آموزشی Ajax رو ارائه بدیم. که با نمونه ای جکس آشنا خواهید شد و سپس با ایجاد یک آبجکت XMLHttpRequest . از وب سایت آموزش برنامه نویسی سورس باران با شما خواهیم بود. ای جکس (Ajax)، مجموعه‌ای از استانداردها و فناوری‌های وب است که به کمک آنها می‌توان برنامه‌هایی مبتنی بر وب تولید کرد که به آسانی با کاربران تعامل داشته باشند. با استفاده از این فناوریها و با کمک انتقال تکه‌های کوچک داده و اطلاعات از رایانهٔ خادم (Server)، صفحات وب از حالت منفعل خارج می‌شوند و واکنشهایی مناسب با رویدادها انجام می‌دهند. ای‌جکس معماری جدیدی برای برنامه‌های تحت وب است، که با سرعت بسیار زیادی در حال گسترش بوده، و کمتر کاربر اینترنت است که هنوز گذرش به یکی از صفحاتی که با این معماری ساخته شده‌اند نیفتاده، و از قابلیت‌های فوق‌العاده آن بهره‌مند نشده باشد. شروع جلسه دوم آموزش Ajax-نمونه ای جکس و ایجاد آبجکت XMLHttpRequest در ادامه مطلب…

آموزش Ajax

نمونه های ای جکس :

برای آشنایی با چگونگی کار ای جکس ، یک اپلیکیشن ای جکس کوچک را طراحی میکنیم :

<!DOCTYPE html>
<html>
<head>
<script>
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();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

مشاهده دمو

سکشن Div برای نمایش اطلاعاتی که از سمت سرور برگشت داده میشوند استفاده شده. و دکمه موجود باعث به کار افتادن تابعی به نام loadXMLDoc(), خواهد شد.

<!DOCTYPE html>
<html>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

دوستان عزیز توی قسمت بعدی به بخش Head صفحه یه <Script> اضافه کنید. بخش اسکریپت حاوی تابع LoadXMLDoc می باشد.

<head>
<script>
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

ایجاد یک آبجکت XMLHttpRequest در ای جکس

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

ایجاد یک آبجکت XMLHttpRequest :

تمامی مروگرهای مدرن IE7 , Firefox , Chrome , Safari , Opera دارای یک آبجکت XMLHttpRequest توکار و تعبیه شده هستند.

نحوه ایجاد یک XMLHttpRequest :

variable=new XMLHttpRequest();

نسخه های قدیمی اینترنت اکسپلور IE5 – IE6 از ActiveX Object استفاده می کنند.

variable=new ActiveXObject("Microsoft.XMLHTTP");

برای مدیریت و استفاده از تمامی مرورگرهای مدرن، مانند IE6 و IE5 ابتدا چک کنید که آیا بروزِر یا همان مرورگرتان از آبجکت XMLHttpRequest پشتیبانی می کنید یا خیر. اگر پشتیبانی میکند یک آبجکت XMLHttpRequest و اگر خیر، یک ActiveXObject بسازید :

varxmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

در بخش بعدی با مقوله ی ارسال درخواست به سرور اشنا خواهید شد .

به این مطلب امتیاز دهید post

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش ایجاد یک آبجکت XMLHttpRequest, ایجاد یک آبجکت XMLHttpRequest در ای جکس, برای آشنایی با چگونگی کار ای جکس, جلسه دوم آموزش Ajax, سکشن Div برای نمایش, طراحی اپلیکیشن ای جکس, نمونه های ای جکس, نمونه های ای جکس و ایجاد آبجکت XMLHttpRequest

آموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار

جم فايل : 187 کیلوبایت
منبع : سورس باران
انتشار: ۱۴ مرداد ۱۳۹۴

دانلود با لینک مستقیم

جلسه دوم آموزش Ajax-نمونه ای جکس و ایجاد آبجکت XMLHttpRequest

آموزش Ajax

ایجاد یک آبجکت XMLHttpRequest در ای جکس

ایجاد یک آبجکت XMLHttpRequest :

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ