آموزش آجاکس
آجاکس رویای برنامه نویسان است، زیرا به وسیله ی آن می توانید:
- یک صفحه ی وب را بروز رسانی کنید بدون اینکه نیاز باشد آن صفحه را لود کنید.
- بعد از لود شدن صفحه، داده ها را از سرور درخواست کنید.
- بعد از لود شدن صفحه، داده ها را از سرور دریافت کنید.
- در پشت پرده، داده ها را به سرور ارسال کنید.
مثال های خودتان امتحان کنید در هر فصل
در هر فصل، شما می توانید مثال ها را به صورت آنلاین ویرایش کند و با کلیک بر روی یک دکمه، نتیجه را مشاهده کنید.
شرح مثال آجاکس
صفحه ی HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>اجازه دهید آجاکس این متن را تغییر دهد</h2></div>
<button type="button" onclick="loadDoc()">تغییر متن</button>
</body>
</html>
<html>
<body>
<div id="demo"><h2>اجازه دهید آجاکس این متن را تغییر دهد</h2></div>
<button type="button" onclick="loadDoc()">تغییر متن</button>
</body>
</html>
صفحه ی مورد نظر دارای یک عنصر <div> و یک عنصر <button> است.
از عنصر <div> مورد نظر برای نمایش دادن اطلاعات از سرور استفاده می شود.
در صورتی که بر روی <button> کلیک شود، یک تابع فراخوانی می شود.
تابع مورد نظر، داده ها را از سرور درخواست می کند و آن را نمایش می دهد:
تابع ()loadDoc
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
هم اکنون یادگیری آجاکس را شروع نمایید!
- نوشته شده توسط احسان عباسی
- بازدید: 28124
دیدگاه‌ها
Thank you for sharing the information here. Really it was helpful.
مطلب خوب و مفیدی بود. ما هم در سایتمون از این تکنولوژی استفاده کردیم.