Ajax实现的异步传输与验证示例代码

生命价值不在于获取多少,生命价值在于付出多少。有钱的人更有钱,这往往是一种必然。
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 rel="nofollow noopener noreferrer" href='"+t[3]+"' target='_blank'><img src='./images/downloadsoruce.png'></a></center>" ;
//获取的数据在id为“msg” 的标记中显示出来,例如:<span id="msg"></span>
}
}
}
</script>

在jsp页面中是这样调用js函数的
 
<a rel="nofollow noopener noreferrer" 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实现的异步传输与验证示例代码到此结束。你悟与不悟,道就在那里,不悲不喜。你修与不修,烦恼就在那里,不来不去。你明与无明,难题就在那里,不增不减。你观与不观,无常就在那里,不舍不弃。走进觉悟的道里,让觉悟住进心里,默然相契,一生自在欢喜。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
实现AJAX异步调用和局部刷新的基本步骤

Ajax实现上传图像功能的示例详解

Ajax校验用户名是否存在的方法

AJAX请求数据及实现跨域的三种方法详解

ajax接口文档url路径的简写实例