欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ajax添加数据即时显示信息篇

程序员文章站 2022-06-22 12:40:38
今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处. 1:...
今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处.
1:我们要对数据库进行操作.2:更换请求的服务端网页.不再使用web_ajax.asp文件.新的请求网页是:add_data.asp.看后缀大家就应该能明白.我在服务端采用的技术是asp.都说asp过时了.可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该asp文件的源码.我会在该次教程最后提供该asp的源码给大家!
下面我们先来看下前端的代码.和本次的ajax实例效果演示
复制代码 代码如下:

<html>
<head>
<title>ajax无刷新添加数据</title>
</head>
<body>
输入内容:<input id="str" type="input" /> <input type="button" value="确定添加" onclick="add_post()"/>
<span id="msg" style="color:red"></span>
<script type="text/javascript">
function ajax_xmlhttp(){
//在ie中创建xmlhttprequest,适用于ie5.0以上所有版本
var msxmlhttp = new array("msxml2.xmlhttp.5.0","msxml2.xmlhttp.4.0","msxml2.xmlhttp.3.0","msxml2.xmlhttp","microsoft.xmlhttp");
for(var i=0; i<msxmlhttp.length; i++){
try
{
_xmlhttp=new activexobject(msxmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循环创建基于ie浏览器的xmlhttp.结束
//如果非ie浏览器,则创建基于firefox等浏览器的xmlhttprequest
if(!_xmlhttp && typeof xmlhttprequest != "undefined")
{
_xmlhttp=new xmlhttprequest();
}
return _xmlhttp;
}

//读取数据函数
function post(){
var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量.
ajax.open("post","add_data.asp?action=read",true);//设置请求方式,请求文件,异步请求
ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称
if(ajax.readystate==4){//数据返回成功
if(ajax.status==200){//http请求状态码返回ok
var xmldata = ajax.responsexml;
var list = xmldata.getelementsbytagname("list");//获取所有的list标签
if(list.length!=0){
var t = document.createelement("table");
t.setattribute("border","1");
t.setattribute("id","abc"); //为表格设置一个id属性,值为abc
var thead = t.createthead();
var _tr = thead.insertrow(0) //为thead创建一行
var _td = _tr.insertcell(0);
_td.innerhtml = "内容";
document.body.appendchild(t);
for(var i=0;i<list[0].childnodes.length;i++){ //遍历所有的list,有几个list的便为表格添加几行.
var tr = t.insertrow(0);
var td = tr.insertcell(0);
td.innerhtml = list[0].childnodes[i].firstchild.nodevalue;
}
}
}
}
}
ajax.send(null);
}

//提交数据函数
function add_post(){
var msgaes = document.getelementbyid("msg");//用来显示提示信息
var str = document.getelementbyid("str");//接收输入的内容
if(str.value.length == 0){
msgaes.innerhtml = "不接受空内容!"
return;
}
msgaes.innerhtml = "正在提交";
var ajax = ajax_xmlhttp();//定义xmlhttprequest对象
ajax.open("post","add_data.asp?action=add",true);//设置请求方式,请求文件,异步请求

var param = "str="+escape(str.value);//获取你输入的内容,注意这里的str,服务端将接收str中的值
ajax.onreadystatechange = function(){
if(ajax.readystate==4){
if(ajax.status==200){
var msg = ajax.responsexml.getelementsbytagname("msg");//获取服务端返回的msg标签
if(msg[0].firstchild.nodevalue == 0){
var t = document.getelementbyid("abc");
var tr = t.insertrow(0);
var td = tr.insertcell();
td.innerhtml = str.value;
str.value = "";
msgaes.innerhtml = "添加完成";
}
else if(msg[0].firstchild.nodevalue == 3){
msgaes.innerhtml = "不接受空的内容";
return;
}
else if(msg[0].firstchild.nodevalue == 1){
msgaes.innerhtml = "服务端发生了错误,数据添加失败!";
return;
}
else{
msgaes.innerhtml = "该实例供学习使用.请不要恶意输入.谢谢!";
}
}
}
}
ajax.setrequestheader("content-type","application/x-www-form-urlencoded");//注意向服务端提交数据,必须设置该头.否则服务端会接收不到
ajax.send(param);//注意send方法向服务端提交param变量中的内容.
}
window.load = post();//只有在打开网页或刷新网页以后才会执行读取数据函数
</script>
</body>
</html>




点击上面的查看实例效果,就是我们今天要学习的目的.上面的代码只是前端的html代码.在代码里有3个自定义函数.


1、ajax_xmlhttp();该函数我们在前面的教程已经讲过,是用来创建一个可用性的xmlhttprequest对象,如果你还不了解,请参阅:ajax开始准备篇

2、post();该函数还是用来读取数据.我们在本章教程中不再解释ajax是如何读取数据的.你可以参阅:ajax初试读取数据篇与ajax读取数据到表格 不过跟前2篇不同的是.该post函数不是在点击 按扭时被触发.而是在你第一次打开网页或刷新页面的时候才会执行该函数.其目的是用来读取数据库中已存在的数据.在数据添加成功以后.并没有运行该函数.其中的秘密下面的解释中我会告诉你!另外你再看一下open方法中的设置.我们在请求的网址后面多了一个action=read,这个大家应该用过.在url后面的参数, 服务端可以接收该参数.在asp中使用request.querystring来接收.php中使用$get方法来接收.我们设置这个url的参数目的是想要告诉服务器.我们要执行什么动作.在add_data.asp网页中有两个自定义过程,一个用来读取数据,一个用来添加数据.这个action=read参数服务端接收以后.经过判断会执行读取数据的过程!

3、我们重点来讲一下这个add_post函数.函数刚开始便使用getelementbyid方法在网页查找msg与str.msg是用来显示一些当前的操作信息.str是用来获取你输入的内容.然后判断你是否在str的文本框中输入了内容.如果为空则退出函数.
再看open方法的设置.请求的网页url后面的参数是action=add,服务端网页接收action这个参数.经过判断如果值是add,则执行插入数据的过程.

var param = "str="+escape(str.value);将str文本框的内容等于一个str,然后一并赋值给param变量.待会发送请求时.send会提交这个param变量中的内容.escape的意思是对 string 对象编码以便它们能在所有计算机上可读,就是解码你输入的内容.经过测试有时候可以忽略,但有时候会出现乱码.为保险起见我们还是使用escape

我们先不讲readystatechange指定的程序.看下面:
ajax.setrequestheader("content-type","application/x-www-form-urlencoded");这行的意思是.我要向服务端提交表单内容.当你的请求方式是post,并且有数据向服务端提交时.必须设置setrequestheader.如果你使用的请求方式是get或者没有数据要提交则可以忽略该句.

ajax.send(param);发送请求.并在send的参数里指定要提交param变量中的内容.你可以alert一下param,会弹出str="你输入的内容",然后我们在服务端的网页接收这个str,便可以获取str中的内容了.也就是你在文本框中输入的. 讲到这里应该是时候看一下这个被请求的服务端网页了.看看他到底在服务端干了些什么.请看:
复制代码 代码如下:

<!--#include file="conn.asp"-->
<%
'出自:http://www.web666.net
'作者:康董
'如需转载请务必保留以上信息
'定义一个变量,来保存xml数据
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=request.querystring("action") '使用get方式接受一个action来判断客户端想要执行什么操作
select case action
case "read" '如果为read则执行读取数据的操作
call read
case "add" '如果为add则执行添加数据的操作
call add_data
case else
xml = xml&"<msg>请求参数错误,请不要试图非法操作!</msg>"
end select

xml=xml&"</body>"
response.clear
response.contenttype="text/xml"
response.charset="gb2312"
response.write xml '注意这句啊.上面的那些判断执行过程.其目的就是获取一个新的xml变量内容.然后在这里输出这个xml
response.end

sub read '定义一个读取数据的过程
call openconn '打开数据库链接
sql = "select * from web_table" '打开数据库中名字为web_table的表
set rs = conn.execute(sql) '执行sql语句,并将sql的索引赋值给rs变量
xml = xml&"<list>" '没开始读取之前先建立一个list标签.将所有数据都包含在该标签下
while not rs.eof '如果表中有数据.则一直循环读取
xml = xml&"<li>"&rs("web")&"</li>"
rs.movenext '执行下一条数据的读取
wend '如果数据库中没有了数据.则结束循环
xml = xml&"</list>" '数据读完闭合list标签
close_conn '关闭数据库链接
end sub

sub add_data '添加数据过程
on error resume next '如果发生错误继续执行程序
openconn '打开数据库链接
str = trim(request.form("str")) '接收客户端传过来的str内容
if str = "" then
xml = xml&"<msg>3</msg>" '如果提交的内容为空.返回3
exit sub '退出过程
end if
sql = "insert into web_table (web) values ('"&str&"')"
conn.execute(sql) '执行添加数据
if err.number = 0 then '判断是否有错误发生,
xml = xml&"<msg>0</msg>" '如果没有错误发生,则证明数据已经成功.返回0
exit sub
else
xml = xml&"<msg>1</msg>" '如果发生错误.则证明有错误发生.数据很可能添加失败
exit sub
end if
end sub
%>

上面是你使用ajax请求的服务端网页:add_data.asp的源码.现在使用asp的应该不多了吧?但我依然痴情于她.无论你用的服务端技术是php,.net,或者jsp等.经过我的解释你应该很容易的会模拟出这个源码的功能.
1:include file="conn.asp"在asp里的作用是引入一个网页.conn.asp是我的数据库链接文件.为安全起见.我就不暴露数据库名称了.你自己建个库.随便起个名进行测试吧.
2:定义一个名字为xml变量.将xml格式的数据保存在这个变量中.使用response.write输出xml变量中的内容.
3:接收你在前端url传过来的action参数.并判断action的值.select case不用解释了吧.多支判断.如果action的值是read,则执行read过程.如果是add则执行add_data过程.如果两者都不是则证明不是通过正常渠道进行请求的. 向xml变量中再增加一个msg标签.输出以后会给出显示的内容
4:response.clear清除缓存.
5:response.contenttype="text/xml"定义输出的文本格式.xml类型
6:response.charset="gb2312"输出编码,中文编码.
7:response.write xml向客户端输出xml变量中的数据.该变量保存的是xml格式的数据.
8:response.end停止一切输出.
9:定义一个 read 过程.用来读取数据库test_table表中的web字段内的数据.打开数据库,sql语句.执行sql.开始读取!这些知识我就不讲了.如果你还不会.我想你应该去学习一下操作数据库的知识!我重点讲一下该read过程的 意义.在读取数据之前先为xml变量中增加了一个list的标签.然后将所有的数据都读取到list标签内,每条数据又被包含在了一个li标签内.数取读取完毕.闭合list标签.我想说的是,这个read过程并没有向客户端输出任何内容. 他的工作就是将数据库中的内容以xml的格式读取到那个xml变量中.当客户端action=add的时候.执行read过程.read过程给出一个新的xml变量.response.write xml输出这个变量到客户端,客户端接受到这个xml,我们在前端使用responsexml接收这个xml.然后显示!明白吗?不明白加我q:30458885
10:我们再来讲add_data这个过程.add_data的意义和read是相同的.都是在执行一系列操作以后向xml变量中赋值.add_data的作用是接受客户端发送过来的数据.并将数据写到数据库内.你仔细看下add_data中的程序逻辑.首先他会判断你提交的数据是否为空.如果为空向xml变量中增加一个msg标签.内容是3.然后退出add_data. 如果数据不为空.则向数据库写入该数据.然后判断是否有错误发生.如果没有错误也向xml变量中增加一个msg标签,内容是0.代表在写入数据时一切正常.数据被成功添加.相反err.number不等于0.则代表在写入数据时发生了错误.数据没有被成功添加.这时也会向xml变量中添加一个msg标签.内容为1.这三种情况无论那种发生 都会在添加msg标签以后立即退出add_data.所以只有一个msg标签会被写入.那么我们马上回来客户端add_post中函数正是接收了这个msg标签以后.根据msg的内容来判断服务端究竟发生了什么事!如果msg的内容为0,证明服务端一切正常,没有错误发生.数据已被添加到数据库.我们直接使用dom将str中的内容写入到了表格内.并没有 执行读取数据的post函数.如果msg内容为3,证明你输入了空的内容.如果msg内容为1,证明服务端有错误发生.数据写入失败!
怎么样你学会使用ajax技术向数据库添加数据了吗?不要说no!拜托我讲的很辛苦......
下一篇我们讲:ajax修改数据即时显示篇