Ajax实现的异步传输与验证示例代码
程序员文章站
2023-10-27 21:32:04
ajax异步传输用得很广,就拿web开发来说吧,当用户注册时,当用户刚一输完,怎么立即判断用户是否存在,并在输入框后显示提示?这就用到了异步传输~~ 它可以让你不离开页面的...
ajax异步传输用得很广,就拿web开发来说吧,当用户注册时,当用户刚一输完,怎么立即判断用户是否存在,并在输入框后显示提示?这就用到了异步传输~~
它可以让你不离开页面的情况下,获取后台你想要的数据,并显示在当前页面!!好的,下面看个例子
下面是一段ajax验证代码
<script type="text/javascript">
//① 设置变量
var xmlhttp ;
var flag = false ;
var package_name;
//② 创建xmlhttp对象
function createxmlhttp(){
if(window.xmlhttprequest){
xmlhttp = new xmlhttprequest() ;
} else {
xmlhttp = new activexobject("microsoft.xmlhttp") ;
}
}
//③
function getpackage_name(package_name){
//创建xmlhttprequest对象
createxmlhttp() ;
document.getelementbyid("msg").innerhtml=package_name;
//创建一个http请求,以post方式将package_name交给appinfoservlet
xmlhttp.open("post","appinfooneservlet?package_name="+package_name) ;
//调用回调函数 生成可视化的页面响应
xmlhttp.onreadystatechange =checkcallback;
// 发送请求
xmlhttp.send(null) ;
//友好提示
document.getelementbyid("msg").innerhtml = "正在获取信息,请耐心等候..." ;
}
//④ 回调函数
function checkcallback(){
if(xmlhttp.readystate == 4){
if(xmlhttp.status == 200){
var text = xmlhttp.responsetext ;
var t=text.split('|');//当获取的是多个值,并用"|"作为分割时
document.getelementbyid("msg").innerhtml =t[0]+ "<br>"+"<div id='container'>"+"<div id='content'>"+"<div id='slider'>"+"<ul>"+"<li>"+"<img src='"+t[1]+"' alt='css template preview' />"+"</li>"+"<li>"+"<img src='"+t[2]+"' alt='css template preview' />"+"</li>"+"</ul>"+"</div>"+"<h3>android应用截图展示</h3>"+"</div>"+"</div>"+"<center><a href='"+t[3]+"' target='_blank'><img src='./images/downloadsoruce.png'></a></center>" ;
//获取的数据在id为“msg” 的标记中显示出来,例如:<span id="msg"></span>
}
}
}
</script>
在jsp页面中是这样调用js函数的
<a href="#bottom" onclick="getpackage_name('<%=ainfo.getpackage_name() %>')">获取</a>
ajax获取的数据将在下列标记中显示出来
<span id="msg"></span>
好的,我们来看一下servlet中的代码:
public void dopost(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcharacterencoding("utf-8");//必须在out前,否则传输的汉子为乱码啊
printwriter out = response.getwriter();
string package_name=request.getparameter("package_name");
appdaoimpl adi=new appdaoimpl();
appinfo ainfo=new appinfo();
ainfo=adi.getoneappinfo(package_name);
out.print(ainfo.getdescription()+"|"+ainfo.getscreen_1_path()+"|"+ainfo.getscreen_2_path()+"|"+ainfo.getdownload_path());
}
以上已经很清楚啦,当然验证用户是否存在,道理和这个是一模一样的,其中一定要注意汉字传输中乱码的问题~~~~~~
它可以让你不离开页面的情况下,获取后台你想要的数据,并显示在当前页面!!好的,下面看个例子
下面是一段ajax验证代码
复制代码 代码如下:
<script type="text/javascript">
//① 设置变量
var xmlhttp ;
var flag = false ;
var package_name;
//② 创建xmlhttp对象
function createxmlhttp(){
if(window.xmlhttprequest){
xmlhttp = new xmlhttprequest() ;
} else {
xmlhttp = new activexobject("microsoft.xmlhttp") ;
}
}
//③
function getpackage_name(package_name){
//创建xmlhttprequest对象
createxmlhttp() ;
document.getelementbyid("msg").innerhtml=package_name;
//创建一个http请求,以post方式将package_name交给appinfoservlet
xmlhttp.open("post","appinfooneservlet?package_name="+package_name) ;
//调用回调函数 生成可视化的页面响应
xmlhttp.onreadystatechange =checkcallback;
// 发送请求
xmlhttp.send(null) ;
//友好提示
document.getelementbyid("msg").innerhtml = "正在获取信息,请耐心等候..." ;
}
//④ 回调函数
function checkcallback(){
if(xmlhttp.readystate == 4){
if(xmlhttp.status == 200){
var text = xmlhttp.responsetext ;
var t=text.split('|');//当获取的是多个值,并用"|"作为分割时
document.getelementbyid("msg").innerhtml =t[0]+ "<br>"+"<div id='container'>"+"<div id='content'>"+"<div id='slider'>"+"<ul>"+"<li>"+"<img src='"+t[1]+"' alt='css template preview' />"+"</li>"+"<li>"+"<img src='"+t[2]+"' alt='css template preview' />"+"</li>"+"</ul>"+"</div>"+"<h3>android应用截图展示</h3>"+"</div>"+"</div>"+"<center><a href='"+t[3]+"' target='_blank'><img src='./images/downloadsoruce.png'></a></center>" ;
//获取的数据在id为“msg” 的标记中显示出来,例如:<span id="msg"></span>
}
}
}
</script>
在jsp页面中是这样调用js函数的
复制代码 代码如下:
<a href="#bottom" onclick="getpackage_name('<%=ainfo.getpackage_name() %>')">获取</a>
ajax获取的数据将在下列标记中显示出来
复制代码 代码如下:
<span id="msg"></span>
好的,我们来看一下servlet中的代码:
复制代码 代码如下:
public void dopost(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
request.setcharacterencoding("utf-8");
response.setcharacterencoding("utf-8");//必须在out前,否则传输的汉子为乱码啊
printwriter out = response.getwriter();
string package_name=request.getparameter("package_name");
appdaoimpl adi=new appdaoimpl();
appinfo ainfo=new appinfo();
ainfo=adi.getoneappinfo(package_name);
out.print(ainfo.getdescription()+"|"+ainfo.getscreen_1_path()+"|"+ainfo.getscreen_2_path()+"|"+ainfo.getdownload_path());
}
以上已经很清楚啦,当然验证用户是否存在,道理和这个是一模一样的,其中一定要注意汉字传输中乱码的问题~~~~~~