۲۵
آبان

جلسه ۹۷ : AJAX PHP در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، AJAX PHP در جاوا اسکریپت در واقع به چگونگی دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت در یک صفحه وب اشاره دارد. AJAX چیزی فراتر از ارتباط با وب سرور و یا ارتباط با فایل های XML و نمایش آن ها در صفحات وب دارد، AJAX به شما اجازه می دهد تا با کدهای جاوا اسکریپت به فایل های وب سمت سرور نظیر PHP و ASP نیز ارتباط برقرار کرده و داده هایی از آن استخراج کند. در ادامه ی این بخش با ما همراه باشید.

دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت

در این بخش با ارائه ی یک مثال کامل چگونگی دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت را ارائه کرده ایم.

مثال – دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت

مثال زیر نشان می دهد که چگونه یک صفحه وب می تواند با یک سرور وب ارتباط برقرار کند در حالی که کاربر یک کاراکتر را در یک فیلد ورودی می نویسد:

جستحو در فایل PHP با استفاده از AJAX

تشریح مثال فوق :

در مثال بالا، زمانی که یک کاربر یک کاراکتر را در فیلد ورودی متن می نویسد، یک تابع به نام “()showHint” اجرا می شود.

این عمل توسط رویداد onkeyup انجام می شود.

در اینجا به کد HTML مربوط به آن اشاره شده:

مثال : کد HTML مثال این بخش

<html>
<head>
<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET", "gethint.php?q=" + str, true);
    xmlhttp.send();
  }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form> 
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

<html>

<head>

function showHint(str) {

if (str.length == 0) {

document.getElementById("txtHint").innerHTML = "";

return;

} else {

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText;

}

};

xmlhttp.open("GET", "gethint.php?q=" + str, true);

xmlhttp.send();

}

</script>

</head>

<body>

<p><b>Start typing a name in the input field below:</b></p>

<form>

First name: <input type="text" onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>

</html>

تشریح کد فوق :

ابتدا، اگر فیلد input خالی است (str.length == 0) بررسی شده و در صورت وجود، محتوای txtHint را از placeholder پاک کرده و از تابع خارج می شود.

ام اگر فیلد ورودی خالی نیست، موارد زیر را انجام می شود:

یک شیء XMLHttpRequest ایجاد می شود.
هنگامی که پاسخ سرور آماده است، تابع اجرا می شود.
سپس ارسال درخواست را به یک فایل (gethint.php) در سرور را داریم.
البته توجه داشته باشید که پارامتر q به gethint.php?q=”+str اضافه شده است.
متغیر Str محتوای فیلد ورودی را نگه می دارد.

فایل PHP مربوطه (gethint.php)

فایل PHP آرایه ای از نام ها را بررسی کرده و نام های مربوطه را به مرورگر باز می گرداند:

مثال :

<?php
// 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 = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "") {
  $q = strtolower($q);
  $len=strlen($q);
  foreach($a as $name) {
    if (stristr($q, substr($name, 0, $len))) {
      if ($hint === "") {
        $hint = $name;
      } else {
        $hint .= ", $name";
      }
    }
  }
}

// Output "no suggestion" if no hint was found or output correct values 
echo $hint === "" ? "no suggestion" : $hint;
?>

<?php

// 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 = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""

if ($q !== "") {

$q = strtolower($q);

$len=strlen($q);

foreach($a as $name) {

if (stristr($q, substr($name, 0, $len))) {

if ($hint === "") {

$hint = $name;

} else {

$hint .= ", $name";

}

// Output "no suggestion" if no hint was found or output correct values

echo $hint === "" ? "no suggestion" : $hint;

کلام آخر

AJAX به عنوان ابزاری برای برقراری ارتباط با سرور در جاوا اسکریپت کاربرد های وسیعی دارد که یکی از این موارد که در این مبحث اشاره شد قابلیت دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت می باشد. البته این فقط به دریافت اطلاعات از فایل های XML و یا PHP ختم نشده و شامل فایل های نظیر ASP نیز می شود، که در بخش آتی به آن می پردازیم.

به اشتراک بگذارید

AJAX PHP در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۹۷ : AJAX PHP در جاوا اسکریپت

مقدمه

دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت

مثال – دسترسی به فایل PHP با استفاده از AJAX جاوا اسکریپت

فایل PHP مربوطه (gethint.php)

کلام آخر

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ