时间：2021-07-01 10:21:17 帮助过：34人阅读
输出xml变量中的内容．
- <br><html> <br><head> <br><title>ajax无刷新添加数据</title> <br></head> <br><body> <br>输入内容：<input id="str" type="input" /> <input type="button" value="确定添加" onclick="add_Post()"/> <br><span id="msg" style="color:red"></span> <br><script type="text/javascript"> <br>function ajax_xmlhttp(){ <br>//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本 <br>var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"); <br>for(var i=0; i<msXmlhttp.length; i++){ <br>try <br>{ <br>_xmlhttp=new ActiveXObject(msXmlhttp[i]); <br>} <br>catch(e) <br>{ <br>_xmlhttp=null; <br>} <br>} //循环创建基于IE浏览器的xmlhttp.结束 <br>//如果非IE浏览器，则创建基于FireFox等浏览器的xmlhttpRequest <br>if(!_xmlhttp && typeof XMLHttpRequest != "undefined") <br>{ <br>_xmlhttp=new XMLHttpRequest(); <br>} <br>return _xmlhttp; <br>} <br><br>//读取数据函数 <br>function Post(){ <br>var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量． <br>ajax.open("post","add_data.asp?action=read",true);//设置请求方式，请求文件，异步请求 <br>ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称 <br>if(ajax.readyState==4){//数据返回成功 <br>if(ajax.status==200){//http请求状态码返回ok <br>var xmlData = ajax.responseXML; <br>var list = xmlData.getElementsByTagName("list");//获取所有的list标签 <br>if(list.length!=0){ <br>var t = document.createElement("table"); <br>t.setAttribute("border","1"); <br>t.setAttribute("id","abc"); //为表格设置一个id属性，值为abc <br>var thead = t.createTHead(); <br>var _tr = thead.insertRow(0) //为thead创建一行 <br>var _td = _tr.insertCell(0); <br>_td.innerHTML = "内容"; <br>document.body.appendChild(t); <br>for(var i=0;i<list[0].childNodes.length;i++){ //遍历所有的list,有几个list的便为表格添加几行． <br>var tr = t.insertRow(0); <br>var td = tr.insertCell(0); <br>td.innerHTML = list[0].childNodes[i].firstChild.nodeValue; <br>} <br>} <br>} <br>} <br>} <br>ajax.send(null); <br>} <br><br>//提交数据函数 <br>function add_Post(){ <br>var msgaes = document.getElementById("msg");//用来显示提示信息 <br>var str = document.getElementById("str");//接收输入的内容 <br>if(str.value.length == 0){ <br>msgaes.innerHTML = "不接受空内容！" <br>return; <br>} <br>msgaes.innerHTML = "正在提交"; <br>var ajax = ajax_xmlhttp();//定义xmlhttprequest对象 <br>ajax.open("post","add_data.asp?action=add",true);//设置请求方式，请求文件，异步请求 <br><br>var param = "str="+escape(str.value);//获取你输入的内容,注意这里的str,服务端将接收str中的值 <br>ajax.onreadystatechange = function(){ <br>if(ajax.readyState==4){ <br>if(ajax.status==200){ <br>var msg = ajax.responseXML.getElementsByTagName("msg");//获取服务端返回的msg标签 <br>if(msg[0].firstChild.nodeValue == 0){ <br>var t = document.getElementById("abc"); <br>var tr = t.insertRow(0); <br>var td = tr.insertCell(); <br>td.innerHTML = str.value; <br>str.value = ""; <br>msgaes.innerHTML = "添加完成"; <br>} <br>else if(msg[0].firstChild.nodeValue == 3){ <br>msgaes.innerHTML = "不接受空的内容"; <br>return; <br>} <br>else if(msg[0].firstChild.nodeValue == 1){ <br>msgaes.innerHTML = "服务端发生了错误，数据添加失败!"; <br>return; <br>} <br>else{ <br>msgaes.innerHTML = "该实例供学习使用．请不要恶意输入．谢谢！"; <br>} <br>} <br>} <br>} <br>ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服务端提交数据，必须设置该头．否则服务端会接收不到 <br>ajax.send(param);//注意send方法向服务端提交param变量中的内容． <br>} <br>window.load = Post();//只有在打开网页或刷新网页以后才会执行读取数据函数 <br></script> <br></body> <br></html> <br><br><br><br> <br>点击上面的查看实例效果，就是我们今天要学习的目的．上面的代码只是前端的html代码．在代码里有3个自定义函数． <br><br><br>1、ajax_xmlhttp();该函数我们在前面的教程已经讲过，是用来创建一个可用性的XMLHTTPRequest对象，如果你还不了解，请参阅：ajax开始准备篇 <br><br>2、Post();该函数还是用来读取数据．我们在本章教程中不再解释ajax是如何读取数据的．你可以参阅：ajax初试读取数据篇与ajax读取数据到表格 不过跟前２篇不同的是．该Post函数不是在点击 按扭时被触发．而是在你第一次打开网页或刷新页面的时候才会执行该函数．其目的是用来读取数据库中已存在的数据．在数据添加成功以后．并没有运行该函数．其中的秘密下面的解释中我会告诉你！另外你再看一下open方法中的设置．我们在请求的网址后面多了一个action=read,这个大家应该用过．在url后面的参数， 服务端可以接收该参数．在Asp中使用Request.QueryString来接收．Php中使用$get方法来接收．我们设置这个url的参数目的是想要告诉服务器．我们要执行什么动作．在Add_Data.Asp网页中有两个自定义过程，一个用来读取数据，一个用来添加数据．这个action=read参数服务端接收以后．经过判断会执行读取数据的过程！ <br><br>3、我们重点来讲一下这个add_Post函数．函数刚开始便使用getElementById方法在网页查找msg与str．msg是用来显示一些当前的操作信息．str是用来获取你输入的内容．然后判断你是否在str的文本框中输入了内容．如果为空则退出函数． <br>再看open方法的设置．请求的网页url后面的参数是action=add，服务端网页接收action这个参数．经过判断如果值是add，则执行插入数据的过程． <br><br>var param = "str="+escape(str.value);将str文本框的内容等于一个str，然后一并赋值给param变量．待会发送请求时．send会提交这个param变量中的内容．escape的意思是对 String 对象编码以便它们能在所有计算机上可读，就是解码你输入的内容．经过测试有时候可以忽略，但有时候会出现乱码．为保险起见我们还是使用escape <br><br>我们先不讲readystatechange指定的程序．看下面： <br>ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");这行的意思是．我要向服务端提交表单内容．当你的请求方式是post，并且有数据向服务端提交时．必须设置setRequestHeader．如果你使用的请求方式是get或者没有数据要提交则可以忽略该句． <br><br>ajax.send(param);发送请求．并在send的参数里指定要提交param变量中的内容．你可以alert一下param，会弹出str="你输入的内容"，然后我们在服务端的网页接收这个str，便可以获取str中的内容了．也就是你在文本框中输入的． 讲到这里应该是时候看一下这个被请求的服务端网页了．看看他到底在服务端干了些什么．请看： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><!--#include file="Conn.Asp"--> <br><% <br>'出自：http://Www.Web666.Net <br>'作者：康董 <br>'如需转载请务必保留以上信息 <br>'定义一个变量，来保存xml数据 <br>xml="<?xml version='1.0' encoding='gb2312'?><body>" <br>action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作 <br>Select case action <br>case "read" '如果为read则执行读取数据的操作 <br>Call Read <br>case "add" '如果为add则执行添加数据的操作 <br>Call Add_Data <br>case else <br>xml = xml&"<msg>请求参数错误，请不要试图非法操作！</msg>" <br>End Select <br><br>xml=xml&"</body>" <br>Response.Clear <br>Response.ContentType="text/xml" <br>Response.CharSet="gb2312" <br>Response.write xml '注意这句啊．上面的那些判断执行过程．其目的就是获取一个新的xml变量内容．然后在这里</li></ol></pre>输出这个xml <br>Response.End <br><br>Sub Read '定义一个读取数据的过程 <br>Call OpenConn '打开数据库链接 <br>Sql = "Select * From web_table" '打开数据库中名字为web_table的表 <br>Set Rs = Conn.Execute(Sql) '执行Sql语句，并将sql的索引赋值给rs变量 <br>xml = xml&"<list>" '没开始读取之前先建立一个list标签．将所有数据都包含在该标签下 <br>While Not Rs.Eof '如果表中有数据．则一直循环读取 <br>xml = xml&"<li>"&Rs("web")&"</li>" <br>Rs.MoveNext '执行下一条数据的读取 <br>Wend '如果数据库中没有了数据．则结束循环 <br>xml = xml&"</list>" '数据读完闭合list标签 <br>Close_Conn '关闭数据库链接 <br>End Sub <br><br>Sub Add_Data '添加数据过程 <br>On Error Resume Next '如果发生错误继续执行程序 <br>OpenConn '打开数据库链接 <br>str = Trim(Request.Form("str")) '接收客户端传过来的str内容 <br>If str = "" Then <br>xml = xml&"<msg>3</msg>" '如果提交的内容为空．返回3 <br>Exit Sub '退出过程 <br>End If <br>Sql = "Insert Into web_table (web) values ('"&str&"')" <br>Conn.Execute(Sql) '执行添加数据 <br>If Err.Number = 0 Then '判断是否有错误发生， <br>xml = xml&"<msg>0</msg>" '如果没有错误发生，则证明数据已经成功．返回0 <br>Exit Sub <br>Else <br>xml = xml&"<msg>1</msg>" '如果发生错误．则证明有错误发生．数据很可能添加失败 <br>Exit Sub <br>End If <br>End Sub <br>%> <br> <br>上面是你使用ajax请求的服务端网页：Add_Data.Asp的源码．现在使用Asp的应该不多了吧？但我依然痴情于她．无论你用的服务端技术是Php，.Net，或者Jsp等．经过我的解释你应该很容易的会模拟出这个源码的功能． <br>1：include file="Conn.asp"在Asp里的作用是引入一个网页．Conn.asp是我的数据库链接文件．为安全起见．我就不暴露数据库名称了．你自己建个库．随便起个名进行测试吧． <br>2：定义一个名字为xml变量．将xml格式的数据保存在这个变量中．使用Response.Write