通过Microsoft.XMLDOM实现简单的Ajax（更新）

今天在在做公司的搜索关键词功能，因为哪个页面要做成静态HTML的，所以想了几个方法，昨天晚上快下班的时候上头才说要改，就急急忙忙地改了一下，实现的方法是用 来读这些动态的数据，但是因为页面上搜索有条件，切换条件是直接用js来处理的，所以，在切换的时候，热门关键词都要跟在改变。但问题随之而来！ 这个区域我没有办法在页面不刷新的情况下重新调用它。所以一直没有解决。
今天试着被调用的态页面反回XML结构的，再用 Js去读这个结果，再输入，果然成功了。呵呵，也就是一个简单的Ajax应用.

动态页面生成XML的代码：

protected void Page_Load(object sender, EventArgs e)
    {
        Response.ContentType = ”text/xml”;

    }

    生成XML#region 生成XML
    private void CreateXML()
    {
        string strContent = ””;

        for (int i = 0; i < 100; i++)
        {
            strContent += ”” + ”关键词” + i.ToString() + ”]]>” + i.ToString() + ””;
        }

        WriteXML(strContent);
    }
    #endregion

    输出XML#region 输出XML
    private void WriteXML(string strContent)
    {
        Response.Write(”” + strContent + ””);
    }
    #endregion



返回的XML代码结构：

<keywords>
    <item>
        <word>关键词1word>
        <type>1type>
    item>
    <item>
        <word>关键词2word>
        <type>2type>
    item>
    <item>
        <word>关键词2word>
        <type>2type>
    item>
    <item>
        <word>关键词4word>
        <type>4type>
    item>
    <item>
        <word>关键词5word>
        <type>5type>
    item>
keywords>



Javascript读取的方法,FileName参数是被调用的动态页面，panelID 是最终要显示的区域ID名称
重点：xmlDoc.async=”false”; 异步方式读取

  function ReadKeywords(filename,panelID)
    {
        var panel  = $(panelID);
        //取得取后输出的区域，来自参数
        var strContent = ””;    
        panel.innerHTML = ”载入中”;
        var xmlDoc = new ActiveXObject(”Microsoft.XMLDOM”);       
        xmlDoc.async=”false”;
        //去读用动态页面，并读到结果的XML
        xmlDoc.load(filename); 
        //选定节点
        var item = xmlDoc.selectNodes(”keywords/item”); 
        //没内容时的处理  
        if(item == null)         
            return ;                
        if(item.length == 0)   
            return ;    
        //通过循环组合内容
        for(var i=0;i<item.length;i++)
        {
            strContent += ””
            strContent += ””+ item[i].selectSingleNode(”word”).text+”&type=”+item[i].selectSingleNode(”type”).text+”’>”+ item[i].selectSingleNode(”word”).text+””;
            strContent += ” ”;
        }    
        //显示到区域上面
        panel.innerHTML = strContent;
    }


HTML调用的代码：

//说明：
//现在以上面的 动态页面命名为 ”getkeyword.aspx“ ，Javascript存成 Script.js
//HTML调用时的例子
<script type=”text/javascript” src=”script.js”>script>
<div id=”panelKeyword”>
    这个地方会显示最终的关键词
div>
<script type=”text/javascript”>
    ReadKeywords(”getkeyword.aspx”,”panelKeyword”);
script>


提醒一下：HTML与XML里面的代码可能会有错别字的地方，因为是用记事本打出来的，如果真的有错的地方，请大家多多包涵..本文主要是讲的方法，而不是给代码，代码拿来也没什么用，网上好的Ajax框架多着呢，呵呵

应用效果: http://www.uctoy.com