![]() |
您当前所在位置:首页 > 中心动态 | >> |
javascript学习课程报名咨询:常州文化宫校区:0519-69886161、新北校区:0519-68877558!
1、ajax:异步的javascript和xml技术,无刷新数据交互技术!
XMLHttpRequest
ajax有五个响应状态:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
index.jsp:注册页面
<script type="text/javascript">
var xmlhttp;//用来存放ajax的核心对象
function checkname(){
var u = document.regform.username;//获取用户名的输入框
//判断浏览器是否是主流浏览器
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//打开发送请求
var url = "CheckNameServlet?username=" + u.value;
xmlhttp.open("GET",url,true);
//当状态码发生改变时,调用callBack函数
xmlhttp.onreadystatechange = callBack;//回调函数
xmlhttp.send();//发送
}
//回调函数,当状态发生改变时调用本函数
function callBack(){
//输出当前的状态
//alert(xmlhttp.readyState);
//如果服务器已经响应
if(xmlhttp.readyState == 4){
var r = xmlhttp.responseText;//获取响应文本
alert(r);
}
}
</script>
<form action="RegServlet" method="post" name="regform">
<p>
用户名:
<input type="text" name="username" onblur="checkname()"/>
</p>
<input type="submit" value="提交">
</form>
CheckNameServlet:检验用户名是否重复的后台
//获取参数
String username = request.getParameter("username");
//判断用户名是否可用
if(username != null && username.trim().equals("admin")){
//向前端响应检验结果
out.print("no");
}else{
out.print("yes");
}
ajax的优化:提示信息写在网页中,注意IE缓存问题,注意不要重复产生XMLHttpRequest对象!
<script type="text/javascript">
var xmlhttp;//用来存放ajax的核心对象
//初始化核心对象
function init(){
if(xmlhttp == null){
//判断浏览器是否是主流浏览器
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function checkname(){
var u = document.regform.username;//获取用户名的输入框
init();//初始化xmlhttp对象
//打开发送请求(random的参数是为了防止IE浏览器缓存问题)
var url = "CheckNameServlet?username=" + u.value + "&r=" + Math.random();
xmlhttp.open("GET",url,true);
//当状态码发生改变时,调用callBack函数
xmlhttp.onreadystatechange = callBack;//回调函数
xmlhttp.send();//发送
}
//回调函数,当状态发生改变时调用本函数
function callBack(){
//输出当前的状态
//alert(xmlhttp.readyState);
//如果服务器已经响应
if(xmlhttp.readyState == 4){
var r = xmlhttp.responseText;//获取响应文本
//根据响应文本给用户提示
if(r == "yes"){
document.getElementById("namemsg").innerHTML = "<font color='green'>用户名可用</font>";
document.getElementById("bt01").disabled = false;
}else if(r == "no"){
document.getElementById("namemsg").innerHTML = "<font color='red'>用户已被占用</font>";
document.getElementById("bt01").disabled = "disabled";
}
}else{
document.getElementById("namemsg").innerHTML = "<font color='green'>检验中……</font>";
}
}
</script>
注意:javascript可以独立成一个文件,然后采用如下代码引入
<script type="text/javascript" src="checkname.js"></script>
![]() | 【常州东方博宜多媒体课程培训】学员案例 | [2014-2-18] |
![]() | 【常州东方博宜机械多媒体课程培训】学员案例 | [2014-2-18] |
![]() | 软件开发工程师 未来市场最赚钱的行业 | [2014-1-9] |
![]() | 程序员课外读物 | [2012-7-9] |
![]() | 【常州电脑培训】如何进行项目的可行性分析 | [2012-6-13] |
![]() | 常州软件培训——零缺陷代码质量管理! | [2012-6-12] |
![]() | 常州电脑培训-主板常见故障的解决方法 | [2011-12-16] |
![]() | 常州软件培训-JAVA基础 | [2011-12-12] |