您的位置：程序门 -> .net技术 -> asp.net

大家好，帮我写一个 ajax 的小例子可以吗？详情进来看。

[收藏此页] [打印本页]选择字色：背景色：字体：[大][中][小]

大家好，帮我写一个 ajax 的小例子可以吗？详情进来看。

发表于：2007-05-15 16:17:22 楼主

想用ajax实现dropdownlist与datagrid级联无刷新。
与datagrid中绑定的表,排序条件要是dropdownlist里的内容,我把dropdownlist的autopostback设成true后每次点dropdownlist改变条件的时候都要重新刷新页面，总监告诉我要用ajax来做，可是我一点都不会，大家给我写几个例子在下面好吗？尽量简单点。谢谢了。

发表于：2007-05-15 16:19:091楼得分:0

我也想用ajax做个进度条,怎么做呀?

发表于：2007-05-15 16:19:342楼得分:0

用updatepanel

发表于：2007-05-15 16:20:233楼得分:0

能说详细点吗？谢谢了。

发表于：2007-05-15 16:46:544楼得分:0

我觉得ajax是比较难的

发表于：2007-05-15 16:48:485楼得分:0

<html>
<head>
<title> ajax应用实例 </title>
<script type= "text/javascript ">
var xmlhttp;
var requesttype= " ";
function createxmlhttprequest（){
if（window.activexobject){
xmlhttp = new activexobject（ "microsoft.xmlhttp ");
}
else if（window.xmlhttprequest){
xmlhttp = new xmlhttprequest（);
}
}
function startrequest（therequesttype){
requesttype = therequesttype;
createxmlhttprequest（);
xmlhttp.onreadystatechange = handlestatechange;
xmlhttp.open（ "get ", "response.xml ",true);
xmlhttp.send（null);
}
function mycallback（){
if（xmlhttp.readystate==4){
if（xmlhttp.status==200){
if（requesttype== "all ")
listall（);
else if（requesttype== "north ")
listnorth（);
}
}
}
function listall（){
var xmldoc = xmlhttp.responsexml;
var allprovs = xmldoc.getelementsbytagname（ "prov ");
outputlist（ "all ",allprovs);
}
function listnorth（){
var xmldoc = xmlhttp.responsexml;
var north = xmldoc.getelementsbytagname（ "north ")[0];
var northprovs = north.getelementsbytagname（ "prov ");
outputlist（ "north ",northprovs);
}
function outputlist（title,provs){
var out=title;
var currentprov = null;
for（var i=0;i <provs.length;i++){
currentprov = provs[i];
out = out + “ <br/> ” + currentprov.childnodes[0].nodevalue;
}
document.getelementbyid（title).innerhtml = out;
}
</script>
</head>
<body>
<h1> ajax应用实例 </h1>
<form action= "# ">
<input type= "button " value= "列出所有沿海省市 "
conclick= "startrequest（ 'all '); "/>
<div id= "all "> </div>
<input type= "button " value= "列出江北沿海省市 "
conclick= "startrequest（ 'north '); "/>
<div id= "north "> </div>
</form>
</body>
</html>

<?xml version= "1.0 "encoding= "utf-8 " ?>
<provs>
<north>
<prov> 辽宁 </prov> <prov> 河北 </prov> <prov> 天津 </prov>
<prov> 山东 </prov> <prov> 江苏 </prov>
</north>
<south>
<prov> 浙江 </prov> <prov> 福建 </prov> <prov> 广东 </prov>
<prov> 广西 </prov> <prov> 海南 </prov> <prov> 上海 </prov>
<prov> 台湾 </prov> <prov> 香港 </prov> <prov> 澳门 </prov>
</south>
</provs>

发表于：2007-05-15 16:49:566楼得分:0

利用xmlhttp无刷新获取数据.

客户端和服务器端数据的交互有几种方法.
1.提交,通过 <form> </form> 提交到服务器端.也称 "有刷新 "吧.
2.通过xmlhttp无刷新提交到服务器端,并返回数据.也称 "无刷新 "吧.
利用xmlhttp我们可以实现很多很强大的应用.这文章主要介绍它的一
些简单的应用.

附:因为xmlhttp是ie5.0+支持的对象.所以你必须要有ie5.0+才能看到效果.

client.htm

<script language= "javascript ">
function getresult（str)
{
/*
*--------------- getresult（str) -----------------
* getresult（str)
* 功能:通过xmlhttp发送请求,返回结果.
* 参数:str,字符串,发送条件.
* 实例:getresult（document.all.userid.value);
* author:wanghr100（灰豆宝宝.net)
* update:2004-5-27 19:02
*--------------- getresult（str) -----------------
*/
var obao = new activexobject（ "microsoft.xmlhttp ");
//特殊字符：+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
//update:2004-6-1 12:22
obao.open（ "post ", "server.asp?userid= "+escape（str),false);
obao.send（);
//服务器端处理返回的是经过escape编码的字符串.
document.all.username.value=unescape（obao.responsetext)
}
</script>
<input type= "button " onclick= "getresult（document.all.userid.value) " value= "get "> <br>
userid: <input type= "text " name= "userid "> <br>
username: <input type= "text " name= "username ">

server.asp 服务器端处理.

<% @language= "javascript " %>
<%
function opendb（sdbname)
{
/*
*--------------- opendb（sdbname) -----------------
* opendb（sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = opendb（ "database.mdb ");
* author:wanghr100（灰豆宝宝.net)
* update:2004-5-12 8:18
*--------------- opendb（sdbname) -----------------
*/
var connstr = "provider=microsoft.jet.oledb.4.0; data source= "+server.mappath（sdbname);
var conn = server.createobject（ "adodb.connection ");
conn.open（connstr);
return conn;
}
var sresult = " ";
var oconn = opendb（ "data.mdb ");
//特殊字符：+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的
//所以服务器端先要经过unescape解码.
//update:2004-6-1 12:22
var userid = unescape（request（ "userid "));
var sql = "select username from users where userid= ' "+userid+ " ' ";
var rs = oconn.ＥＸＥＣute（sql);
if（!rs.eof)
{
sresult = rs（ "username ").value;
}
else
{
//加入容错.2004-5-30 10:15
sresult = "sorry,没有找到... "
}
//escape解决了xmlhttp。中文处理的问题.
response.write（escape（sresult));
%>

数据库设计 data.mdb
表users.
字段
id 自动编号
userid 文本
username 文本

表:users 数据:
id userid username
1 wanghr100 灰豆宝宝.net

发表于：2007-05-15 16:50:287楼得分:0

ajax很容易,建议看ajax新手快车道

发表于：2007-05-15 16:56:448楼得分:0

看的我是云里来，雾里去！！

发表于：2007-05-15 18:35:169楼得分:0

其他资讯