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

0 دیدگاه

جلسه دوم آموزش 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>

<!DOCTYPE html>

<html>

<head>

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>

<!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>

<head>

function loadXMLDoc()

{

.... AJAX script goes here ...

}

</script>

</head>

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

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

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

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

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

variable=new XMLHttpRequest();

1	variable=new XMLHttpRequest();

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

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

1	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");
  }

varxmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

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

}

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

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

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

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

نظرات

صابر بوستانی

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

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

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

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

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

آموزش Ajax

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

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

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط