Ajax主要的功能是實現了瀏覽器端 異步 訪問服務器：通過瀏覽器的XMLHttpRequest對象發出小部分數據，
與服務端進行交互，服務端返回小部分數據，然後更新客戶端的部分頁面。

下圖是一次請求成功的信息

前端代碼：

// GET觸發
let search = document.getElementById(‘search‘);
// GET提交的表單數據
let keyword = document.getElementById(‘keyword‘);
// POST觸發
let save = document.getElementById(‘save‘);
// POST提交的表單數據
let staffName = document.getElementById(‘staffName‘);
let staffNumber 
 
= document.getElementById(‘staffNumber‘);
let staffSex = document.getElementById(‘staffSex‘);
let staffJob = document.getElementById(‘staffJob‘);
// 返回信息demo呈現
let searchResult = document.getElementById(‘searchResult‘);
let creatResult = document.getElementById(‘creatResult‘);

// GET請求
search.addEventListener(‘click‘, () => {
  let request 
 
= new XMLHttpRequest();
  request.open(‘GET‘, `service.php?number=${keyword.value}`);
  request.send(null);
  request.addEventListener(‘readystatechange‘, () => {
    if (request.readyState === 4 && request.status === 200) {
      // 後臺返回的json對象轉為js對象
      // 處理json時用JSON.parse(request.responseText)相比eval()不會執行json中的js腳本比較安全
 

      let jsonData = JSON.parse(request.responseText);
      // 判斷是否錯誤信息需要和後臺約定一個json對象
      if (jsonData.success) {
        searchResult.innerText = jsonData.msg;
      } else {
        searchResult.innerText = jsonData.msg;
      }
    }
  })
})
// POST請求
save.addEventListener(‘click‘, () => {
  let request = new XMLHttpRequest();
  request.open(‘POST‘, `service.php`);
  //POST必須設置Content-Type的值在open與send之間
  request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  //構造一下要發送的表單數據再用send提交
  let data = `name=${staffName.value}&number=${staffNumber.value}&sex=${staffSex.value}&job=${staffJob.value}`;
  request.send(data);
  request.addEventListener(‘readystatechange‘, () => {
    if (request.readyState === 4 && request.status === 200) {
      // 後臺返回的json對象轉為js對象
      // 處理json時用JSON.parse(request.responseText)相比eval()不會執行json中的js腳本比較安全
      let jsonData = JSON.parse(request.responseText);
      // 判斷是否錯誤信息需要和後臺約定一個json對象
      if (jsonData.success) {
        creatResult.innerText = jsonData.msg;
      } else {
        creatResult.innerText = jsonData.msg;
      }
    }
  })
})

後臺PHP代碼：

<?php
//設置頁面內容編碼格式utf-8
//header("Content-Type:text/plain;charset=utf-8");//響應格式純文本
header("Content-Type:application/json;charset=utf-8");//服務器端返回給的格式是json字符串
// 跨域header(‘Access-Control-Allow-Origin:*‘);//允許所有來源訪問
// 跨域header(‘Access-Control-Allow-Method:POST,GET‘);//允許訪問的方式
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type:application/javascript;charset=utf-8");

//定義一個多維數組，包含員工信息，每條員工信息為一個數組
$staff=array
  (
    array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>"總經理"),
    array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"開發工程師"),
    array("name"=>"黃蓉","number"=>"103","sex"=>"女","job"=>"產品經理")
  );
//判斷如果是get請求，則進行搜索；如果是post請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if($_SERVER["REQUEST_METHOD"]=="GET"){
  search();//搜索
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
  create();//新建
}
//搜索功能
function search(){
  // 跨域請求時追加 $jsonp=$_GET["callback123"];
  //超全局變量$_GET和$_POST用於收集表單數據
  // 檢測url中有沒有number字段
  if(!isset($_GET["number"])||empty($_GET["number"])){
    // 如果沒傳值就返回給客戶端下面這個json對象
    echo ‘{"success":false,"msg":"請輸入員工編號"}‘;
    return;
  }
  //函數之外聲明的變量擁有Global作用域，只能在函數以外進行訪問。
  //global關鍵詞用於訪問函數內的全局變量
  global $staff;
  // 瀏覽器傳過來的number字段
  $number=$_GET["number"];
  $result = ‘{"success":false,"msg":"沒有找到員工。"}‘;
  // 跨域請求時改為$result = $jsonp.‘({"success":false,"msg":"沒有找到員工。"})‘;

  //遍歷$staff多維數組，查找鍵值為number的員工是否存在，如果存在，則修改並返回結果
  foreach ($staff as $value) {
    if($value["number"]==$number){
      $result = ‘{"success":true,"msg":"找到員工：員工編號：‘ . $value["number"] . 
              ‘，員工姓名：‘ . $value["name"] . 
              ‘，員工性別：‘ . $value["sex"] . 
              ‘，員工職位：‘ . $value["job"] . ‘"}‘;
      break;
    }
  }
  echo $result;//返回結果
}

//創建員工
function create(){
  //判斷信息是否填寫完全
  //如果找不到name值或者值為空,就返回參數錯誤信息不全
  if(!isset($_POST["name"])||empty($_POST["name"])
    ||!isset($_POST["number"])||empty($_POST["number"])
    ||!isset($_POST["sex"])||empty($_POST["sex"])
    ||!isset($_POST["job"])||empty($_POST["job"])){
    //參數不齊時返回客戶端的json對象
    echo ‘{"success":false,"msg":"員工信息填寫不全"}‘;
    return;
  }
  //TODO:獲取POST表單數據並保存到數據庫
  //否則提示保存成功
  /*echo "員工：".$_POST["name"]."信息保存成功！";*/
  echo ‘{"success":true,"msg":"員工：‘.$_POST["name"].‘信息保存成功！"}‘;
}

?>

AJAX結合PHP整理復習