通过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