AJAX程序设计_实验六 ajax异步数据交互一、实验目的 (1)了解什么是ajax技术 (2)掌握注册表单的-优快云博客

本文链接：https://blog.youkuaiyun.com/lican19911221/article/details/7173762

本文介绍了使用JavaScript实现异步数据加载的两种方法：一种是通过创建XMLHttpRequest对象发送GET请求，另一种是利用jQuery的load方法简化异步请求。此外，还演示了一个自动校验表单的实例，用户输入用户名时会实时检查是否已存在。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

<title>Insert title here</title>

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>

</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>

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

function startRequest(){

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

}

</script>

</head>

<body>

</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>

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

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>

$(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>

<tr>

</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.");

最终运行结果为：

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