源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[AJAX相关] Ajax实现的异步传输与验证示例代码

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-1-28 15:08:25 | 显示全部楼层 |阅读模式
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());
}

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

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-19 23:20:48 | 显示全部楼层
的谁vdvdsvdsvdsdsv
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

186

积分

注册会员

Rank: 2

积分
186
发表于 2022-8-31 09:30:42 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

146

积分

注册会员

Rank: 2

积分
146
发表于 2022-11-19 15:33:25 | 显示全部楼层
不错的源码论坛
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

156

积分

注册会员

Rank: 2

积分
156
发表于 2023-3-27 03:02:33 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

1

主题

1386

回帖

1509

积分

金牌会员

Rank: 6Rank: 6

积分
1509
发表于 2023-5-25 12:51:26 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2023-8-15 00:56:10 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-10-21 05:00:56 | 显示全部楼层
不错的源码论坛
回复 支持 反对

使用道具 举报

9

主题

2万

回帖

420

积分

中级会员

Rank: 3Rank: 3

积分
420
发表于 2024-5-28 14:18:22 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-9-13 05:29:29 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-1 12:09 , Processed in 0.070714 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表