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

 

新建一个数据访问层

 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;

    }

 

新建一个一般处理程序

 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();
    }

 

前台页面


        <select id="supplier" onchange="changeSelect(this)">
            
<option value="-1">请选择提供商</option>
         
</select>

ajax脚本

 


//        {
//
            try 
//
            {
//
                request = new XMLHttpRequest();
//
            } 
//
            catch (trymicrosoft) 
//
            {
//
                try 
//
                {
//
                    request = new ActiveXObject("Msxml2.XMLHTTP");
//
                } 
//
                catch (othermicrosoft) 
//
                {
//
                    try 
//
                    {
//
                        request = new ActiveXObject("Microsoft.XMLHTTP");
//
                    } 
//
                    catch (failed) 
//
                    {
//
                        request = false;
//
                    }
//
                }
//
            }
//
         }

给按钮的函数

 getSupplier(){
            //createRequest();
            request=new XMLHttpRequest();
            request.open(
"POST","Handler.ashx?id=suppliers",true);
            request.onreadystatechange
=setSupplier;
            request.send(
null);
            
        }

 

 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);
                        
                    }
                    
                    
                }
            }
         }

 

相关文章:

  • 2021-07-23
  • 2021-05-18
  • 2022-12-23
  • 2021-12-06
  • 2022-12-23
  • 2021-12-06
  • 2021-12-06
猜你喜欢
  • 2022-12-23
  • 2021-10-03
  • 2022-03-02
  • 2021-06-21
  • 2022-01-16
  • 2021-05-30
  • 2022-12-23
相关资源
相似解决方案