Ajax添加数据即时显示信息篇
务端返回的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读取数据到表格 不过跟前２篇不同的是．该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中的内容了．也就是你在文本框中输入的． 讲到这里应该是时候看一下这个被请求的服务端网页了．看看他到底
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读取数据到表格 不过跟前２篇不同的是．该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中的内容了．也就是你在文本框中输入的． 讲到这里应该是时候看一下这个被请求的服务端网页了．看看他到底