Ajax中怎么实现异步传输与验证

本篇文章为大家展示了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>"+"<h4>Android应用截图展示</h4>"+"</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中怎么实现异步传输与验证，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网JavaScript频道。