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

前端技术 2023/09/01 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();


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());
}

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

本文地址：https://www.stayed.cn/item/1707

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案