AJAX程序设计
来源:互联网 发布:爱晒儿软件博客 编辑:程序博客网 时间:2024/05/16 14:43
1.利用传统方法异步获取数据(本实验有两个文件)
写了两个jsp文件,一个是html.jsp文件,代码为:
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Insert title here</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.open("GET","jsp.jsp",true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
document.getElementById("target").innerHTML = xmlHttp.responseText;
}
xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>
另一个jsp文件是jsp.jsp文件,代码为:
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
out.println("异步加载测试成功,很高兴");
%>
最终运行html.jsp 文件的结果为:
点击按钮显示结果:
2.使用JQuary的load方法异步获取数据;
这其中也有两个jsp问件,一个是jquary.jsp,代码为:
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 简化Ajax 步骤</title>
<script language="javascript" src="jquery-1.6.js"></script>
<script language="javascript" type="text/javascript">
function startRequest(){
$("#target").load("jsp.jsp");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>
另一个是jsp.jsp文件,即在1中的jsp.jsp文件,
最终运行结果为:
点击后显示:
3.自动校验的表单:
在此中也是有两个文件,一个是html.jsp,代码为:
<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>自动校验的表单</title>
<style type="text/css">
form{
padding:0px; margin:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
input{
border:1px solid #004082;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<script language="javascript" src="jquery-1.6.js"></script>
<script language="javascript">
$(function(){
$("#UserResult").ajaxSend(function(){
//定义全局函数
$(this).html("<font style='background:#990000; color:#FFFFFF;'>loading... </font>");
});
});
function showResult(sText){
var oSpan = document.getElementById("UserResult");
oSpan.innerHTML = sText;
if(sText.indexOf("already exists") >= 0)
//如果用户名已被占用
oSpan.style.color = "red";
else
oSpan.style.color = "black";
}
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
$("#UserResult").html("User cannot be empty.");
return;
}
-23-
$.get("jsp.jsp",{user:oInput.value.toLowerCase()},
//用jQuery 来获取异步数据
function(data){
showResult(decodeURI(data));
}
);
}
</script>
</head>
<body>
<form name="register">
<table cellpadding="5" cellspacing="0" border="0">
<tr><td>用户名:</td><td><input type="text" onBlur="startCheck(this)" name="User"></td>
<td><span id="UserResult"></span></td> </tr>
<tr><td>输入密码:</td><td><input type="password" name="passwd1"></td> <td></td> </tr>
<tr><td>确认密码:</td><td><input type="password" name="passwd2"></td> <td></td> </tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td> <td></td>
</tr>
</table>
</form>
</body>
</html>
另一个jsp文件是jsp.jsp文件代码为:
<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String name=request.getParameter("user");
if("isaac".equals(name))
out.print("Sorry, " + name + " already exists.");
else
out.print( name + " is ok.");
%>
最终运行结果为:
注册成功后,代码在地址栏会显示密码信息,如下图:
- AJAX程序设计
- Ajax程序设计入门
- 转载: Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax程序设计入门
- Ajax高级程序设计
- Ajax程序设计入门
- Ajax程序设计入门
- 2502
- Android系统名词解释汇总
- std::min std::max
- MPEG-4/H.264视频编解码工程实践(二)
- 全局的callback函数访问一个类的成员变量
- AJAX程序设计
- 模拟Post/get提交数据 并抓取返回数据
- qt 中文编码
- 面试题 引用和指针
- CentOS 防火墙配置 80端口
- Q & A (1)
- 编写和提交自己的第一个内核patch
- 一、Qt Creator的安装和hello world程序的编写
- Shell脚本调试技术