خاصیت responsetext
داده های بازگشت داده شده از سرور، می توانند باخاصیت responsetext بازیابی شوند .
در کدهایمان ،ما مقدار فیلد ورودی “زمان” را برابر با متن پاسخ قرار می دهیم.
1 2 3 4 5 6 7 8 |
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } |
فصل بعد نشان می دهد که چگونه بعضی داده ها را از سرور درخواست کنید.
Ajax-فرستادن یک تقاضا به سرور
برای ارسال خاموش یک تقاضا به سرور ما متد open() و متد send() را استفاده می کنیم.
متد open() سه آرگومان دارد. آرگومان اول مشخص می کند کدام متد را هنگام ارسال تقاضا استفاده کنیم ( get یاpost ).
آرگومان دوم مسیر متن طرف سرور را مشخص می کند.
آرگومان سوم مشخص می کند که تقاضا باید به طور غیر همزمان نگه داشته شود.
متد send تقاضاهای خاموش را به سرور ارسال می کند . اگر ما فرض کنیم که فایل های html,asp درهمان مسیر هستند کدها باید به صورت زیر باشند.
1 2 3 |
xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); |
اکنون ما باید تصمیم بگیریم زمانی که تابع باید اجرا شود.
ما اجازه می دهیم که تابع در پشت صحنه اجرا شود وقتی که کاربر چیزهایی را در فیلد متن نام کاربری تایپ می کند.
1 2 3 4 5 6 7 8 9 |
<form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> |
ما فایل فقط خواندنی ajax“”test ajax.htm که فایل نمونه ای زیر است رابه روز کرده ایم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); } </script> <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> |
فصل بعد کاربردهای ajax ما را با script ،time.asp کامل می کند.
کدهای منبع ajax برای مثال پیشنهادی
کدهای منبع زیر به مثال ajax صفحه قبل متعلق هستند.
شما می توانید آن ها را کپی و پیست کنید وخودتان آن ها را امتحان کنید.
صفحه html ajax
این صفحه html است و شامل یک فرم html ساده ویک پیوند به javascript است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <script src="/clienthint.js"></script> </head> <body> <form> First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> |
کد javascriptدرزیر لیست شده است.
Javascript در ajax (جاواسکریپت در ایجکس)
این کد javascript در فایل “clienthint” ذخیره شده است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } |
صفحه سرور ajax- asp و php
چیزی به عنوان سرور ajax وجود ندارد.
صفحات ajax می توانند به وسیله هر سرور اینترنتی سرویس داده شوند.
صفحه سرور نام گذاری شده به وسیله javascript درفرم مثال فصل قبل یک فایل asp ساده است که “gethint.asp” نامیده می شود.
درزیر ما دو مثال لیست شده ازکد صفحه سرورداریم که یکی در asp و یکی در php نوشته شده است.
مثال ajax در asp
کد درون صفحه” “gethint.aspدر vbscript برای یک سرور اطلاعات نوشته شده است.
فقط یک آرایه ای از اسم ها را چک می کند و نام های مطابقت داده شده،متناسب با مشتری را بر می گرداند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<% response.expires=-1 dim a(30) 'Fill up array with names a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" 'get the q parameter from URL q=ucase(request.querystring("q")) 'lookup all hints from array if length of q>0 if len(q)>0 then hint="" for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if next end if 'Output "no suggestion" if no hint were found 'or output the correct values if hint="" then response.write("no suggestion") else response.write(hint) end if %> |
مثال php در ajax
کد بالا دوباره درphp نوشته شده است.
نکته: برای اجرای کامل مثال در php، تغییرمقادیر آدرس “clienthint.js”را از “gethint.asp”به”gethint.php” به خاطر بسپارید.
مثال php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?php header("Cache-Control: no-cache, must-revalidate"); // Date in the past header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Fill up array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //get the q parameter from URL $q=$_GET["q"]; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?> |
منبع : w3schools.com
مقداد علی بخشی هستم. موسیقی دان، برنامه نویس، متخصص هوش مصنوعی، علم داده، متخصص بلاکچین و توسعه دهنده ربات های هوشمند.
دانش آموخته مقطع ارشد و دکتری دانشکده فنی دانشگاه تهران هستم. با سابقه تدریس درس برنامه نویسی در دانشگاه (پردیس بین الملل کیش دانشگاه تهران)