۲۷
تیر

جلسه ۵۲ : بررسی رابطه Ajax و php

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

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

فهرست

مقدمه

با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن و کاربرانی که دوره ی آموزش php 7 را دنبال می کنند. در جلسه گذشته به بررسی کاربرد Ajax در php 7 پرداختیم و در این جلسه که ادامه ای بر جلسه گذشته است؛ به بررسی رابطه Ajax و php می پردازیم تا به صورتی عمیق ماهیت رابطه این دور درک نماییم.

بررسی رابطه Ajax و php

از AJAX برای ایجاد برنامه های تعاملی بیشتر استفاده می شود.

نمونه ای از AJAX PHP

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

AJAX PHP Example

تشریح مثال بالا

در مثال بالا، هنگامی که یک کاربر یک کاراکتر را در فیلد ورودی می نویسد، یک تابع به نام “()showHint” اجرا می شود.
این عمل توسط رویداد onkeyup انجام می شود.
در زیر می توانید این کد 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>

توضیح کد:

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

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

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

“gethint.php”- فایل 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 و MySQL می پردازیم.
با پی وی لرن همراه باشید.

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

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

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

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

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

جلسه ۵۲ : بررسی رابطه Ajax و php

مقدمه

بررسی رابطه Ajax و php

نمونه ای از AJAX PHP

تشریح مثال بالا

“gethint.php”- فایل php

کلام آخر

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

آموزش مقدماتی php 7

PHP7 Forms

PHP7 Advanced

MySQL Database

PHP7 XML

PHP7 - AJAX

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ