Ajax实现的异步传输与验证示例代码
39 浏览量
2020-12-01
23:55:47
上传
评论 1
收藏 54KB PDF 举报
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
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();
资源评论
