ما در این پست بصورت عملی یک تمرین انجام میدیم و در نهایت هم اون رو برای دانلود میذاریم.
ابتدا باید یه کتابخانه ساده Ajax بنویسیم ، در مرحله دوم یک صفحه ازمایشی درست کنیم و بعد تابع رو برای ارسال یک درخواست AJAX صدا کنیم تا محتویات فایل سوم در فایلمون بارگذاری بشه.
برای آزمایش ما به سه فایل نیاز داریم:
- ajax.js
- index.html
- pageToLoad.html
محتویات فایل ajax.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;
}
}
}
محتویات فایل index.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>
و محتویات فایل pageToLoad.html:
<br/>HELLO!<br/>
PLEASE VISIT OUR TUTORIAL CENTER<br/>
<img src="http://www.softafzar.net/tc/wp-content/themes/cyangant2/images/logo.png">
همونطور که میبینید ما سه پارامتر برای تابع AJAX_Request در نظر گرفتیم:
URL: ادرس فایلی که باید بارگذاری بشه رو مشخص میکنه.
ELEM: المنتی که محتویات باید در اون نمایش داده بشه رو مشخص میکنه.
MESSAGE: پیامی که در زمان بارگذاری باید نمایش داده بشه رو مشخص میکنه میتونه متن ، عکس و... باشه.
حالا فایل index.html رو اجرا کنید تا نتیجه رو ببینید.
دانلود فایلها:
http://www.s1.softafzar.net/uploads/201401061389033581ajax[softafzar.net].rar
اگر سوالی دارید حتما بپرسید.
موفق باشید.
