svg (scalable vector graphics) tutorials
Dass es sich um ein SVG-Dokument handelt wird in der header-Funktion festgelegt.
Die Dateien werden als PHP Dateien abgespeichert - z.B.
myFirstSvgAjaxApp.php
Nach dem Ajax-Request werden die Daten in einer zusätzlichen Datei verarbeitet – in diesem
Beispiel
content.php genannt.
<?php
header("Content-Type: image/svg+xml");
<!-- Javascript / Ecma-script -->
<script language="Javascript"><![CDATA[
//// Create Request Object
function createRequestObject() {
var ro;
var browser = navigator.appName;
//// Check for Adobe SVG Viewer in Explorer
if(browser == "Adobe SVG Viewer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
return ro;
}
var http = createRequestObject();
//// Send Request Funktion
function sndReq(ausgabe) {
http.open('POST', 'content.php');
http.onreadystatechange = handleResponse;
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//// Variable ausgabe (mit Inhalt My Text wird versandt)
http.send('NewAJAXVariable ='+ ausgabe);
}
//// Request verarbeiten
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
if(response.indexOf('|' != -1)) {
update = response.split('|');
//// Inhalt von content.php wird in Container content geladen
svgdoc.getElementById("content").getFirstChild().setData(response);
}}
}
]]></script>
<svg>
/// Textcontainer mit default Inhalt Old Text
<text id="content" transform="translate(90 90)" font-size="11" fill="#343434" >Old Text</text>
/// Button mit Javascript Funktionsaufruf und Inhalt New Text
<rect width="80" height="15" x="530" ry="12" y="10" fill="black" onclick="sndReq('New Text')"/>
</svg>
<?php
//// Variable validieren
$NewVariable = $_POST['NewAJAXVariable'];
//// Ausgabe
echo $NewVariable;
?>
