关于XMLHTTP无刷新数据获取和发送

最新推荐文章于 2012-01-07 10:04:33 发布
最新推荐文章于 2012-01-07 10:04:33 发布
阅读量1.4k 收藏
点赞数
文章标签： javascript 服务器 function 数据库 .net sql

客户端和服务器端数据的交互有几种方法.
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" οnclick="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.Execute(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

 

利用XmlHTTP实现的二级连动Select.

这是继 ".Net/Develop/read_article.asp?id=28323">利用XmlHTTP无刷新获取数据" 的另一篇关于XmlHTTP的应用.
关于XmlHTTP.可以说,是一个很好的接合剂.把客户端和服务端的距离拉近了.
利用XmlHTTP.我们可以实现很多好的想法.

这文章.实现了二级连动Select.
传统二级连动是把所有的数据都传到有客户端..
利用XmlHTTP.我们可以实时地返回我们所需要的数据.


select.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");
    oBao.open("POST","Server.asp?sel="+str,false);
    oBao.send();
    //服务器端处理返回的是经过escape编码的字符串.
    //通过XmlHTTP返回数据,开始构建Select.
    BuildSel(unescape(oBao.responseText),document.all.sel2)
}

function BuildSel(str,sel)
{
/*
 *--------------- BuildSel(str,sel) -----------------
 * BuildSel(str,sel) 
 * 功能:通过str构建Select.
 * 参数:str,字符串,由服务端返回的.有特定结构"字符串1,字符串2,字符串3"
 * 参数:sel,要构建的Select
 * 实例:BuildSel(unescape(oBao.responseText),document.all.sel2)
 * author:wanghr100(灰豆宝宝.Net)
 * update:2004-5-27 19:02
 *--------------- BuildSel(str,sel) -----------------
 */
    //先清空原来的数据.
    sel.options.length=0;
    var arrstr = new Array();
    arrstr = str.split(",");
    //开始构建新的Select.
    for(var i=0;i<arrstr.length;i++)
    {
        sel.options[sel.options.length]=new Option(arrstr[i],arrstr[i])
    }
}
</script>
<select name="sel" onChange="GetResult(this.value)">
<option value="">请选择
<option value="福建省">福建省
<option value="湖北省">湖北省
<option value="辽宁省">辽宁省
<select>
<select name="sel2"></select>

 

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 oConn = OpenDB("data.mdb");
var province = Request("sel");
var arrResult = new Array();
var sql = "select city from china where province='"+province+"'";
var rs = Server.CreateObject("ADODB.Recordset");
rs.Open(sql,oConn,1,1);
while(!rs.EOF)
{
    //遍历所有适合的数据放入arrResult数组中.
    arrResult[arrResult.length] = rs("city").Value;
    rs.MoveNext();
}
//escape解决了XmlHTTP。中文处理的问题.
//数组组合成字符串.由","字符串连接.
Response.Write(escape(arrResult.join(",")));
%>


数据库设计
data.mdb
表china.
字段
id  自动编号
province 文本
city  文本

表:china 数据: 
id province city
1 福建省  福州市
2 福建省  厦门市
3 福建省  泉州市
4 湖北省  武汉市
5 湖北省  荆州市
6 湖北省  宜昌市
7 辽宁省  沈阳市
8 辽宁省  大连市
9 辽宁省  盘锦市

 

利用XmlHTTP无刷新添加数据之Get篇.

前两篇主要写了从获取数据.接下来,我们讲讲如何添加数据.
我们传统的提交数据的方法都是用<Form>来实现的.
<Form>标记中的Method属性确定了表单元素的数据在发送到服务器时,
如何对HTTP请求信息进行打包.

Method 属性可以使用的方法
Method属性   发送表单元素的方式                              读取数据的Request集合
Get             标识在URL的最后                                  QueryString
Post            在HTTP请求的主体内(HTTP请求的自由区域)  Form


这篇文章用XmlHTTP来实现Form的Method=Get.


ClientGet.htm

<script language="JavaScript">
function AddDataGet(sUserId,sUserName)
{
/*
 *--------------- AddDataGet(sUserId,sUserName) -----------------
 * AddDataGet(sUserId,sUserName) 
 * 功能:通过XmlHTTP添加数据.相当于Form的Method=Get.
 * 参数:sUserId,字符串,发送条件.
 * 参数:sUserName,字符串,发送条件.
 * 实例:AddDataGet(document.all.userid.value,document.all.username.value);
 * author:wanghr100(灰豆宝宝.Net)
 * update:2004-5-30 14:46
 *--------------- AddDataGet(sUserId,sUserName) -----------------
 */
    var oBao = new ActiveXObject("Microsoft.XmlHTTP");
    //特殊字符：+,%,&,=,?等的传输解决办法.用escape编码.
    //Update:2004-6-1 12:22
    //escape(sUserId),escape(sUserName);
    oBao.open("POST","Server.asp?userid="+escape(sUserId)+"&username="+escape(sUserName),false);
    oBao.send();
    //清空输入框数据.
    document.all.userid.value="";
    document.all.username.value="";
    //服务器端处理返回的是经过escape编码的字符串.
    alert(unescape(oBao.responseText))
}
</script>
<input type="button" οnclick="AddDataGet(document.all.userid.value,document.all.username.value)" value="AddDataGet"><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");
//相当于Form的Method=Get.
//相当于Form的Method=Get.
//特殊字符：+,%,&,=,?等的传输解决办法.客户端传输过来是经过escape编码的.
//所以服用器端应该先用unescape解码.
//Update:2004-6-1 12:22
//unescape(Request.QueryString("userid")).....
var userid = unescape(Request.QueryString("userid"));
var username = unescape(Request.QueryString("username"));
sResult = "userid:"+userid+"/nusername:"+username+"/n 添加成功."
var sql = "Insert into users(userid,username)Values('"+userid+"','"+username+"')";
oConn.Execute(sql);
Response.Write(escape(sResult));
%>


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

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

 

利用XmlHTTP无刷新添加数据之Post篇.

前两篇主要写了从获取数据.接下来,我们讲讲如何添加数据.
我们传统的提交数据的方法都是用<Form>来实现的.
<Form>标记中的Method属性确定了表单元素的数据在发送到服务器时,
如何对HTTP请求信息进行打包.

Method 属性可以使用的方法
Method属性      发送表单元素的方式                            读取数据的Request集合
Get             标识在URL的最后                                  QueryString
Post            在HTTP请求的主体内(HTTP请求的自由区域)  Form


这篇文章用XmlHTTP来实现Form的Method=Post.


ClientPost.htm

<script language="JavaScript">
function AddDataPost(sUserId,sUserName)
{
/*
 *--------------- AddDataPost(sUserId,sUserName) -----------------
 * AddDataPost(sUserId,sUserName) 
 * 功能:通过XmlHTTP添加数据.相当于Form的Method=Post.
 * 参数:sUserId,字符串,发送条件.
 * 参数:sUserName,字符串,发送条件.
 * 实例:AddDataPost(document.all.userid.value,document.all.username.value);
 * author:wanghr100(灰豆宝宝.Net)
 * update:2004-5-30 14:46
 *--------------- AddDataPost(sUserId,sUserName) -----------------
 */
    var oBao = new ActiveXObject("Microsoft.XmlHTTP");
    //特殊字符：+,%,&,=,?等的传输解决办法.
    //Update:2004-6-1 12:22
    //escape(sUserId),escape(sUserName);
    sUserId = escape(sUserId);
    sUserName = escape(sUserName);
    var userInfo = "userid="+sUserId+"&username="+sUserName;
    oBao.open("POST","Server.asp",false);
    oBao.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    oBao.send(userInfo);
    //清空输入框数据.
    document.all.userid.value="";
    document.all.username.value="";
    //服务器端处理返回的是经过escape编码的字符串.
    alert(unescape(oBao.responseText))
}
</script>
<input type="button" οnclick="AddDataPost(document.all.userid.value,document.all.username.value)" value="AddDataPost"><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");
//相当于Form的Method=Post.
//相当于Form的Method=Post.
//特殊字符：+,%,&,=,?等的传输解决办法.客户端传输过来是经过escape编码的.
//所以服用器端应该先unescape解码.
//Update:2004-6-1 12:22
//unescape(Request.Form("userid")).....
var userid = unescape(Request.Form("userid"));
var username = unescape(Request.Form("username"));
sResult = "userid:"+userid+"/nusername:"+username+"/n 添加成功."
var sql = "Insert into users(userid,username)Values('"+userid+"','"+username+"')";
oConn.Execute(sql);
Response.Write(escape(sResult));
%>


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

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

 

利用XmlHTTP无刷新自动实时更新数据. 
近来看论坛上经常有人提问关于如何无刷新,自动更新数据.
传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.
但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.

我们可以让程序自动刷新.定时向服务器请求数据.5秒取一次数据,10秒取一次数据.
利用XmlHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据.

demo.htm    前台显示.

<script language="JavaScript">
function GetResult()
{
/*
 *--------------- GetResult() -----------------
 * GetResult() 
 * 功能:通过XmlHTTP发送请求,返回结果.
 * 参数:str,字符串,发送条件.
 * 实例:GetResult();
 * author:wanghr100(灰豆宝宝.Net)
 * update:2004-5-27 19:02
 *--------------- GetResult() -----------------
 */
    var oBao = new ActiveXObject("Microsoft.XmlHTTP");
    //特殊字符：+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
    //Update:2004-6-1 12:22
    oBao.open("POST","Server.asp",false);
    oBao.send();
    //服务器端处理返回的是经过escape编码的字符串.
    var strResult = unescape(oBao.responseText);
    //将字符串分开.
    var arrResult = strResult.split("###");
    RemoveRow(); //删除以前的数据.
    //将取得的字符串分开,并写入表格中.
    for(var i=0;i<arrResult.length;i++)
    {
        arrTmp = arrResult[i].split("@@@");
        num1 = arrTmp[0]; //字段num1的值
        num2 = arrTmp[1]; //字段num2的值
        row1 = tb.insertRow();
        cell1 = row1.insertCell();
        cell1.innerText = num1;
        cell2 = row1.insertCell();
        cell2.innerText = num2;
    }
}

function RemoveRow()
{
    //保留第一行表头,其余数据均删除.
    var iRows = tb.rows.length;
    for(var i=0;i<iRows-1;i++)
    {
        tb.deleteRow(1);
    }
}

function MyShow()
{
    //2秒自动刷新一次,2秒取得一次数据.
    timer = window.setInterval("GetResult()",2000);
}
</script>

<body οnlοad="MyShow()">
<p>
</p>
<table width="47%" height="23"  border="0" cellpadding="1" cellspacing="0" id="tb">
  <tr>
    <td>num1</td>
    <td>num2</td>
  </tr>
</table>


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 = new Array();
var oConn = OpenDB("data.mdb");
//特殊字符：+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的
//所以服务器端先要经过unescape解码.
//Update:2004-6-1 12:22
var sql = "select num1,num2 from nums order by id";
var rs = oConn.Execute(sql);
while(!rs.EOF)
{
    //一条记录用"###"隔开.每列数据用"@@@"隔开. 这是以只有两个列数据的情况.
    sResult[sResult.length] = rs("num1").Value + "@@@" + rs("num2").Value
    rs.MoveNext();
}
//escape解决了XmlHTTP。中文处理的问题.
Response.Write(escape(sResult.join("###")));
%>


数据库data.mdb
表 nums
id,自动编号
num1,文本
num2,文本

测试数据

id      num1    num2
1       20.70   20.810
2       10.5    20.5
3       12.3    300
4       132     323
5       563     56
6       20      10

 

该文章转载自网络大本营：http://www.xrss.cn/Info/13931.Html

 

ppslide
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图文解析AJAX的原理
12-12
先上原理图:       背景：  1....  2.如果服务器长时间未能返回Response，则客户端将会无响应，用户体验很差。... 3.... 4.浏览器提交表单后，发送的...当需要从服务器获取数据，并刷新页面的操作，如果不采用AJAX，
关于XMLHTTP无刷新数据获取和发送（转相关内容）
HisSystem2088的博客
02-08 117
利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过<form></form>提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用. 附:因为XMLHTTP是IE5.0+支持的对象.所以...
浅析IE浏览器关于ajax的缓存机制
01-19
　如果想每次都获取到最新数据，我们只需保证每次传入的URL不一样。最简单的方法就是通过给url拼接参数。利用math函数的random（）方法生成随机数。 　比如访问百度www.baidu.com，我们就可以把地址写成...
全面解析Ajax和jsonp使用总结
12-09
前言：ajax和jsonp可以与后台通信，获取数据和信息，但是又不用刷新整个页面，实现页面的局部刷新。 一、ajax •定义：一种发送http请求与后台进行异步通讯的技术。 •原理：实例化xmlhttp对象，使用此对象与后台...
XMLHttpRequest对象_Ajax异步请求重点(推荐)
11-28
2.XMLHttpRequest对象是XMLHttp组件的对象，它是一个抽象对象，允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端 3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互，不必每次刷新页面 4....
基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文）
03-12
而越来越多专业知识的 Blog 的出现，让我们看到了 Blog 更多所蕴涵的巨大的信息价值：不同的 Blog 选择不同的内容，收集和整理成为很多人关注的专业 Blog ——目前越来越多的人获取信息的来源是一些固定的 Blog 。...
XMLHTTP发送HTTP请求失败的可能性分析(一)
sleepingman的专栏
03-26 3130
    (一) Access DeniedTomoSoft ID Number: Q20011122Article last modified on 11-22-2001  The information in this article applies to: Microsoft XML, versions 2.6, 3.0, 3.0 sp1 
在VFP(Visual FoxPro)中使用Msxml2.ServerXMLHTTP读取返回内容出现乱码(问题?)问题
feiyafei2008的专栏
01-07 4090
IIS服务器根目录下的文件为index.asp 内容如下 %@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> ="服务器已成功启动" %> oo = newObject('Msxml2.ServerXMLHTTP') oo.open('POST','http://localhost/',.f.) oo.send('') ? oo.responseBo
利用XMLHTTP无刷新自动实时更新数据
chinmo的收藏
03-04 479
我们可以让程序自动刷新.定时向服务器请求数据.5秒取一次数据,10秒取一次数据.利用XMLHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据.demo.htm    前台显示.function GetResult(){/* *--------------- GetResult() ----------------- * GetResult()  * 功能:通过XMLHTTP发
使用c#调用XMLHTTP（XMLHTTPClass） ,发送和返回 json
最新发布
06-10
可以使用以下代码示例来使用C#调用XMLHTTP，发送JSON并获取返回的JSON数据： ```csharp using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net; using System....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值