W3.JS Data Bedieners


Dinamiese data

Die data wat in die vorige hoofstuk gebruik is statiese data wat van 'n bediener af gehaal is.

Die bedienerkode vir die haal van dinamiese data vanaf 'n databasis kan in baie verskillende tale geskryf word.

Hier is 'n paar voorbeelde:


Bediener met PHP en 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-versoeke

Versoeke vir data vanaf 'n ander bediener (behalwe die versoekende bladsy), word kruiswerf HTTP-versoeke genoem.

Kruiswerfversoeke is algemeen op die web. Baie bladsye laai css, beelde of skrifte vanaf verskillende bedieners.

In moderne blaaiers word HTTP-versoeke van skrifte egter beperk tot dieselfde webwerf vir sekuriteitsredes.

Die volgende reël (in die PHP-voorbeeld hierbo) laat toegang tot die bladsy vanaf 'n kruiswerf toe:

header("Access-Control-Allow-Origin: *");

Bediener met Node.js en 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..');
});

Bediener met ASP.NET, Razor en 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

Bediener met PHP en 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);
?>

Bediener met ASP.NET, VB en 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)
%>