آموزش Ajax در 5 دقیقه!
#1
Note 
سلام دوستان
امروزه بازار Ajax و کلا جاوا اسکریپت خیلی داغه. کمتر سایتی پیدا میشه که توش از Ajax استفاده نشده باشه این شد که تصمیم گرفتم این آموزش کوچیک رو بنویسم امیدوارم مفید باشه.
درحالت معمولی برای یک تغییر هر چند کوچیک در صفحه وب مجبورید کل صفحه رو Reload کنید. تا چند سال پیش این مشکل وجود داشت تا اینکه Ajax معرفی شد. Ajax این مشکل رو پوشونده و شما میتونید بدون بارگذاری مجدد صفحه در اون تغییرات بدید.

برای اطلاعات بیشتر به این تاپیک مراجعه کنید [ ].

در ادامه نحوه استفاده ازAjax در صفحه رو با هم یاد میگیریم.

پاسخ
#2
Note 
ما در این پست بصورت عملی یک تمرین انجام میدیم و در نهایت هم اون رو برای دانلود میذاریم.
ابتدا باید یه کتابخانه ساده Ajax بنویسیم ، در مرحله دوم یک صفحه ازمایشی درست کنیم و بعد تابع رو برای ارسال یک درخواست AJAX صدا کنیم تا محتویات فایل سوم در فایلمون بارگذاری بشه.

برای آزمایش ما به سه فایل نیاز داریم:

  • ajax.js
  • index.html
  • pageToLoad.html

محتویات فایل ajax.js:

[JS]/*
** Softafzar.net | Developers home_
*/
function AJAX_Request(URL, ELEM, MESSAGE) {
document.getElementById(ELEM).innerHTML = MESSAGE;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
/* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
/* some versions IE */
} catch (E) {
req = false;
}
}
}

req.onreadystatechange = function() {responseAJAX(ELEM);};
req.open("GET",URL,true);
req.send(null);
}

function responseAJAX(ELEM) {
var output = '';
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(ELEM).innerHTML = output;
}
}
}[/JS]

محتویات فایل index.html:

[HTML]<html>
<head>
<title>Learn AJAX in 10 minutes! Softafzar.net</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<button onclick="AJAX_Request('pageToLoad.html', 'content','Please Wait...')">Show message</button>
<div id="content">
</div>
</body>
</html>[/HTML]

و محتویات فایل pageToLoad.html:

[HTML]<br/>HELLO!<br/>
PLEASE VISIT OUR TUTORIAL CENTER<br/>
<img src="http://www.softafzar.net/tc/wp-content/themes/cyangant2/images/logo.png">[/HTML]

همونطور که میبینید ما سه پارامتر برای تابع AJAX_Request در نظر گرفتیم:

URL: ادرس فایلی که باید بارگذاری بشه رو مشخص میکنه.
ELEM: المنتی که محتویات باید در اون نمایش داده بشه رو مشخص میکنه.
MESSAGE: پیامی که در زمان بارگذاری باید نمایش داده بشه رو مشخص میکنه میتونه متن ، عکس و... باشه.

حالا فایل index.html رو اجرا کنید تا نتیجه رو ببینید.

دانلود فایلها:
کد:
http://www.s1.softafzar.net/uploads/201401061389033581ajax[softafzar.net].rar

اگر سوالی دارید حتما بپرسید.
موفق باشید.

پاسخ
#3
Note 
سلام سایت بسیار خوبی دارید
کد بدرستی اجرا نمیشه Please Wait... فقط میاد

پاسخ
#4
Note 
Ramin000 نوشته است:سلام سایت بسیار خوبی دارید
کد بدرستی اجرا نمیشه Please Wait... فقط میاد
سلام
باید در محیط اینترنت یا لوکال هاست اجراش کنی.

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Note Jquery Ajax navigation WWWorker 0 350 14-08-2014 ساعت 17:19
آخرین ارسال: WWWorker
Note کتاب آموزش node.js C0der 0 659 11-03-2014 ساعت 14:16
آخرین ارسال: C0der
Note آموزش جی کوئری: ایجاد تاخیر در انجام دستورات با Delay WWWorker 0 470 01-01-2014 ساعت 20:02
آخرین ارسال: WWWorker
Note آموزش جی کوئری: CSS WWWorker 0 283 31-12-2013 ساعت 21:05
آخرین ارسال: WWWorker
Note آموزش جی کوئری: رویداد Click WWWorker 0 282 31-12-2013 ساعت 20:55
آخرین ارسال: WWWorker
Note آموزش جی کوئری: انیمیشن WWWorker 0 249 31-12-2013 ساعت 20:51
آخرین ارسال: WWWorker
Note آموزش جی کوئری: اضافه یا حذف Class WWWorker 0 296 31-12-2013 ساعت 20:40
آخرین ارسال: WWWorker
Note آموزش جی کوئری: اضافه کردن المنتهایی به المنت موجود WWWorker 0 330 31-12-2013 ساعت 20:34
آخرین ارسال: WWWorker
Note Ajax: چک کردن موجود بودن عکس در داکیومنت WWWorker 0 302 11-10-2013 ساعت 09:45
آخرین ارسال: WWWorker
Note اصول تکنیک ای جکس AJAX Stack OverFlow 0 335 27-06-2013 ساعت 14:34
آخرین ارسال: Stack OverFlow

کاربرانِ درحال بازدید از این موضوع:   1 مهمان