WPF/E is Ajax

做一个从数据库读取数据然后在页面展示出来的矩阵图谱。
 
对应的WebForm1.xaml的XAML文件。

 
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="javascript:onLoaded" Name="MainCanvas">
<Canvas Name="CanvasRisk" Background="#f8f8f8ff" Width="600" Height="500" >
<TextBlock FontSize="20"
FontWeight="Bold"
Canvas.Top="20" Canvas.Left="20" Text="test">
<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop Color="SlateBlue" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="353" Text="0"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="320" Text="1"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="290" Text="2"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="260" Text="3"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="230" Text="4"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="200" Text="5"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="170" Text="6"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="140" Text="7"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="110" Text="8"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="40" Canvas.Top="80" Text="9"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="80" Canvas.Top="353" Text="1"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="110" Canvas.Top="353" Text="2"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="140" Canvas.Top="353" Text="3"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="170" Canvas.Top="353" Text="4"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="200" Canvas.Top="353" Text="5"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="230" Canvas.Top="353" Text="6"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="260" Canvas.Top="353" Text="7"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="290" Canvas.Top="353" Text="8"></TextBlock>
<TextBlock FontSize="12" Canvas.Left="320" Canvas.Top="353" Text="9"></TextBlock>
<Ellipse Height="10" Width="10" Canvas.Left="60" Canvas.Top="130"
Stroke="Red" StrokeThickness="1" Fill="Black"/>
<!-- Create Rectange(300*300), top:50 left:50-->
<Rectangle Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="300" Width="300" Canvas.Left="50" Canvas.Top="50" Opacity="0.5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Name="gradientStop1" Color="Green" Offset="0.0"/>
<GradientStop Name="gradientStop2" Color="Yellow" Offset="0.5" />
<GradientStop Name="gradientStop3" Color="Red" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Canvas>

上面的代码准备好我们工作的画布。在顶部节点Loaded="javascript:onLoaded"中，代表在开始自动加载js脚本，这个脚本中我们要动态的获取应该在矩阵上点的点，而这些点是从数据库中读取的数值。上面一连串的TextBlock是在横纵坐标上点的值（1～9）。再下面的Rectangle试我们画的一个300*300的矩阵。坐标都将落在这个矩阵图上面，GradientStop有3个渐变过程，让我们直观的看到这些点落在什么颜色上，红色就为危险区域了。

下面我们利用XMLHTTP与服务器上的Webservice通讯，WebService的程序从略。

//获得XML方式一 XMLDOM
function initGetRisk1()
{
xmldoc =new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("WebServiceRisk.asmx/GetRiskInfo?YearID=2");
alert(xmldoc.xml);
analyseXML(xmldoc);
}

//获得XML方式二 XMLHTTP
function initGetRisk2()
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var xmldoc =new ActiveXObject("Microsoft.XMLDOM");
var serverURL="WebServiceRisk.asmx/GetRiskInfo?YearID=2";
xmlhttp.Open("GET",serverURL, false);
xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8");
xmlhttp.SetRequestHeader ("SOAPAction","http://tempuri.org/WPFEJSApplication1");
xmlhttp.Send();
var result = xmlhttp.status;
if(result==200)
{
   
xmldoc.loadXML(xmlhttp.responseText);
//do some paint here
}
xmlhttp = null;
return xmldoc;
}

除了SOAP外，事实上也可以利用JSON来传递数据。

var wpfe;
var CanvasRisk;
function onLoaded(sender, args)
{
wpfe = document.getElementById("wpfeControl1");
CanvasRisk = sender.findName("CanvasRisk");
BuildRiskPoint();
}
function BuildRiskPoint()
{
xmldoc = initGetRisk2();
//alert(xmldoc.xml);
nodeList=xmldoc.documentElement.getElementsByTagName("Table");
for (i=0;i<nodeList.length;i++)
{
var analyseID;
var riskTypeName;
var riskTypeDesc;
var frequency;
var effect;
var measure;
analyseID = nodeList(i).selectSingleNode("AnalyseID").text;
riskTypeName = nodeList(i).selectSingleNode("RiskTypeName").text;
riskTypeDesc = nodeList(i).selectSingleNode("RiskTypeDesc").text;
frequency = parseInt(nodeList(i).selectSingleNode("Frequency").text);
effect = parseInt(nodeList(i).selectSingleNode("Effect").text);
measure = nodeList(i).selectSingleNode("Measure").text;
var x = getXPoint(frequency);
var y = getYPoint(effect);
var riskPoint = "<Ellipse Height='10' Width='10' Canvas.Left='" + x + "' Canvas.Top='" + y + "' Stroke='Red' StrokeThickness='1' Fill='Black'/>";
//var riskPoint = "<Ellipse Height='10' Width='10' Canvas.Left='130' Canvas.Top='130' Stroke='Red' StrokeThickness='1' Fill='Black'/>";
var newOddPage = wpfe.createFromXaml(riskPoint);
CanvasRisk.children.add(newOddPage);
}
}
function getXPoint(x)
{
return (x*30 + 50)
}
function getYPoint(y)
{
return (y*30 + 50)
}

小结：WPE 事实上更象一种改良的Ajax，它提供了比HTML更好的表现元素，并可利用AJAX的技术取得更好的表现力。