آموزش Ajax – قسمت دوم

خاصیت responsetext

داده های بازگشت داده شده از سرور، می توانند باخاصیت responsetext بازیابی شوند .

در کدهایمان ،ما مقدار فیلد ورودی “زمان” را برابر با متن پاسخ قرار می دهیم.

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
  {
  document.myForm.time.value=xmlHttp.responseText;
  }
 
}

فصل بعد نشان می دهد که چگونه بعضی داده ها را از سرور درخواست کنید.

Ajax-فرستادن یک تقاضا به سرور

برای ارسال خاموش یک تقاضا به سرور ما متد open() و متد send() را استفاده می کنیم.

متد open() سه آرگومان دارد. آرگومان اول مشخص می کند کدام متد را هنگام ارسال تقاضا استفاده کنیم ( get یاpost ).

آرگومان دوم مسیر متن طرف سرور را مشخص می کند.

آرگومان سوم مشخص می کند که تقاضا باید به طور غیر همزمان نگه داشته شود.

متد send تقاضاهای خاموش را به سرور ارسال می کند . اگر ما فرض کنیم که فایل های html,asp درهمان مسیر هستند کدها باید به صورت زیر باشند.

xmlHttp.open("GET","time.asp",true);
 
xmlHttp.send(null);

اکنون ما باید تصمیم بگیریم زمانی که تابع باید اجرا شود.

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

<form name="myForm">
 
Name: <input type="text"
 
onkeyup="ajaxFunction();" name="username" />
 
Time: <input type="text" name="time" />
 
</form>

ما فایل فقط خواندنی ajax””test ajax.htm که فایل نمونه ای زیر است رابه روز کرده ایم.

<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 است.

<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” ذخیره شده است:

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 برای یک سرور اطلاعات نوشته شده است.

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

<%
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

<?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;
 
?>

امیدواریم این مطلب براتون مفید بوده باشه... ملت وب

مشاهده قسمت های قبل:

قسمت اول