یه مقاله خوب در مورد آژاکس

[hossein_asp]

حیفم اومد این مقاله رو برای استفاده بقیه نگذارم باقی مقاله ها رو میتونید تو سایتی که پایین نوشتم بخونید.اما تهش ما نتونستیم یه رشته فارسی رو با متد get تو http.open بفرستیم که ??? نشه XMLHttpRequest
یکی از اشیای محلی(Native Object) جاوااسکریپت است که اجازه درخواست های HTTP را از یک صفحه لود شده به کاربران می دهد.این شیء به کاربران اجازه می دهد که یک سری ریزدرخواست(Microrequests) در پاسخ به رویدادهای کاربر، بدون لود شدن مجدد صفحات ارسال کنند و این امر باعث می شود که یک برنامه تحت وب ، ماهیتی مثل desktop applications پیدا کند. توجه داشته باشید که XMLHttpRequest تنها روش ارتباط با server بدون لود شدن مجدد صفحات نیست بلاکه روش های دیگری مثل Remote Scripting نیز وجود دارند که از بحث ما خارج است! در این مقاله با یک مثال عملی ساده، چگونگی استفاده از این شیء را توضیح می دهیم:

فرض کنید که می خواهیم برنامه ای برای ضرب دو عدد بنویسیم. قرار است که ضرب دو عدد در سمت Server و توسط php انجام شود.(ممکنه که این مثال کمی احمقانه به نظر برسه چون خیلی راحت با جاوااسکریپت میشه این کارو انجام داد! ولی هدف ما توی این مقاله استفاده از یک زبان برنامه نویسی سمت server بدون لود شدن مجدد صفحات است و هدف ما به هیچوجه، انجام عمل ضرب نیست!)

اولین مرحله از کار،ساخت یک شیء XMLHttpRequest توسط جاوااسکریپت است.از آنجا که مرورگرهای وب مختلف، با این شیء به روش های مختلف برخورد می کنند برای ساخت این شیء به صورت مستقل از مرورگر، از precompile directives استفاده می کنیم.(این دستورات با /*@cc_on شروع شده و به @end @*/ ختم می شوند.) در اینجا از دستورات try-catch برای کنترل ساخت این شیء استفاده شده است.در هنگام لود صفحه اصلی، یک نمونه از این شیء درست می شود:

 <script language="javascript"  type="text/javascript"> 
function getHTTPObject() { 
  var xmlhttp; 
  /*@cc_on 
  @if (@_jscript_version >= 5) 
    try { 
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
      try { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (E) { 
        xmlhttp = false; 
      } 
    } 
  @else 
  xmlhttp = false; 
  @end @*/ 
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
    try { 
      xmlhttp = new XMLHttpRequest(); 
    } catch (e) { 
      xmlhttp = false; 
    } 
  } 
  return xmlhttp; 
} 
var http = getHTTPObject(); // We create the HTTP Object 
</script>

در مرحله بعدی، فرمی ساده با سه فیلد با نامه های مشخصه a,b,c درست می کنیم. رویداد onblur مربوط به فیلد b را با تابع echoResult اداره می کنیم. قصد داریم وقتی کاربر با فشار دادن کلید tab ،تمرکز را از این فیلد گرفت، نتیجه ضرب a در b را در فیلد c نشان دهیم:

 <form name="form1" method="post" action=""> 
  <table width="392" border="0" align="center" cellpadding="0" cellspacing="0"> 
    <tr> 
      <td width="24"><input name="a" type="text" id="a" size="4" maxlength="4"></td> 
      <td width="21"><div align="center">*</div></td> 
      <td width="36"><div align="center"> 
          <input name="b" type="text" id="b" size="4" maxlength="4" onblur="echoResult();"> 
        </div></td> 
      <td width="25"><div align="center">=</div></td> 
      <td width="286"><input name="c" type="text" id="c" size="8" maxlength="8"></td> 
    </tr> 
  </table> 
</form>

در این مرحله به نوشتن تابع echoResult و handleHttpResponse می پردازیم.تابع echoResult مقادیر فیلدهای a و b را دریافت کرده از طریق شیء XMLHttpRequest این مقادیر را به صورت پارامتر به صفحه سمت server که در اینجا handleMultiply.php می باشد، ارسال می کند. خاصیت onreadystatechange مربوط به شیء XMLHttpRequest را برابر تابع handleHttpResponse قرار داده ایم.این تابع پاسخ دریافتی از سمت Server را در فیلد مربوطه یعنی c می نویسد و سپس ارتباط با server قطع می شود:

<script language="javascript"  type="text/javascript"> 
var url = "handleMultiply.php?"; // The server-side script 
function handleHttpResponse() { 
  if (http.readyState == 4) { 
    result = http.responseText; 
    document.getElementById('c').value = result; 
  } 
} 
function echoResult() { 
  var a = document.getElementById("a").value; 
  var b = document.getElementById("b").value; 
  http.open("GET", url + "a=" + a + "&b=" + b, true); 
  http.onreadystatechange = handleHttpResponse; 
  http.send(null); 
} 
</script>

در مرحله آخر یک صفحه php با نام handleMultiply.php درست می کنیم که پارامترهای a و b را به روش GET دریافت کرده و حاصلضرب آنها را بر می گرداند.

<?php 
    $a=$_GET['a']; 
    $b=$_GET['b']; 
    $c=$a * $b ; 
    echo $c; 
?>

این تمام کاری بود که باید انجام می دادیم.حالا می توانیم برنامه خود را تست کنیم و یک گام به سمت روش Ajax برداریم.نتیجه اجرای این مثال را می توانید در اینجا مشاهده کنید.
منبع:نویسنده علی خلیلی

 

[hossein_asp]

و اکنون اصلاح میشود:اگر هنگام ارسال اطلاعات به صورت GET داده خود را انکد کنید مشکل فارس حل میشود:
اینطور:

var a =encodeURI(document.getElementById("a").value);