利用XMLHTTP无刷新获取数据

2016-02-19 20:02 5 1 收藏

下面图老师小编跟大家分享利用XMLHTTP无刷新获取数据,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

利用XMLHTTP无刷新获取数据.

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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 服务器端处理.

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

% @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
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=16372

来源:http://www.tulaoshi.com/n/20160219/1622592.html

延伸阅读
标签: Web开发
Ajax内部交流文档一、使用Ajax的主要原因  1、通过适当的Ajax应用达到更好的用户体验;  2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。     二、引用  Ajax这个概念的最早提出者Jesse&...
标签: Web开发
程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户。比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的所有市重新显示出来。这种情况一般需要将整个页面刷新后才可以重新读取,但这样不仅效率不高外,也显得不太优雅。其实用javascript结合微软...
标签: Web开发
Ajax内部交流文档一、使用Ajax的主要原因 1、通过适当的Ajax应用达到更好的用户体验; 2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。 二、引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是A...
标签: ASP
  刷新技术经历了大致几个阶段: 一、在HTML文件头里增加一个键,使该页面在设定的时间后跳转到指定的页面(包括自身); 例如: <meta http-equiv="refresh" content="30" 二、使用框架然后在JS脚本里定时刷新框架内容。 上面两种方式都会重新加载页面,即刷新,给人的感觉不是很好!于是无刷新技术出现了。 三、是对第二种方式的一...
标签: Web开发
第一段是我们的XML数据源,也就是要绑定的数据,METADATA结点相当于表名, AUTHOR、GENERATOR、PAGETYPE、ABSTRACT相当于列名,下面的Table是用来显示数据的容器。<TABLE dataSrc="#xmlData" border=1>是指定Table的数据源,<span dataFld="AUTHOR">loading...</span>绑定字段名。 --------------------------------------------------...

经验教程

865

收藏

6
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部