» مقالات » مقالات هایبرد » کاربرد ای جکس (آموزش Ajax)

کاربرد ای جکس (آموزش Ajax)

کاربرد ای جکس (آموزش Ajax)

6190  تعداد بازدید  |  چهارشنبه 13 آبان ماه 1394

در این بخش سعی بر این دارم که نمونه ها و برنامه های کاربردی و کلیدی را به شما معرفی کنم و آن ها را شرح دهم. نکته قابل توجه در این بخش این است که حتما قدم به قدم با متن پیش روید.

در این بخش  از طراحی سایت سعی بر این دارم که نمونه ها و برنامه های کاربردی و کلیدی را به شما معرفی کنم و آن ها را شرح دهم. نکته قابل توجه در این بخش این است که حتما قدم به قدم با متن پیش روید.


نمونه ۱
در این مثال میخواهیم صفحه ای تولید کنیم که دارای چند لینک موضوع باشد و با کلیک کردن کاربر روی هر لینک سایتهای مرتبط با آن موضوع نمایش داده شوند. این مثال دارای دوفایل CAT.ASP , CAT.HTMLمی باشد. البته بعد از اتمام کار نمونه PHP را هم آموزشی می دهم

CAT.HTML فایل

در این فایل باید در تگ <BODy> سه لینک تولید کنیم :

<a onclick="showCat("funny");">Funny</a> 
<a onclick="showCat("sport");">Sport</a>
<a onclick="showCat("game");">Games</a>

انطور که ملاحظه میفرمایید رویداد ONCLiCK هر لینک تابعی با پارامتر مشخصی را فراخوانی میکند.
نام تابع فراخوانی شده: SHOWCAT
پارامترهای استفاده شده: FUNNY, SPORT , GAME
سپس باید محلی را برای چاپ نتایج دریافتی در نظر بگیریم. من از تگDIV استفاده میکنم 

<div id="mdiv"></div>

 

حال نوبت به نوشتن کدهای جاوا برای استفاده از ای جکس شده.
اولین مرحله نوشتن یک تابع برای تولید یک شی tXMLHTTPREouEs است. پس در تگ <scRIp> می نویسیم

 

var xmlHttp = null;
function Create(){ 
if (window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP");
}else 
{ xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
سپس نوبت نوشتن تابعی است که بر اثر کلیک بر روی لینک ها باید به اجرا درآید:
function showCat(cat) {
Create(); 
xml.http.open('GET', 'cat.asp?cat=' + cat,true);
xmlhttp.onreadystatechange = update; 
xml Http.send(null);
}

همانظور که مشاهده می کنید این تابع هنگامی فراخوانی میشود که روی هرکدام از لینک ها کلیک شود. این تابع یک پارامتر می پذیرد. این پارامتر تعیین کننده نوع لینکی است که بر روی آن کلیک شده. برای مثال اگر لینک UNNY کلیک شود مقدار CAT که پارامتر تابع است به FUNNY تغییر می یابد و تابع مقدار FUNNYر در متغیر CAT قرار می دهد.
حال نوبت نوشتن تابعی است که باید پس از دریافت جواب اجرا شود یعنی تابع :UPDATE

function update(){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200 ){ -
document.getElementById("mdiv").innerHTML = xmlHttp.responseText;
} -
}else:{
alert("Error in server");
}
}
}

این تابع کار گرفتن پاسخ و چاپ آن روی صفحه را انجام میدهد. یک نکته قابل ذکر در این تابع آن است که اگر
XMLHTTP. READYSTATE برابر ۴ قرار نگیرد پیغامی مبنی بر اشکالی در سرور به کاربر نمایش داده خواهد شد پسی ما در آخر چنین صفحه HTML خواهیم داشت:

<html>
<head>
<script language="javascript">
var xmlHttp = null;
function Create(){
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP");
}else:{ xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function showCat(cat) {
Create(); xml Http.open('GET', 'cat.asp?cat=' + cat,true);
xml Http.onreadystatechange = update; 
xml Http.send(null);
}
function update(){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){ 
document.getElementById("mdiv").innerHTML = xmlHttp.responseText;
}else{
alert("Error in server");
}
}
}
</script
</head> <body>
<a onclick="showCat("funny");">Funny</a> 
<a onclick="showCat("sport");">Sport</a>
<a onclick="showCat("game");">Games</a>
<div id="mdiv"></div>
</body</html>

مقالات مرتبط به طراحی سایت :

کاربرد ای جکس (آموزش Ajax)
خصوصیت readyState (آموزش Ajax)
متد open/متد send (آموزش Ajax)
نمونه سازی XMLHTTPREOUEST (آموزش Ajax)