[AJAX] Lesson 2 - HTML佈局與XML內文

張貼者： 日期：

簡介

Bucky Roberts以一個簡單範例程式來解說AJAX常見的應用，那麼在這篇就先說明一下他的範例佈局(網頁元素與排版)及XML的內文，由於JS的重點比較多，所以會再下一篇解說JS程式碼的重點與處理內容。


內文

範例佈局HTML:
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="foodstore.js"></script> <!--引入的JS程式碼檔-->
</head>
<body onload="process()">
    <h3>The Chuff Bucker</h3>
    Enter the food you would like to order:
    <input type="text" id="userInput" />
    <div id="underInput" />
</body>
</html>
 
HTML這邊沒什麼好講的，呈現的結果如下圖:


 
接著是繼續完成[AJAX] Lesson 1 - 介紹與產生XML檔筆記中XML檔的內文。

XML:
 <?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

echo '<response>';
$food = $_GET['food'];
$foodArray = array('tuna','bacon','beef','ham');
if(in_array($food,$foodArray))
    echo 'We do have '.$food.'!';
elseif ($food=='')
    echo 'Enter a food you idiot';
else
    echo 'Sorry punk we dont sell no '.$food.'!';
echo '</response>';
?>
 
首先$food = $_GET['food']是要JS程式碼來配合的(下一篇筆記會介紹)，使用者在文字欄裡所輸入的文字都會以food的資料名稱來命名。$foodArray是模擬資料庫，其意思是資料庫含有的食物名稱都在此陣列裡頭，用來即時回應使用者是否有此食物，而回應的內容就是if、elseif、else程式區塊的內容。in_array()函式是用來判斷陣列是否有此元素，前面參數是放判斷元素，後面參數是放陣列，因此in_array($food,$foodArray)的意思就是$foodArray含有的元素有無$food這樣的值。

參考

  1. Bucky Roberts的Youtube教學影片

留言

張貼留言