这篇文章主要介绍了Ajax如何添加数据即时显示信息，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的纳雍网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
下面我们先来看下前端的代码
点击上面的查看实例效果，就是我们今天要学习的目的．上面的代码只是前端的html代码．在代码里有3个自定义函数．
1、ajax_xmlhttp();该函数我们在前面的教程已经讲过，是用来创建一个可用性的XMLHTTPRequest对象，如果你还不了解，请参阅：ajax开始准备篇
2、Post();该函数还是用来读取数据．我们在本章教程中不再解释ajax是如何读取数据的．你可以参阅：ajax初试读取数据篇与ajax读取数据到表格 不过跟前２篇不同的是．该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中的内容了．也就是你在文本框中输入的． 讲到这里应该是时候看一下这个被请求的服务端网页了．看看他到底在服务端干了些什么．请看：
复制代码 代码如下:
<%
'出自：http://Www.Web666.Net
'作者：康董
'如需转载请务必保留以上信息
'定义一个变量，来保存xml数据
xml="
上面是你使用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如何添加数据即时显示信息”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
