W3.JS Data Servers
Dynamic Data
The data used in the previous chapter static data fetched from a server.
The server code for fetching dynamic data from a database can be written in many different languages.
Here are some examples:
Server Running PHP and MySQL
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("myServer", "user", "pass", "myDB");
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp ='{"customers":['.$outp.']}';
$conn->close();
echo($outp);
?>
Cross-Site HTTP Requests
Requests for data from a different server (other than the requesting page), are called cross-site HTTP requests.
Cross-site requests are common on the web. Many pages load css, images, or scripts from different servers.
However, in modern browsers, HTTP requests from scripts are restricted to the same site for security reasons.
The following line (in the PHP example above) allows access to the page from a cross-site:
header("Access-Control-Allow-Origin: *");
Server Running Node.js and MySQL
var express = require('express');
var app = express();
app.get('/', function (req, res) {
var sql = require("mssql");
var config = {user:'user', password:'pass', server:'myServer', database:'myDB'};
sql.connect(config, function (err) {
if (err) console.log(err);
var request = new sql.Request();
request.query('SELECT CompanyName, City, Country FROM Customers', function (err, recordset) {
if (err) console.log(err)
res.send(recordset);
});
});
});
var server = app.listen(5000, function () {
console.log('Server is running..');
});
Server Running ASP.NET, Razor and SQL Lite
@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("myDB");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + ","
outp = outp + c + "City" + c + ":" + c + @row.City + c + ","
outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}"
}
outp ="{" + c + "customers" + c + ":[" + outp + "]}"
@outp
Server Running PHP and MS Access
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");
$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=myDB.mdb");
$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while (!$rs->EOF) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
$rs->MoveNext();
}
$outp ='{"customers":['.$outp.']}';
$conn->close();
echo ($outp);
?>
Server Running ASP.NET, VB and MS Access
<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=myDB.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")
outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","
outp = outp & c & "City" & c & ":" & c & x("City") & c & ","
outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}"
next
outp ="{" & c & "customers" & c & ":[" & outp & "]}"
conn.close
response.write(outp)
%>