📄 index.jsp
字号:
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>AJAX－－HelloWord演示</title>
<script type="text/javascript">
/* 创建一个新的 XMLHttpRequest 去调用远程的WEB服务*/
var xmlHttp = false;
/* 在 Microsoft 浏览器上创建 XMLHttpRequest 对象 */
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
/* 处理 Mozilla 和非 Microsoft 浏览器 */
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp){
alert("AJAX服务对象创建失败！");
}
/*
* 发出请求
* 1. 从 Web 表单中获取需要的数据。
* 2. 建立要连接的 URL。
* 3. 打开到服务器的连接。
* 4. 设置服务器在完成后要运行的函数。
* 5. 发送请求。
*/
function checkUserName() {
var userName = document.getElementById("userName").value;
if(userName=="") return;
// 建立远程连接的WEB对应的URL地址
var url = "CheckUserNameServlet?userName="
+encodeURI(userName) + "&"+new Date().getTime();
// 打开一个对服务器的连接
xmlHttp.open("get", url, true);
//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
// 设置一个函数，当从服务器读取数据后返回时调用
xmlHttp.onreadystatechange = updatePage;
// 开始发送HTTP请求
xmlHttp.send(null);
}
/*
* 处理服务器响应
* 1.什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。
* 2.服务器将把响应填充到 xmlHttp.responseText 属性中。
*/
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
alert(response);
var divUserName = document.getElementById("divUserName");
divUserName.innerText = response;
}
}
</script>
</head>
<body>
<form action="">
用户注册
<table>
<tr>
<td>
用户名：
<input type="text" id="userName" onchange="checkUserName()">
</td>
<td>
<div id="divUserName"></div>
</td>
</tr>
<tr>
<td>
密 码：
<input type="password" id="password"/>
</td>
</tr>
<tr>
<td>
性别：
<input type="text" id="sex"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -