AJAX程序设计-CSDN博客

1.利用传统方法异步获取数据（本实验有两个文件）

写了两个jsp文件，一个是html.jsp文件，代码为：

<%@pagelanguage="java"contentType="text/html;charset=gb2312"

pageEncoding="gb2312"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<title>Inserttitlehere</title>

<scriptlanguage="javascript">

varxmlHttp;

functioncreateXMLHttpRequest(){

if(window.ActiveXObject)

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

elseif(window.XMLHttpRequest)

xmlHttp=newXMLHttpRequest();

}

functionstartRequest(){

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>

<inputtype="button"value="测试异步通讯"onClick="startRequest()">

<divid="target"></div>

</body>

</html>

另一个jsp文件是jsp.jsp文件，代码为：

<%@pagelanguage="java"contentType="text/html;charset=gb2312"

pageEncoding="gb2312"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

out.println("异步加载测试成功，很高兴");

最终运行html.jsp文件的结果为：

点击按钮显示结果：

2.使用JQuary的load方法异步获取数据；

这其中也有两个jsp问件，一个是jquary.jsp,代码为：
<%@pagelanguage="java"contentType="text/html;charset=GB18030"

pageEncoding="GB18030"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>jQuery简化Ajax步骤</title>

<scriptlanguage="javascript"src="jquery-1.6.js"></script>

<scriptlanguage="javascript"type="text/javascript">

functionstartRequest(){

$("#target").load("jsp.jsp");

}

</script>

</head>

<body>

<inputtype="button"value="测试异步通讯"onClick="startRequest()">

<divid="target"></div>

</body>

</html>

另一个是jsp.jsp文件，即在1中的jsp.jsp文件，

最终运行结果为：

点击后显示：

3.自动校验的表单：

在此中也是有两个文件，一个是html.jsp,代码为：
<%@pagelanguage="java"contentType="text/html;charset=gbk"

pageEncoding="gbk"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gbk">

<title>自动校验的表单</title>

<styletype="text/css">

form{

padding:0px;margin:0px;

font-size:12px;

font-family:Arial,Helvetica,sans-serif;

}

input{

border:1pxsolid#004082;

font-size:12px;

font-family:Arial,Helvetica,sans-serif;

}

</style>

<scriptlanguage="javascript"src="jquery-1.6.js"></script>

<scriptlanguage="javascript">

$(function(){

$("#UserResult").ajaxSend(function(){

//定义全局函数

$(this).html("<fontstyle='background:#990000;color:#FFFFFF;'>loading...</font>");

});

functionshowResult(sText){

varoSpan=document.getElementById("UserResult");

oSpan.innerHTML=sText;

if(sText.indexOf("alreadyexists")>=0)

//如果用户名已被占用

oSpan.style.color="red";

else

oSpan.style.color="black";

}

functionstartCheck(oInput){

//首先判断是否有输入，没有输入直接返回，并提示

if(!oInput.value){

oInput.focus();//聚焦到用户名的输入框

$("#UserResult").html("Usercannotbeempty.");

return;

}

-23-

$.get("jsp.jsp",{user:oInput.value.toLowerCase()},

//用jQuery来获取异步数据

function(data){

showResult(decodeURI(data));

}

);

}

</script>

</head>

<body>

<formname="register">

<tablecellpadding="5"cellspacing="0"border="0">

<tr>

<tdcolspan="2"align="center">

<inputtype="submit"value="注册">

<inputtype="reset"value="重置">

</td><td></td>

</tr>

</table>

</form>

</body>

</html>

另一个jsp文件是jsp.jsp文件代码为：

<%@pagelanguage="java"contentType="text/html;charset=gbk"

pageEncoding="gbk"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Stringname=request.getParameter("user");

if("isaac".equals(name))

out.print("Sorry,"+name+"alreadyexists.");

else

out.print(name+"isok.");

最终运行结果为：

注册成功后，代码在地址栏会显示密码信息，如下图：