سنگ بنايAJAX شئXMLHttpRequest است . براي بكارگيري آن مطابق زير اقدام نمائيد:
همه مرورگرهاي مدرن شئXMLHttpRequest را پشتبياني ميكنند .
شئXMLHttpRequest ميتواند براي تبادل داده با يك وب سرور در پشت صحنه استفاده شود .اين بدين معني است كه بروز رساني بخشي از صفحه بدون بارگيري مجدد كل صفحه امكان پذير ميباشد.
فرمت كلي ايجاد يك شئXMLHttpRequest مطابق زير است .
تابع برگشتي ، تابعي است كه بعنوان پارامتر به تابع ديگري ارسال ميشود .در اين حالت تابع برگشتي بايد داراي كدي باشد كه در زمان آماده شدن پاسخ اجرا شود.
xhttp.onload = function() { // What to do when the response is ready }
براي ارسال درخواست به سرور ميتوان از متدهايopen() , send() شئ XMLHttpRequesاستفاده كرد .
xhttp.open("GET", "ajax_info.txt"); xhttp.send();
مثال ـ شئXMLHttpRequest
// Create an XMLHttpRequest object const xhttp = new XMLHttpRequest(); // Define a callback function xhttp.onload = function() { // Here you can use the Data } // Send a request xhttp.open("GET", "ajax_info.txt"); xhttp.send();
بدلايل امنيتي مرورگرهاي مدرن اجازه دسترسي بدامنه ها را نميدهند .اين بدين معني است كه هم صفحه وب و هم فايلXML كه سعي در بارگذاري آن است، بايد دريك سرور قرار داشته باشند .
در مثال هاي درW3School همه فايل هاي XML كه باز ميشوند در دامنه آن قراردارند .البته همين مثال ها در مطالب ارائه شده فايل مذكور در دامنه هاست اينجانب قرار گرفته اند.
اگر ميخواهيد از مثال بالا در يكي از صفحات وب خودتان استفاده كنيد، فايل هايXML كه بارگذاري ميكنيد، بايد در سرور خودتان باشند.
متد | شــرح |
---|---|
new XMLHttpRequest( ) | ايجاد شئ جديدXMLHttpRequest |
abort( ) | درخواست فعلي را لغو ميكند |
getAllResposoneHeaders( ) | اطلاعات هدرها را برميگرداند. |
getResponseHeader() | اطلاعات هدر مشخص شده را برگشت ميدهد. |
open(method,url,async,user,psw) | methodـ نوع درخواست GET يا POST
urlـ آدرس يوآرال anyncـ ناهمزماني(true) همزماني(false) userـ نام كاربر اختياري pawـ رمزعبوراختياري |
send( ) | ارسال درخواست به سرور، مورد استفادهGET |
send(string) | ارسال درخواست به سرور، برايPOST |
setRequestHeader( ) | اضافه نمودن زوجlable/valueبه هدر جهت ارسال |
ويژگي | شــرح |
---|---|
onload | تابعي را تعريف ميكند كه هنگام درخواست) بارگيري(فراخوان شود |
onreadystatechange | تعريف تابعي براي فراخواني در تغييرويژگيreadystate |
readystate | وضعيت درخواستXMLHttpRequest را نگهداري ميكند
: 0درخواست اوليه نشده است. : 1اتصال سرور برقرار شده : 2درخواست دريافت شد . : 3پردازش درخواست : 4درخواست به پايان رسيده وپاسخ آماده است |
responseText | داده هاي پاسخ را بصورت رشته اي برميگرداند. |
responseXML | داده هاي پاسخ بعنوان دادهXML برگشت ميشود . |
status | شماره وضعيت يك درخواست را برميگرداند:
"OK" : 200 "forbidden": 403ـ ممنوع "not found" : 404 موارد ديگر در فهرست خطاها |
statusText | برگشت متني ويژگيstatus |
با شئXMLHttpRequest( )ميتوان تابعي برگشتي را تعريف نمود كه تا زمانيكه پاسخ دريافت ميشود اجرا گردد .اين تابع در ويژگيonload تعريف ميشود .
مثال ـ ويژگيonload
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
اگر بيش از يك كار آجكس در يك وبسايت داريد، بايد يك تابع براي اجراي شئXMLHttpRequest ويك تابعCallback براي هر كارآجكس ايجاد كنيد .
فراخواني تابع بايد حاويurl باشد و هنگاميكه پاسخ آماده شد، كدام تابع بايد فراخوان شود .
مثال ـ چند تابعي در دريافت پاسخ
loadDoc("url-1", myFunction1); loadDoc("url-2", myFunction2); function loadDoc(url, cFunction) { const xhttp = new XMLHttpRequest(); xhttp.onload = function() {cFunction(this);} xhttp.open("GET", url); xhttp.send(); } function myFunction1(xhttp) { // action goes here } function myFunction2(xhttp) { // action goes here }
ويژگيreadyState وضعيت شئXMLHttpRequest را نگهداري ميكند.
ويژگيonreadystatechange يك تابع callback را تعريف ميكند، كه بايد هنگام تغييرreadyState بايد اجرا شود .
ويژگي هايstatus وstatusText وضعيت شئXMLHttpRequest را نگهداري ميكنند.
ويژگي | شــرح |
---|---|
onreadystatechange | تعريف تابعي براي فراخواني در تغييرويژگيreadystate |
readystate | وضعيت درخواستXMLHttpRequest را نگهداري ميكند
: 0درخواست اوليه نشده است. : 1اتصال سرور برقرار شده : 2درخواست دريافت شد . : 3پردازش درخواست : 4درخواست به پايان رسيده وپاسخ آماده است |
status | شماره وضعيت يك درخواست را برميگرداند:
"OK" : 200 "forbidden": 403ـ ممنوع "not found" : 404 موارد ديگر در فهرست خطاها |
statusText | برگشت متني ويژگيstatus |
تابعي كه در. ويژگيonreadystatechange تعريف شده هر باريكه ويژگي readyStateتغييركند، فراخوان ميشود .
هنگاميكهreadState=4 وstatus=200 باشد، پاسخ آماده است.
مثال ـ
function loadDoc() { const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt"); xhttp.send();
رويدادonreadystatecahang چهار بار (1-4) راه اندازي ميشود، يك بار براي هر تغيير در.readyState