DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 用ajax使網頁不刷新就可以顯示新數據
用ajax使網頁不刷新就可以顯示新數據
編輯:AJAX詳解     

用AJaxPro的:
1. 在引用中添加引用AJaxPro.dll,我用的是這個,支持asp.net 1.1 和ASP.Net 2.0。

2. web.config中建立HttpHandler

3..新建一個類Demo,這個類裡面提供了查詢數據庫和輸出列表的方法。獲得服務器控件運行後生成的Html,然後返回客戶端。

Demo.cs

---------------------------------------------

using System;
using System.Data;
using AJaxPro;
using System.Web.UI.WebControls;

namespace AJaxDemo
{
 public class Demo
 {
  public Demo()
  {
  }

   [AJaxMethod]
  public DataSet GetSqlServerTable()
  {
   DataSet ds = new DataSet();
   System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClIEnt.SqlConnection("user id=sa;data source=SERVER;initial catalog=zhsj");
   System.Data.SqlClient.SqlDataAdapter da = new System.Data.SqlClIEnt.SqlDataAdapter("SELECT id FROM 發貨單", conn);

   try
   {
    conn.Open();
  
    try
    {
     da.Fill(ds);
    }
    finally
    {
     conn.Close();
     conn.Dispose();
    }
   }
   catch(Exception)
   {
   }

   return ds;
  }

  [AJaxMethod]
  public string GetAJaxTable()
  { 
   DataSet ds = new DataSet();
   System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClIEnt.SqlConnection("user id=sa;data source=SERVER;initial catalog=zhsj");
   System.Data.SqlClient.SqlDataAdapter da = new System.Data.SqlClIEnt.SqlDataAdapter("SELECT top 8 * from 規格對應表",conn);

   try
   {
    conn.Open();
  
    try
    {
     da.Fill(ds);
    }
    finally
    {
     conn.Close();
     conn.Dispose();
    }
   }
   catch(Exception)
   {
   }

      
   DataGrid dg=new DataGrid();
   dg.DataSource=ds;
   dg.DataBind();

   //實例化一個HtmlTextWriter的類
   System.Text.StringBuilder sb=new System.Text.StringBuilder();
   System.IO.StringWriter sw=new System.IO.StringWriter(sb);
   System.Web.UI.HtmlTextWriter htw=new System.Web.UI.HtmlTextWriter(sw);
 
   //設置DataGrid的樣式

   htw.AddAttribute("BorderWidth","1px",true);
   htw.AddAttribute("BackColor","White",true);
   htw.AddAttribute("CellPadding","4",true);
   htw.AddAttribute("CellSpacing","2",true);
   htw.AddAttribute("ForeColor","#330099",true);


   dg.RenderControl(htw);
   string s=sb.ToString();

   return s;
  }

 }
}


4.建一個default.ASPx,在pageload事件裡面注冊

 private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置用戶代碼以初始化頁面
   AjaxPro.Utility.RegisterTypeForAjax(typeof(AJaxDemo.Demo));
  }

5.編default.ASPx的頁面代碼,主要部分是腳本

<script language="Javascript" defer>
function doTest(){
AJaxDemo.Demo.GetSqlServerTable(_callback);
}

function _callback(res){
var cols = res.value.Tables[0].Columns.length;
var rows = res.value.Tables[0].Rows.length;
alert(cols + " cols and " + rows + " rows");
}

function loadGrid(){
AJAXDemo.Demo.GetAJaxTable(_callback2);
}

function _callback2(res){
document.getElementById("UCtd").innerHtml=res.value;
}

</script>  

window.setTimeout(XXXXX, 1000);
每1秒刷新

利用自動無刷新技術:
function XMLHttp(url){
var xmlccj= new ActiveXObject("Microsoft.XMLHttp")
XMLccj.open("post",url,false);
XMLccj.send();
var xmlHttps=bytes2BSTR(XMLccj.responseBody);
return XMLHttps;
}
使用方法:(參數url:提取數據的頁)
需要兩頁文件,1、顯示數據的頁;2、提取數據的頁
在顯示數據的那頁利用此函數就可把要提取的數據實現自己無刷新更新了
不過要處理中文問題,我這裡就不說了,你可以查查相關資料。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved