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

متد open/متد send (آموزش Ajax)

متد open/متد send (آموزش Ajax)

9084  تعداد بازدید  |  دوشنبه 13 مهر ماه 1394

اولین و مهمترین متد، متد OPEN است. چرا که این متد وظیفه ارسال داده را به سرور دارد. این متد دارای سه پارامتر می باشد. قسمت اولی مشخص میکند که روشی ارسال اطلاعات به چه صورت انجام شود. روش get یا POST. قسمت دوم مشخص میکند که نام فایلی که باید اطلاعات به آن ارسال شود تا پردازش روی آن انجام گردد

اولین و مهمترین متد، متد 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
 این متد را میتوان آخرین متد برای تکمیل کار معرفی کرد. چرا که این متد ارسال داده را بر عهده دارد. نمونه را مشاهده کنید:


(xmlhttp.send(null

خب این دستور اطلاعات مورد نظر را به فایل مورد نظر ارسال میکند. در مورد اینکه چرا پارامتر NULL  را پذیرفته ،صحبت خواهیم کرد.

ResponseText

این خصوصیت، جوابی را که از طرف سرور فرستاده شده بر میگرداند. طرز استفاده از آن را می بینید.

 var message  =xmlHttp.responseText

این خط از دستورات مقدار برگشتی از سرور را درون متغیری به نام MESSAGE قرار می دهد.

مبتوان گفت از مهمترین دستورا در ای جکسی همین دستور است چرا که ما همیشه به جوابی که از سرور فرستاده میشود احتیاج داریم.

پس ما چنین صفحه دای داریم :



<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


چرا که متغیر NAME Uدارای مقدار HOSEIN می باشد.

در خط بعدی یعنی:


 xml.http.onreadystatechange= update;


ما به برنامه میگوییم که پس از تغییر وضعیت درخواست مانند دریافت جواب) از سرور چه کاری را انجام دهد. در اینجا گفتیم که تابع UPDATE را فراخوانی کند. و در خط: (XMLHTTP.SENDNULL درخواست را ارسال می کنیم.
پس از ارسالی درخواست به سرور منتظر دریافت جواب میشویم. بعد از دریافت جواب همانطور که تعریف کردیم   را فراخوانی کنیم. UPDATE   باید تابع  XMLHTTP.ONREADSTATECHANGE
این کار ها به سرعت برق انجام میشود و ما متوجه آن نمیشویم. حال از کجا متوجه شویم که جواب به صورت صحیح و کاملی دریافت شده با استفاده از خصوصیات READYSTATE

 

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

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