PDA

View Full Version : یک مثال عملی داغ برای Ajax



saeed_Z_F
شنبه 27 مرداد 1386, 15:04 عصر
سلام
گام 1 تعریف یک رویداد Javascript در کلاینت :
ابتدا یک صفحه HTML درست کنید و درون آن یک فرم قرار دهید . سپس درون فرم یک تگ Input قرار دهید بصورت زیر :


<input type="text" size="20" id="userid" name="id" onkeyup="validate();">


همانطور که مشاهده می کنید این در رویداد onkeyup این المان HTML متد Validate فراخوانی شده است این متد می تواند در رویدادهای دیگر نیز آورده شود .


گام 2 ساخت یک شئ XMLHttpRequest تنظیم آن:


var req;




function validate() {


var idField = document.getElementById("userid");


var url = "validate?id=" + encodeURIComponent(idField.value);


if (typeof XMLHttpRequest != "undefined") {


req = new XMLHttpRequest();


}

else

if (window.ActiveXObject) {

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

}

req.open("GET", url, true);

req.onreadystatechange = callback;

req.send(null);

}


با تکه کد Javascript فوق عملیات زیر انجام می شود این تکه کد رابعنوان اسکریپت در صفحه HTML قرار دهید

ذخیره مقداره وارد شده در فیلد userid در یک متغییر .
ساخت یک شئ XMLHttpRequest]
تنظیم درخواست برای ارسال به سرور .
ارسال درخواست به سرورنکته : دستور req.onreadystatechange = callback تابع callback را برای دریافت پاسخ از سرور ست می کند که در آن callback نام تابع جاوااسکریپت می باشد .

گام 3 پردازش درخواست فرستاده شده توسطValidateServlet
در این مرحله یک سرولت با نام ValidateServlet را بر روی یک URI با نام validate در فایل web.xml ست می کنیم .
این عملیات بدلیل استفاده از validate در متغییر URL تابع گام2 انجام میشود .
کد سرولت نوشته شده بصورت زیر است :


public class ValidateServlet extends HttpServlet { private ServletContext context; private HashMap users = new HashMap(); public void init(ServletConfig config) throws ServletException { super.init(config); this.context = config.getServletContext(); users.put("greg","account data"); users.put("duke","account data"); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = request.getParameter("id"); if ((targetId != null) && !users.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<message>valid</message>"); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<message>invalid</message>"); } }}




همانطور که مشاهده می کنید در متد doGet ابتدا مقدار id که بصورت پارامتر به درخواست چسبیده بود را می گیرد و در یک متغییر ذخیره می کند سپس بسته به شرایط پاسخ را تولید می کند .

نکته : در این مثال یک تگ XML بعنوان پاسخ برای کلاینت ارسال شده است که شمامی توانید آن را با هر کد دیگری اعم از اتصال به پایگاه داده عوض کنید .


گام 3 نوشتن متد callback در صفحه HTML برای دریافت پاسخ از سرور:



function callback() {



if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on whether or not message is valid
setMessage(message);
}
}

}


این متد وضعیت پاسخ رسیده را بررسی کرده و متد setMessage(message)را فراخوانی می کند

گام 4 بروز کردن المانهای HTML درون صفحه



:function parseMessage() {


var message = req.responseXML.getElementsByTagName("message")[0];

setMessage(message.childNodes[0].nodeValue);

}<script type="text/javascript">...function setMessage(message) {
var mdiv = document.getElementById("userIdMessage");
if (message == "invalid") {
mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";
} else {
mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>";
}
}
</script>
<body>
<div id="userIdMessage"></div>
</body>








این تکه کد مقدار دریافتی از سرور را درون تگ Div قرار می دهد .




این مثال یک مثال ساده و سریع و عملی از Ajax بود بدون درنگ این مثال رو بالا بیارید و لذت ببرید