No ide o to ze nic podobne som nikde na nete nenasiel myslim ako spojenie HTML - AJAX - SVG ale napisem zdrojaky vsetkych suborov ako mam.
svg_ajax.svg
Kód:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="makeShape(evt)">
<script type="text/javascript" xlink:href="kruh.js"/>
</svg>
kruh.jsKód:
var xhr = vytvorXHR();
function vytvorXHR(){
var xhr;
try{
xhr = new XMLHttpRequest();
}catch(e){//pro případ starší verze prohlížeče
var MSXmlVerze = new Array('MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.5.0','MSXML2.XMLHttp.4.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp.2.0','Microsoft.XMLHttp');
for(var i = 0; i <= MSXmlVerze.length; i ++){
try{
xhr = new ActiveXObject(MSXmlVerze[i]);
//alert(MSXmlVerze[i]);
break;
}catch(e){
//vzniklou chybu ignoruji a pokračuji nastavením další verze
}
}
}
if(!xhr)
alert("Došlo k chybě při vytváření objektu XMLHttpRequest!");
else
return xhr;
}
function prectiSoubor(){
if(xhr){
try{
xhr.open("GET",url,true);
xhr.onreadystatechange = ctiOdpoved;
xhr.send(null);
}catch(e){
alert("Nelze se připojit k serveru:\n" + e.toString());
}
}else{
alert("Funkce \"precitSoubor()\": chybí objekt XMLHttpRequest");
}
}
function ctiOdpoved(){
if(xhr.readyState == 4){
if(xhr.status == 200){
try{
var XMLRes = xhr.responseXML;
//zachycení chyb IE a Opery
if(!XMLRes || !XMLRes.documentElement){
throw("Chybná struktura XML:\n"+xhr.responseText);
}
//zachycení chyb firefox
var rootNodeName = XMLRes.documentElement.nodeName;
if(rootNodeName == "parsereerror"){
throw("Chybná struktura XML:\n"+xhr.responseText);
}
}catch(e){
alert("Chyba při čtení odpovědi:"+e.toString());
}
}else{
alert("Požadavek HTTP není v pořádku.")
}
}
}
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}
Toto vsetko mi v pohode bezi vykresli sa kruh ak si prezriem svg subor. No a teraz napisem zdrojak html suboru ako mam.
ajax1.htmlKód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="sk">
<head>
<meta http-equiv="content-type" content="aplication/xhtml+xml; charset=windows-1250" />
<title>AJAX</title>
</head>
<body>
<script type="text/javascript" src="kruh.js"></script>
<input type="button" value="Zobraz" onclick="">
<br>
<embed src="svg_ajax.svg" width="200" height="200" type="image/svg+xml" />
</body>
</html>
Na onclick nemam priradenu ziadnu funkciu pretoze nic mi nefungovalo ked som sa pokusal o nieco. Ale nejak takto na stlacenie tlacidla alebo cez select menu je vobec mozne aby sa zmenila farba alebo iny parameter vykreslovaneho kruhu v svg?
