کار با درخواست های AJAX

درخواست ها در AJAX

همانطور که می دانید قلب AJAX همان شیء XMLHttpRequest است بنابراین هنگام ارسال یک درخواست باید از آن کمک بگیریم! برای اینکار ابتدا باید از متدهای ()open و ()send مربوط به این شیء استفاده کنیم:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

آیا این متدها را از جلسه ی قبل به یاد دارید؟

متد	توضیحات
open(method, url, async, user, psw)	حدود درخواست را مشخص می کند که موارد زیر را میگیرد: `method`: متد POST یا GET `url`: آدرس فایل مورد نظر `async`: نامتقارن بودن - یا true میگیرد یا false `user`: نام کاربری دلخواه `psw`: رمز عبور دلخواه
send()	درخواست را به سرور می فرستد (برای درخواست های GET استفاده می شود)
send(string)	درخواست را به سرور می فرستد (برای درخواست های POST استفاده می شود)

متد POST یا GET ؟

متد GET از متد POST ساده تر و سریعتر است و می توان از آن در اکثر موقعیت ها استفاده کرد اما اگر موقعیتی که در آن هستید یکی از موارد زیر است حتما باید از متد POST استفاده کنید:

استفاده از فایل های cache شده امکان پذیر نیست (یعنی زمانی که میخواهید یک فایل یا پایگاه داده را در سرور بروزرسانی و ویرایش کنید)
میخواهید داده های بسیار زیاد و حجیمی را به سرور ارسال کنید (POST برخلاف GET، هیچ محدودیت سایزی ندارد)
ارسال داده های ورودی از سمت کاربر (که می توانند شامل کاراکتر های خاص باشند)، چرا که این داده ها حساس هستند و POST امن تر است.

استفاده از GET

اگر بخواهید از دستور GET استفاده کنیم می گوییم:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "demo_get.asp", true);
  xhttp.send();
}
</script>

</body>
</html>

مشاهده ی خروجی

(پس از ورود به صفحه ی خروجی دکمه ی سبز رنگ RUN را از بالای صفحه بزنید)

ممکن است در مثال بالا، نتیجه ی برگشتی cache شده باشد؛ یعنی بروز نباشد بلکه از قبل مانده باشد. برای دوری از این مشکل یک ID خاص را به URL اضافه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
  xhttp.send();
}
</script>

</body>
</html>

مشاهده ی خروجی

اگر می خواهید به جای دریافت اطلاعات، اطلاعاتی را به سرور ارسال کنید باید آن اطلاعات را به URL بچسبانید:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
  xhttp.send();
}
</script>
 
</body>
</html>

مشاهده ی خروجی

استفاده از POST

یک درخواست ساده ی POST به این شکل است:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "demo_post.asp", true);
  xhttp.send();
}
</script>

</body>
</html>

مشاهده ی خروجی

برای آنکه اطلاعاتی را به سمت سرور ارسال کنید (مانند فرم ها) یک HTTP header با استفاده از ()setRequestHeader تعیین کنید. اطلاعاتی را که میخواهید ارسال کنید در دستور ()send مشخص کنید. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "demo_post2.asp", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Henry&lname=Ford");
}
</script>

</body>
</html>

مشاهده ی خروجی

متد توضیح

setRequestHeader(header, value)

header های HTTP را به درخواست ما میچسباند و مقادیر زیر را میگیرد:

header: نام header را مشخص می کند.

value: مقدار header را مشخص می کند.

سوال: چطور می توانیم یک فایل را از روی یک سرور باز کنیم؟

پاسخ: باید از دستور ()open استفاده کنیم و به آن دستور فایل مورد نظر را بدهیم:

xhttp.open("GET", "ajax_test.asp", true);

این فایل می تواند یک فایل متنی (txt.) یا xml. یا حتی فایل های asp. و php. باشد تا قبل از ارسال پاسخ، کارهایی را روی سرور انجام دهند.

سوال: آیا Asynchronous (ارسال ناهمگام اطلاعات) را فعال کنیم یا خیر؟

پاسخ: درخواست های سرور را به صورت Asynchronous ارسال کنید. بنابراین باید به پارامتر ()open مقدار true بدهید:

xhttp.open("GET", "ajax_test.asp", true);

اگر داده هایمان را به صورت ناهمگام (Asynchronous) ارسال کنیم، جاوا اسکریپت نیازی به منتظر ماندن برای دریافت پاسخ ندارد بلکه می تواند همزمان (در حالی که منتظر پاسخ است) اسکریپت های دیگر را نیز اجرا کند و بعد از اتمام کارش به سراغ پاسخ برود.

خصوصیت onreadystatechange

این خصوصیت یکی از خصوصیت های شیء XMLHttpRequest است که می تواند تابعی تعریف کند تا هنگام دریافت پاسخ از طرف سرور اجرا شود. این تابع باید درون خصوصیت onreadystatechange نوشته شود:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var 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", true);
  xhttp.send();
}
</script>

</body>
</html>

مشاهده ی خروجی

البته بعدا بیشتر در مورد این خصوصیت صحبت خواهیم کرد.

درخواست های همگام (Synchronous)

برای ارسال چنین درخواست هایی باید پارامتر سوم در دستور ()open را روی False قرار دهید:

xhttp.open("GET", "ajax_info.txt", false);

برخی اوقات از این مورد برای تست کردن سریع درخواست استفاده می شود و از آنجایی که کد منتظر پاسخ خواهد ماند و دیگر کاری نمی کند، نیازی به استفاده از onreadystatechange نخواهیم داشت:

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "ajax_info.txt", false);
  xhttp.send();
  document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>

</body>
</html>

مشاهده ی خروجی

هشدار: درخواست های همگام (async = false) اصلا پیشنهاد نمی شوند چرا که تا پاسخی دریافت نکنند از اجرای جاوا اسکریپت جلوگیری می کنند، بنابراین جاوا اسکریپت متوقف خواهد شد تا زمانی که پاسخی برای درخواست ارسالی پیدا شود. متوجه مشکل می شوید؟ اگر سرور شلوغ یا ضعیف باشد، پاسخ دیر خواهد رسید بنابراین برنامه و وب سایت شما یا هنگ می کند و یا از کار می افتد. در واقع درخواست های همگام در پروسه ی حذف از دنیای وب قرار دارند اما حذف کامل‌شان چند سالی طول خواهد کشید. حتی قسمت توسعه دهندگان (developers) مرورگر های مدرن در مورد استفاده از درخواست های همگام هشدار می دهند و ممکن است در صورت برخورد با چنین درخواستی یک خطای InvalidAccessError نمایش دهند.

امیدوارم از این قسمت لذت برده باشید.