به طور عادی ارتباط صفحه‌ی ما با سرور مربوط به زمانیه که صفحه درحال آماده‌سازی برای فرستاده شدن به سمت کلاینت هست، یعنی وقتی که url رو وارد کردیم و enter رو زدیم. طبیعتا نیاز بود تا برای هر تغییر توی صفحه، دوباره کل صفحه رو به علاوه‌ی تغییرات جدید، از سرور درخواست کنیم. خب اینکار هم منابع زیادی رو هدر میداد و هم سرعت و زیبایی کار جالبی نداشت. برای رفع این نیاز ajax وارد دنیای اینترنت شد و تحول بزرگی رو ایجاد کرد. امروزه در صفحات وب برای ارتباط برقرارکردن با سرور از ajax استفاده میکنیم. ajax مخخف Asyncronous Javascript And XML به معنی جاوااسکریپت و xml غیر همزمان هست و به کمک اون میتونیم درخواست‌های خودمون به سرور رو در پشت‌صحنه انجام بدیم و بعد از دریافت اطلاعات مورد نیاز، فقط بخش موردنظر از صفحمون رو تغییر بدیم.

با ما همراه باشید تا اول از همه ارتباط ajax از طریق جاوااسکریپت بدون library رو بررسی کنیم که یک مقدار پیچیدگی بیشتری داره؛ و بعد نحوه‌ی استفاده از اون توسط jquery رو با هم ببینیم.

استفاده از ajax توسط Pure js(جاوااسکریپت بدون استفاده از library)

1- قدم اول برای برقراری ارتباط، ساخت شیء XMLHttpRequest هست. برای اینکار کد زیر رو مینویسیم:

var xhr = false;
if (window.XMLHttpRequest) {
 xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

در خط اول متغیری به نام xhr تعریف کردیم. در خط ۲ و ۳ گفتیم که اگر مرورگر از شیء XMLHttpRequest پشتیبانی میکرد، یک نمونه از این شیء رو در متغیر ما بریز. در خط ۴ و ۵ هم گفتیم که اگر از ActiveXObject پشتیبانی میکرد یک نمونه از این شیء رو در متغیری که تعریف کردیم بریز. این اتفاق وقتی میفته که از مرورگر IE6 به قبل استفاده کنیم و مجبور باشیم که ActiveX رو به‌کار ببریم.
بقیه مرورگرها از XMLHttpRequest پشتیبانی میکنند.

۲- در قدم دوم چک میکنیم که متغیر xhr مقداردهی شده یا نه. این کار رو با کد زیر انجام میدیم:

if (xhr) {

}

3- قدم سوم مربوط به مشخص کردن نوع ارتباط ما با سرور هست. برای این کار از دو متد open و setRequestHeader که هردو مربوط به شیء xhr ما هستند استفاده میکنیم.

• اگر از GET استفاده میکنید، نیازی به استفاده از setRequestHeader ندارید. ولی باید اطلاعات ارسالی رو به انتهای url بچسبونید. که در اینجا user_id رو برای سرور ارسال میکنیم.

if (xhr) {
 xhr.open("GET", "http://192.168.0.1:8080/get_user?user_id=" + user_id);
}

• اگر از POST استفاده میکنید، نیاز هست تا header مربوط به اون رو مشخص کنید. خط دوم و سوم رو میتونید عینا در کد خودتون کپی کنید و به غیر از url، معمولا تغییر دیگه‌ای نداره.

if (xhr) {
 xhr.open("POST", "http://192.168.0.1:8080/get_user");
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}

دقت کنید که در خط دوم نوع ارتباطمون رو مشخص کردیم که از نوع GET، POST و … هست.

۴- بعد از انجام سه قدم قبلی، حالا در قدم چهارم میتونیم اطلاعات خودمون رو به سرور ارسال کنیم. ارسال اطلاعات به سرور توسط متد send انجام میشه.

• اگر از GET استفاده میکنید، تنها کافیه که متد send رو فراخونی کنید، چون اطلاعات رو قبلا در url نوشتید:

xhr.send();

• اگر از POST استفاده میکنید، اطلاعات ارسالی خودتون رو به فرمت زیر بفرستید:

name=value&name=value

بین هر جفت name، value یک علامت & قرار میدیم.

کد زیر متد send مربوط به POST رو نمایش میده:

xhr.send("user_id=" + user_id);

5- قدم پنجم که قدم آخر محسوب میشه، دریافت اطلاعات از سرور هست. برای اینکار کد زیر رو مینویسیم:

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = xhr.responseText;
    console.log(response);
  }
}

در خط اول به شیء xhrی که ساخته بودیم گفتیم که در صورت تغییر مقدار readyState خط‌های ۲ تا ۵ رو اجرا کن. در خط ۲ بررسی کردیم که مقدار readyState برابر ۴ باشد و مقدار status برابر ۲۰۰؛ این خط رو هم میتونید عینا کپی کنید چون معمولا تغییری نمیکنه و فقط برای چک کردن اینه که همه چیز درست اتفاق افتاده باشه. در خط ۳ هم مقدار responseText رو خوندیم و ذخیره کردیم و در خط ۴ هم نمایش دادیم. اگر بخوایم از سرور xml دریافت کنیم به جای responseText از responseXML استفاده میکنیم.

کد کامل این قسمت مربوط به POST:

var xhr = false;
if (window.XMLHttpRequest) {
 xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

if (xhr) {
 xhr.open("POST", "192.168.0.1:8080/get_user");
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4 && xhr.status == 200) {
 var response = xhr.responseText;
 console.log(response);
 }
 }
 xhr.send("user_id=" + user_id);
}

کد کامل این قسمت مربوط به GET:

var xhr = false;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

if (xhr) {
  xhr.open("GET", "192.168.0.1:8080/get_user?user_id" + user_id);

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = xhr.responseText;
      console.log(response);
    }
  }
  xhr.send();
}

استفاده از ajax توسط jQuery

ایجاد ارتباط با سرور به‌وسیله‌ی jquery خیلی ساده تره. مثلا برای ایجاد درخواست GET فقط نیازه که کد زیر رو بنویسید:

$.get("192.168.0.1:8080/get_user", {user_id: user_id} function(data, status){
 console.log("data: " + data);
});

و برای POST کد زیر رو:

$.post("192.168.0.1:8080/get_user", {user_id: user_id}, function(data, status){
  console.log("data: " + data);
});

در هردوی این درخواست‌ها، url رو به عنوان آرگومان اول و اطلاعات ارسالی رو به عنوان آرگومان دوم به تابع میدیم؛ و اطلاعاتی که سرور فرستاد رو توسط متغیر data دریافت میکنیم.

بقیه‌ی کارهای تکراری ایجاد شیء، چک کردن status و … توسط jQuery انجام میگیره و نیازی به نگرانی درمورد اونها نیست.

موفق باشید.