‎‎جسن وپي اچ پيJS -‎JSON PHP -‎

‎‎يك كاربرد رايجJSON درخواندن داده از وب سرور و نمايش آن در صفحات وب است .

‎در اين فصل چگونگي تبادل داده بين كلاينت و سرور پي اچ پي‎(PHP server)‎ تشريح ‎ميگردد.

‎‎فايل پي اج پيThe PHP File -‎

PHP‎داراي بعضي توابع پيش بيني شده براي كار با JSON است .شئ ها در PHP مي توانند بوسيله ‎تابع‎‎Json_encode( )‎‎ به رشته اي جسون تبديل گردند .

‎‎مثال ـPHP File

<?php 
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

‎‎جاوااسكريپت كلاينتThe Client JavaScript -‎

‎‎در اين جا، جاوااسكريپت كلاينت از طريقAJAX درخواستي را از فايل PHP فوق فراخوان ميكند .

‎‎مثال ـ استفاده از تابع‎JSON.parse( )‎ براي تبديل نتيجه به يك شئ جاوااسكريپت .

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();

(go to editor for change code and run)==>try it yourself

‎‎آرايه پي اچ پيPHP Array -‎

‎آرايه هايPHP هنگام استفاده از تابع پي اج پي ‎‎json_encode( )‎‎ ‎به فرمت جسون تبديل ميشوند.

‎‎فايل پي اچ پيPHP File -‎

<?php 
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>

‎‎جاوااسكريپت كلاينتThe Client JavaScript -‎

‎در اين جا، جاوااسكريپت كلاينت از طريقAJAX درخواستي را از فايلPHP فوق فراخوان ميكند . اين PHP‎داراي آرايه است .

‎‎مثال ـ استفاده از تابع‎JSON.parse( )‎ براي تبديل نتيجه به يك آرايه جاوااسكريپت.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

(go to editor for change code and run)==>try it yourself

‎‎پي اچ پي و بانك اطلاعاتيPHP Database -‎

‎زبان برنامه نويسيPHP زبان سمت سرور است، وميتواند براي دسترسي به بانك اطلاعاتي استفاده ‎شود.

‎يك بانك اطلاعاتي را روي سرور درنظر بگيريد، ميخواهيم درخواستي از كلاينت ارسال گردد كه ‎ده سطر اول جدولي بنام‎‎"customers‎"‎ را برگشت دهد .

‎در سمت كلاينت بايد رشتهJSON ساخته شود كه تعداد سطر در خواستي را توصيف كند .براي اينكار ‎شئ جاوااسكريپتي معادل ساخته و آن به رشتهJSON مورد نظر تبديل ميشود .اين كار بايد قبل از ‎ارسال درخواست بسرور انجام گردد.

‎‎مثال ـ استفاده از تابع‎JSON.stringify( )‎ براي تبديل شئ به رشته JSON

const limit = {"limit":10};
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET","json_demo_db.php?x=" + dbParam);
xmlhttp.send();

(go to editor for change code and run)==>try it yourself

‎‎تشريح مثال:

‎
• ‎‎تعريف شئي با ويژگي‎‎"limit‎"‎ ومقدارآن يعني تعداد سطر مورد نظر جدول
• ‎‎تبديل شئ فوق به رشته جسوني
• ‎‎ارسال درخواست به فايلPHP با رشته جسوني بعنوان پارامتر
• ‎‎صبر كنيد تا نتيجه درخواست بفرم رشته جسوني برگشت شود.
• ‎‎نمايش نتيجه دريافتي از فايلPHP
‎

‎‎نگاهي به فايل: PHP

<?php 
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

‎‎تشريح فايل: PHP

‎
• ‎در خواست را با استفاده از تابع‎‎json_decode( )‎‎ به يك شئ تبديل ميكند. ‎درخواست همان پارامتر فراخواني فايلPHP است .
• ‎‎دسترسي به بانك اطلاعاتي ، و پرشدن آرايه اي از داده مورد درخواست
• ‎همه نتايج بيك شئ آرايهPHP منتقل ميشود.و اين شئ با تابع ‎‎json_decode( )‎‎‎تبديل به رشته JSON ميشود .
‎

‎مثال ـ در مثال قبلي نمايش نتايج همان فرمJSON دريافتي بود، اما دراين مثال آن به شئ تبديل

‎‎وخاصل مطلوبتري نمايش داده ميشود .نتايج هردو مشاهده كنيد متوجه اختلاف خواهيد شد.

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}

(go to editor for change code and run)==>try it yourself

‎‎متدانتقال داده ـPHP Method=POST

‎‎هنگاميكه داده اي بسرور انتقال ميدهيد، بهتر است از متدPOST استفاده نمائيد .

‎براي ارسال درخواست ايAJAX با استفاده از روشPOST هدر و روش صحيح آنرا مطابق نمونه زير ‎مشخص كنيد .داده هاي ارسال شده به سرور بايد آرگومان متد‎send( )‎ باشد .

‎‎مثال ـ روش ارسالPOST

const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text ="";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

(go to editor for change code and run)==>try it yourself

‎‎تنها اختلاف فايلPHP با متد GET براي در يافت داده مي باشد .

‎‎فايل پي اچ پي متد پست ـPHP File POST Method

<?php 
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

‎‎بجاي استفاده از‎$_GET‎ از ‎$_POST‎ استفاده ميشود .

JS Tutorial آموزش جاوااسکریپت

JS Objects اشیاء جاوااسکریپت

JS Functions توابع جاوااسکریپت

JS Classes کلاسهای جاوااسکریپت

JS Async ناهمزمانی جاوااسکریپت

JS HTML DOM شئ دام

JS Browser BOM شئ مرورگر

JS Web APIs رابط های اپی آی وب

JS AJAX آجکس وجاوااسکریپت

JavaScript JSON

JavaScript vs JQuery

JS Graphics گرافیک جاوااسکریپت

JS References فهرست مطالب