| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3842 人关注过本帖, 2 人收藏
标题:JavaScript与Web Service组合实现无刷新交互(扩展)--查询数据库
只看楼主 加入收藏
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏(2)
 问题点数:0 回复次数:12 
JavaScript与Web Service组合实现无刷新交互(扩展)--查询数据库
JavaScript与Web Service组合实现无刷新交互这篇文章我已经写得比较清楚了.客户端的 JavaScript怎么与服务端的Web Service进行通信达到无刷新的AJAX功能.今天我将接着这里给大家写一篇扩展性文章.希望对大家有所帮助.
   
    少说话多做事,我们还是直奔主题吧!先看看今天的扩展性文章涉及到的东东.
     1.建立 AJAX网站项目
     2.建立MSSQL数据库test,并建立UserInfo表
     3.建立与UserInfo表对应的实体类UserInfo,并定义好成员属性(get,set)
     4.建立UserInfoCompontent组件类,封装数据的查询功能
     5.建立Web Service调用UserInfoCompontent类的方法(因为Web Service才是与JavaScript交互的组件层)
     6.建立ASPX页面,掉用UserInfoCompontent把数据库的数据显示出来.
     7.在上一步建立的ASPX页面里定义与Web Service交互的JavaScript方法,处理发送请求和响应请求的相关操作.

一、二:第一、二步就不多说了吧,这两步要是就有问题的话我建议你可以转行干别的工作去了。下面是建立表的脚本:
   if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[UserInfo]') and OBJECTPROPERTY
   (id,
   N'IsUserTable') = 1)
   drop table [dbo].[UserInfo]
   GO
   CREATE TABLE [dbo].[UserInfo] (
    [userId] [int] IDENTITY (1, 1) NOT NULL ,
    [userName] [char] (10) COLLATE Chinese_PRC_CI_AS NULL ,
    [userSex] [char] (10) COLLATE Chinese_PRC_CI_AS NULL ,
    [userAge] [char] (10) COLLATE Chinese_PRC_CI_AS NULL ,
    [userTelephone] [varchar] (11) COLLATE Chinese_PRC_CI_AS NULL ,
    [userAddress] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL
   ) ON [PRIMARY]
   GO

三:建立UserInfo类并定义其成员与UserInfo表对应,设置其属性(get,set),UserInfo类的定义如下:
public class UserInfo
{
    public UserInfo(int id,string name,string sex,string age,string telephone,string address)
    {
        this.UserId = id;
        this.UserName = name;
        this.UserSex = sex;
        this.UserAge = age;
        this.UserTelephone = telephone;
        this.UserAddress = address;
    }

    private int _userId;
    public int UserId
    {
        get { return _userId; }
        set { _userId = value; }
    }

    private string _userName;
    public string UserName
    {
        get { return _userName; }
        set { _userName = value; }
    }

    private string _userSex;
    public string UserSex
    {
        get { return _userSex; }
        set { _userSex = value; }
    }

    private string _userAge;
    public string UserAge
    {
        get { return _userAge; }
        set { _userAge = value; }
    }

    private string _userTelephone;
    public string UserTelephone
    {
        get { return _userTelephone; }
        set { _userTelephone = value; }
    }

    private string _userAddress;
    public string UserAddress
    {
        get { return _userAddress; }
        set { _userAddress = value; }
    }
}

四:建立UserInfoCompontent,封装数据的查询功能,详细定义如下所示:
public class UserInfoComponent
{
    private string _strCon;
    public string StrCon
    {
        get { return _strCon; }
        set { _strCon = value; }
    }

    public UserInfoComponent()
    {
        this.StrCon = ConfigurationManager.AppSettings["ConnectionString"];
    }

    public  DataSet QueryAll()
    {
        string commandText = "Select * from UserInfo";
        return QueryUserInfo(commandText);
    }

    public  UserInfo Query(int userId)
    {
        string commandText = "Select * from UserInfo where userId=" + userId;
        DataTable dt = QueryUserInfo(commandText).Tables[0];
        UserInfo user = new UserInfo(int.Parse(dt.Rows[0][0].ToString()),
            dt.Rows[0][1].ToString(),
            dt.Rows[0][2].ToString(),
            dt.Rows[0][3].ToString(),
            dt.Rows[0][4].ToString(),
            dt.Rows[0][5].ToString());
        return user;
    }

    public  DataSet QueryUserInfo(string commandText)
    {
        using (SqlConnection conn = new SqlConnection(StrCon))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(commandText, conn))
            {
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds);
                    return ds;
                }
            }
        }
    }
}

五:建立Web Service调用UserInfoCompontent类的方法(因为Web Service才是与JavaScript交互的组件层)
[ScriptService]
public class UserInfoWebService : System.Web.Services.WebService {

    UserInfoComponent user = new UserInfoComponent();

    public UserInfoWebService () {

        //如果使用设计的组件,请取消注释以下行
        //InitializeComponent();
    }

    [WebMethod]
    public UserInfo GetUserInfo(int id)
    {
        return user.Query(id);
    }
}

六:建立ASPX页面Default.aspx并在页面上拽一个GridView控件,调用UserInfoCompontent把数据库的数据显示出来.
    UserInfoComponent user = new UserInfoComponent();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataBindGridView();
        }
    }

    private void DataBindGridView()
    {
        this.GridView1.DataSource = user.QueryAll();
        this.GridView1.DataBind();
    }

七:在上一步建立的ASPX页面里定义与Web Service交互的JavaScript方法,处理发送请求和响应请求的相关操作.这一步就是关键了。实现了在客户断通过JavaScript于Web Servie通信,查询数据库并返回查询结果到页面上。
    同上一篇文章一样,需要在页面上放置一个ScriptManager控件,应该他是 AJAX的核心。每一个 AJAX程序的页面上都必须要有一个ScriptManager控件。并指向先前我门定义好的Web Service。如下:
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
          <asp:ServiceReference Path="UserInfoWebService.asmx" InlineScript="true" />
        </Services>
    </asp:ScriptManager>

下面我们来下实现通信和处理请求及处理响应的客户端JavaScript方法;
在定义方法前我门先在页面上写一个文本框和一个按扭。文本框提供数据输入,按扭执行向服务端方法请求查询数据库操作。html代码如下:
请输入ID:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="查询" onclick="showUserInfo()" />
现在该是写JavaScript方法的时候了。
<script language="javascript" type="text/javascript">
function showUserInfo()
{
    var id=document.getElementById("TextBox1").value;
    UserInfoWebService.GetUserInfo(id,onGetUserInfoSuccess);
}
            
function onGetUserInfoSuccess(user)
{
    document.getElementById("id").innerText=user.UserId;
    document.getElementById("name").innerText=user.UserName;
    document.getElementById("sex").innerText=user.UserSex;
    document.getElementById("age").innerText=user.UserAge;
    document.getElementById("tele").innerText=user.UserTelephone;
    document.getElementById("address").innerText=user.UserAddress;
}
</script>
这里也许会有人会问到,你上面的onGetUserInfoSuccess()方法里所用到的id,name,sex....这些是那里来的呢?先好象没定义啊。是啊,我先前没定义他门呢,他是处理所查询到的数据库的数据的显示操作的,这到最后来,说来就来吧,在html里下一个表格或是从工具箱里拽一个表格控件出来。适当的调整下宽度,如下:
<table style="width: 540px" border="1" bordercolor="#663333" cellpadding="1" cellspacing="0">
 <tr>
      <td style="text-align: center; width: 38px;">编号</td>
      <td style="text-align: center; width: 38px;">姓名</td>
      <td style="text-align: center; width: 45px;">性别</td>
      <td style="text-align: center; width: 35px;">年龄</td>
      <td style="text-align: center; width: 82px;">电话</td>
      <td style="text-align: center; width: 79px;">地址</td>
  </tr>
  <tr>
      <td id="id"></td>
      <td id="name"></td>
      <td id="sex"></td>
      <td id="age"></td>
      <td id="tele"></td>
      <td id="address"></td>
   </tr>
</table>
图片附件: 游客没有浏览图片的权限,请 登录注册

文章写得不好,两只眼睛居然还要打架。大家有什么意见的请留言指出。
搜索更多相关主题的帖子: Service 数据库 JavaScript Web 交互 
2008-03-20 02:16
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏
得分:0 
难道这个文章没有人感兴趣??????????????

博客:http://
2008-03-20 18:14
foshan
Rank: 1
等 级:新手上路
威 望:2
帖 子:605
专家分:0
注 册:2006-3-1
收藏
得分:0 
谢谢!这是只有一行数据的例子,如果是多行数据,又应如何处理啊?

我是2.0超级菜鸟,请多多教导!
2008-03-21 08:14
走刀口→超
Rank: 6Rank: 6
等 级:贵宾
威 望:20
帖 子:5018
专家分:0
注 册:2006-3-14
收藏
得分:0 
恩,好文章,晚上回家来整理下。

有个小问题,这个没运用到 AJAX?

人在江湖【走】,怎能不挨【刀】;为了能活【口】,唯有把己【超】!come on...
2008-03-21 10:10
lxd824
Rank: 1
等 级:新手上路
帖 子:135
专家分:0
注 册:2007-4-21
收藏
得分:0 
学习下
2008-03-21 12:35
寂寞的刺猬
Rank: 1
等 级:新手上路
帖 子:111
专家分:0
注 册:2008-3-23
收藏
得分:0 
楼主确实很强,不过顺便交流下,微软的ajax框架有在用吗?比如updatepanel之类的。如果用这个的话,很容易就实现无刷新了。也不至于让小菜们手写js,毕竟这需要一定的功力的。

我的博客  http://wlb.wlb.blog.
2008-03-23 17:21
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏
得分:0 
回复 3# 的帖子
多行数据在客户端一样的处理.并且还可以分页...
详细我就不多说了..有需要我们在探讨.

博客:http://
2008-04-27 18:57
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏
得分:0 
回复 4# 的帖子
这个用到了Ajax的.
 主要是应用 AJAX框架的ScriptManager+WebService来处理.
  客户端JavaScript和WebService进行数据交互.

博客:http://
2008-04-27 18:59
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏
得分:0 
回复 6# 的帖子
就算在 AJAX下也不是全智能的.还是需要一定的JS功底.
  出了30多个Ajax控件外.....net ajax框架还别有动天....
控件只是面向服务端编程的开发  
还有面向客户端开发的...

博客:http://
2008-04-27 19:01
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏
得分:0 
本文已同期发布与我的博客Ajax栏目
并提供实例源代码下载
博客地址:http://
文章地址:http://


还望大家多多支持...评论下.....

博客:http://
2008-04-27 19:05
快速回复:JavaScript与Web Service组合实现无刷新交互(扩展)--查询数据库
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.037179 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved