预备知识点
nodeName 节点的名字（文本节点为#text）
nodeValue 节点的值
childNodes nodelist 子节点集合
previousSibling node 前一个兄弟节点
nextSibling node 后一个兄弟节点
访问一个dom模型的根节点是 moxing.documentElement;
比如document.documentElement访问的是<html />节点
访问一个节点的文本可以用node.text或者node.childNodes[0].nodeValue(节点的第一个子节点的值)
创建一个table
var otable=document.createElement("table");
//create the tbody
var oTBody=document.createElement("tbody");
//add tbody
otable.appendChild(oTBody);
oTBody.insertRow(0);
oTBody.rows[0].insertCell(0);
oTBody.rows[0].cells[0].appendChild(document.createTextNode('文本节点'));
………………
//最后 把otable添加到html的body里面
document.body.appendChild(otable);
新建一个数据访问层
返回datasetpublic static DataSet getSupplier() {
Con.Open();
SqlCommand com=new SqlCommand("select * from suppliers",Con);
SqlDataAdapter sda = new SqlDataAdapter(com);
DataSet ds = new DataSet();
sda.Fill(ds, "suppliers");
con.Close();
return ds;
}
新建一个一般处理程序
一般处理程序public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
if (context.Request.QueryString["id"] == "suppliers") {
Xml_GetSupplier(context);
}
}
private void Xml_GetSupplier(HttpContext context) {
//获得dataset
DataSet ds = DataAccess.getSupplier();
//用dataset的writexml方法把数据写入xmltextWriter对象
//xmltextWriter写入输出流返回给前台XML结构的数据
XmlTextWriter write = new XmlTextWriter(context.Response.OutputStream, System.Text.Encoding.UTF8);
write.Formatting = Formatting.Indented;
write.Indentation = 4;
write.IndentChar = ' ';
ds.WriteXml(write);
write.Flush();
context.Response.End();
write.Close();
}
前台页面
HTML元素<input type="button" value="获得供应商" onclick="getSupplier()" />
<select id="supplier" onchange="changeSelect(this)">
<option value="-1">请选择提供商</option>
</select>
ajax脚本
新建XMLHTTPREQUEST对象var request;
// function createRequest()
// {
// try
// {
// request = new XMLHttpRequest();
// }
// catch (trymicrosoft)
// {
// try
// {
// request = new ActiveXObject("Msxml2.XMLHTTP");
// }
// catch (othermicrosoft)
// {
// try
// {
// request = new ActiveXObject("Microsoft.XMLHTTP");
// }
// catch (failed)
// {
// request = false;
// }
// }
// }
// }
给按钮的函数
ajaxfunction getSupplier(){
//createRequest();
request=new XMLHttpRequest();
request.open("POST","Handler.ashx?id=suppliers",true);
request.onreadystatechange=setSupplier;
request.send(null);
}
回调函数function setSupplier(){
if (request.readyState == 4){
if (request.status == 200){
var xml=request.responseText;
//加载微软的XML DOM解析库
var doc=new ActiveXObject("Msxml2.DOMDocument");
//加载服务器传过来的XML数据
doc.loadXML(xml);
//alert(xml);
//得到下拉列表
var select=document.getElementById("supplier");
//移除下拉列表原有记录
for(var i=0; i<select.options.length; i++){
select.options.remove(select.options[i]);
}
//通过selectNodes获得所有的的符合XPATH的节点
var suppliers=doc.documentElement.selectNodes("suppliers/CompanyName");
var supplierID=doc.documentElement.selectNodes("suppliers/SupplierID");
// alert(suppliers[0].text);
// alert(suppliers[0].childNodes[0].nodeValue);
// alert(supplierID[0].text);
加入进select下拉列表
for(var i=0; i<suppliers.length; i++){
var option=document.createElement("option");
option.text=suppliers[i].text;
option.value=supplierID[i].text;
select.options.add(option);
}
}
}
}