آموزش ajax ـ متد open و متد send
از xmlhttprequest بدانید!
2015-10-13در طراحی سایت می شود از تصاویر به عنوان دکمه استفاده کرد؟
2015-10-13آموزش ajax ـ متد open و متد send
آموزش ajax ـ متد open و متد send
در آموزش ajax اولین و مهمترین متد، متد OPEN است. چرا که این متد وظیفه ارسال داده را به سرور دارد. این متد دارای سه پارامتر می باشد. قسمت اولی مشخص می کند که روش ارسال اطلاعات به چه صورت انجام شود؛ متد get یا POST. قسمت دوم مشخص می کند که نام فایلی که باید اطلاعات به آن ارسال شود تا پردازش روی آن انجام گردد، کدام است. قسمت سوم هم که مقدار TRUEیا FALSE می پذیرد، بعدها به این موضوع نیز خواهیم پرداخت. برای مثال استفاده از متد OPEN :
xmlHttp.open(‘GET’,’test.php?=name’+uname’true);
در این مثال شئ یک درخواست به سمت فایل TEST PHP ارسال می کند. که این درخواست از متد GET برای این ارسال استفاده می کند. مقادیری که با این درخواست ارسال می شود شامل متغیر NAME با مقدار uname می باشد. بعدها اینقدر با این روش داده ارسال می کنید که برای شما عادت می شود. پارامتر TRUE را به همین صورت راحت بگذارید. بعدها به آن توضیحاتی اضافه خواهد شد.
خصوصیت onreadystatechange
این خصوصیت، عملی را مشخص می کند که پس از دریافت جواب از سرور، باید اجرا شود. برای مثال این متد می تواند معرف یک تابع باشد که پس از تغییر وضعیت در درخواست (مثلا دریافت جواب) از سرور به اجرا در می آید، فراخوانی می شود. نمونه ای از استفاده این خصوصیت را مشاهده می فرمایید :
xmlhttp.onreadystatechange= update;
UPDATE نام تابعی است که پس از دریافت پاسخ از سرور به اجرا در می آید.
متد send
این method را می توان آخرین متد برای تکمیل کار معرفی کرد. چرا که این متد ارسال داده را بر عهده دارد. نمونه را مشاهده کنید :
xmlhttp.send(null)
خب این دستور اطلاعات مورد نظر را به فایل مورد نظر ارسال می کند. در مورد اینکه چرا پارامتر NULL را پذیرفته، صحبت خواهیم کرد.
ResponseText
این خصوصیت، جوابی را که از طرف سرور فرستاده شده بر می گرداند. طرز استفاده از آن را می بینید.
var message =xmlHttp.responseText
این خط از دستورات مقدار برگشتی از سرور را درون متغیری به نام MESSAGE قرار می دهد.
می توان گفت از مهمترین دستورات در ajax همین دستور است چرا که ما همیشه به جوابی که از سرور فرستاده می شود احتیاج داریم. پس ما چنین صفحه ای داریم :
<html>
<head>
<“script language=”javascript>
var xmlHttp = null;
function CreateXmlHttpRequest()
{
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP’);
}else{ xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function proccess()
{
CreateXmIHttpRequest();
var uname = document.getElementById(‘uname’).value;
xmlHttp.open(‘GET’,’welcome.php?name=’ + uname,true);
xmlHttp.onreadystatechange = update;
xml.send(null);
}
function update()
{
if (xmlHttp.readyState == 4){
var message = xmlHttp.responseText;
document.getElernentById)mdiv.(linnerHTML = “Welcome ” + message;
}
}
</script>
<title>Using Ajax</title>
<div id=”mdiv”></div>
</head>
<body>
</”()input type=”text” id=”uname” onkeyup=”process>
</body>
</html>
این صفحه چه کاری را برای ما انجام می دهد. سوالی است شاید در ذهنتان نقش بسته باشد، پس به توضیح جزئیات می پردازیم. با تابع CreateXmlHttpRequest که مشکلی نیست. قبلا در باره آن صحبت شده است. اینجا یک تابع جدید داریم به نام PROCESS. این تابع هیچ پارامتر مقادیر ورودی ندارد. در مرحله اول این تابع از تابع CREATEXMLHTTPREOUEST برای نمونه سازی استفاده می کند. چرا که برای ادامه کار نیاز به یک شی XMLHTTPREQUEST دارد. پس از نمونه سازی شی در متغیر XMLHTTP کار را ادامه می دهد. می رسیم به خط :
| var uname = document.getElementById)uanme).value
این خط یک متغیر به نام UNAME تعریف کرده و مقدار کنترل UNAME که در قسمت <BODY> صفحه قرار دارد را در آن می گذارد. یعنی هر مقداری که TEXTBOX با شناسه UNAME دارد در متغیری به همین نام نسبت داده می شود. البته این متغیر هر نام دیگری می تواند داشته باشد. همانطور که ملاحظه می فرمایید در کنترل UNAME که در قسمت BODY صفحه قرار دارد، تعریف کرده ایم که به محض اینکه کلیدی در این جعبه متن وارد (ONKEYUP) شد تابع PROCESS را فراخوانی کند. این کار را با دستور PROCESS انجام می دهیم. در ادامه مثالی که می بینید، همانطور که مشاهده می فرمایید درون جعبه متن HOSEIN نوشته شده است. در این لحظه اتفاق ONKEYUP می افتد و تابع PROCESS فراخوان میشود. در وحله اول یک نمونه از شی XMLHTTPREQUEST ساخته میشود و سپس متغیر NAME با مقدار HOSEIN مقدار دهی میگردد. شی XMLHTTP برای ارسالی آماده است و این کار را به خوبی با متد OPEN انجام میدهد.
xm1Http.open(‘GET,’welcome.php?name=” + uname, true);
بعد از این دستور شئ ما یک درخواست به صورت زیر به سرور ارسال می کند:
welcome.php?name=hosein
چرا که متغیر UNAME دارای مقدار HOSEIN می باشد.
در خط بعدی یعنی:
xml.http.onreadystatechange= update;
ما به برنامه میگوییم که پس از تغییر وضعیت درخواست مانند دریافت جواب از سرور چه کاری را انجام دهد. در اینجا گفتیم که تابع UPDATE را فراخوانی کند. و در خط: (XMLHTTP.SENDNULL) درخواست را ارسال می کنیم. پس از ارسال درخواست به سرور منتظر دریافت جواب می شویم. بعد از دریافت جواب همانطور که تعریف کردیم، فراخوانی می کنیم. UPDATE با تابع XMLHTTP.ONREADSTATECHANGE به سرعت برق انجام می شود و ما متوجه آن نمی شویم. حال از کجا متوجه شویم که جواب به صورت صحیح و کامل با استفاده از خصوصیات READYSTATE دریافت شده است.
