ajax异步传输检验输入,Ajax实现的异步传输与验证示例代码

本文介绍了Ajax异步传输技术在用户注册时实时验证用户名是否已存在的应用场景。通过创建XMLHttpRequest对象,发送POST请求到后台Servlet,接收到响应后在前端显示验证结果。在Servlet中处理请求并返回数据,注意防止汉字乱码问题。整个过程无需刷新页面,提高了用户体验。
摘要由CSDN通过智能技术生成

Ajax异步传输用得很广,就拿web开发来说吧,当用户注册时,当用户刚一输完,怎么立即判断用户是否存在,并在输入框后显示提示?这就用到了异步传输~~

它可以让你不离开页面的情况下,获取后台你想要的数据,并显示在当前页面!!好的,下面看个例子

下面是一段Ajax验证代码

//① 设置变量

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]+ "
"+"

"+"
"+"
"+"
  • "+"
  • "+"Css Template Preview"+""+"
  • "+"Css Template Preview"+""+"
"+"
"+"

Android应用截图展示

"+"
"+"
"+"
downloadsoruce.png
" ;

//获取的数据在id为“msg” 的标记中显示出来,例如:

}

}

}

在jsp页面中是这样调用js函数的

获取

Ajax获取的数据将在下列标记中显示出来

好的,我们来看一下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());

}

以上已经很清楚啦,当然验证用户是否存在,道理和这个是一模一样的,其中一定要注意汉字传输中乱码的问题~~~~~~ ad51e517755f8fd6a7ec83ced4ecfaf3.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值