SVG und AJAX Einführung


Auch hier zeigt sich die Verschwandschaft zwischen SVG und XHTML/HTML5. Mit httpRequests können externe Inhalte in Elemente des Dokuments geladen werden.



<?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;

?>

medix medix
93#71##0#0