ajax实现动态网页静态化

 利用ajax实现动态网页静态化，是目前一个比较流行的网站开发技术。

    在这里，我利用三个页面简单的实现一个效果：

     Default.aspx、1.html、GetDate.aspx

在Default.aspx绑定新闻的标题，这里，我们也可以利用ajax从数据库中读取数据，这里就省了。

五个新闻标题，单击传一个Id到1.html这个页面中。，我们的1.html还是利用昨天的那个网页模板

在1.html这个页面的HTML代码中，我们利用js与ajax联合来实现

<script language="javascript" type="text/javascript">

//首先获取URL路径，然后获取传过来的编号

var url=location.href;

var id=url.split('=');

var NewsId=id[1];

var NId=parseInt(NewsId);

if(isNaN(NId))
{
location.href="../information.html";
}

//利用ajax

 

var xmlhttp;
function GetStudent()
    {
        if(window.ActiveXObject)
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xmlhttp =new XMLHttpRequest();
        }   
       
    var url1="../GetDate.aspx?nid="+NId;

   xmlhttp.open("GET",url1,true);
    xmlhttp.onreadystatechange=ShowResult;
    xmlhttp.send(null);

return false;//这里返回false就是为了屏蔽掉服务器端的时间

    }
   
     function ShowResult()
        {
            if(xmlhttp.readystate==4)
            {
                if(xmlhttp.status==200)
                {                 
                  var reslut= new String( xmlhttp.responseText);
                  var myarr= reslut.split('|');  

           
                  document.getElementById("title").innerHTML=myarr[0];
                  document.getElementById("content").innerHTML=myarr[1];                
                
                }
                   
             }
        }

</script>

 

我们来看一下GetDate.aspx这个读取数据页的代码

public override void ProcessRequest(HttpContext context) //这是一个内置的方法，它是专门处理http信息的一个方法，具体讲解参看：http://technet.microsoft.com/zh-cn/cc680109.aspx
    {
        string title = null;

        string content = null;

        SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=;database=mydemo");

        string str = "select * from Newsinfo where NewsId=@Id";

        SqlCommand com = new SqlCommand(str, conn);

        com.Parameters.Add("@Id", SqlDbType.Int, 4);

        com.Parameters["@Id"].Value =context.Request.QueryString["nid"];

        conn.Open();

        SqlDataReader dr = com.ExecuteReader();

        if (dr.Read())
        {
            title = dr["NewsTitle"].ToString();
            content = dr["NewsBody"].ToString();
        }

        string Str1 =title+ "|" + content;

        context.Response.Write(Str1);
    }

到目前为止，我们任何从数据库读取到的数据，都会在一个静态页面上显示，实现了我们想要的结果。