On this developed technology world people are busy with their regular business so they make order some fast foods via using online ordering but they anticipate ordered food so the technology came with a solution faster process for the ordering food, let's know how the process works inside the just 3 single pages which is html,Css,Javascript
Requirement: make a account in 000webhosting to test this process
"index.html"
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
<h3>KFC Bucket</h3>
Enter the food you would like to order:
<input type="text" id="userInput"/>
<div id="underInput"/>
</body>
</html>
-------------------------------------------------------------------
"foodstore.php"
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo '<response>';
$food = $_GET['food'];
$foodArray = array('pizza','burger','KFC','submarine','dramer','hotdog');
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'.$food.'!';
echo '</response>';
?>
-------------------------------------------------------------------
"foodstore.js"
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
var xmlHttp;
//internet explorer
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = false;
}
}
//google chrome
else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp)
alert("cant create that object!");
else(
return xmlHttp;
}
//process function on html
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
food = encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET", "foodstore.php?food=" + food, true");
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}else{
setTimeout('process()',1000);
}
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML = '<span style="color:blue">' + message + '</span>';
setTimeout('process()',1000);
}else{
alert('Semething went wrong');
}
}
}
Requirement: make a account in 000webhosting to test this process
"index.html"
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
<h3>KFC Bucket</h3>
Enter the food you would like to order:
<input type="text" id="userInput"/>
<div id="underInput"/>
</body>
</html>
-------------------------------------------------------------------
"foodstore.php"
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo '<response>';
$food = $_GET['food'];
$foodArray = array('pizza','burger','KFC','submarine','dramer','hotdog');
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'.$food.'!';
echo '</response>';
?>
-------------------------------------------------------------------
"foodstore.js"
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
var xmlHttp;
//internet explorer
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = false;
}
}
//google chrome
else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp)
alert("cant create that object!");
else(
return xmlHttp;
}
//process function on html
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
food = encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET", "foodstore.php?food=" + food, true");
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}else{
setTimeout('process()',1000);
}
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML = '<span style="color:blue">' + message + '</span>';
setTimeout('process()',1000);
}else{
alert('Semething went wrong');
}
}
}
