AJAX:校驗用戶名是否被註冊
1. ajax是什麽?
* asynchronous javascript and xml：異步的js和xml
* 它能使用js訪問服務器，而且是異步訪問！
* 服務器給客戶端的響應一般是整個頁面，一個html完整頁面！但在ajax中因為是局部刷新，那麽服務器就不用再響應整個頁面！而只是數據！
> json：它是js提供的數據交互格式，它在ajax中最受歡迎！
2. 異步交互和同步交互
* 同步：
> 發一個請求，就要等待服務器的響應結束，然後才能發第二個請求！中間這段時間就是一個字“卡”
> 刷新的是整個頁面！
* 異步：
> 發一個請求後，無需等待服務器的響應，然後就可以發第二個請求！
> 可以使用js接收服務器的響應，然後使用js來局部刷新！
3. ajax應用場景
* 百度的搜索框
* 用戶註冊時（校驗用戶名是否被註冊過）
4. ajax的優缺點
優點：
* 異步交互：增強了用戶的體驗！
* 性能：因為服務器無需再響應整個頁面，只需要響應部份內容，所以服務器的壓力減輕了！
缺點：
* ajax不能應用在所有場景！
* ajax無端的增多了對服務器的訪問次數，給服務器帶來了壓力！
JSP:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ‘ajax3.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
//創建異步對象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多數瀏覽器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("哥們兒，您用的是什麽瀏覽器啊？");
throw e;
}
}
}
}
window.onload = function() {
// 獲取文本框，給它的失去焦點事件註冊監聽
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
//1.得到異步對象
var xmlHttp = createXMLHttpRequest();
//2.打開連接
xmlHttp.open("POST", "<c:url value=‘/ValidateUsernameServlet‘/>", true);
//3.設置請求頭：Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.發送請求，給出請求體
xmlHttp.send("username=" + userEle.value);
//5.給xmlHttp的onreadystatechange事件註冊監聽
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷
//獲取服務器的響應，判斷是否為1
// 是：獲取span，添加內容：“用戶名已被註冊”
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text == "1") {
//得到span元素
span.innerHTML = "用戶名已被註冊！";
} else {
span.innerHTML = "";
}
}
};
};
};
</script>
</head>
<body>
<h1>用戶名是否被註冊</h1>
<form action="" method="post">
用戶名：<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
密 碼：<input type="password" name="password"/><br/>
<input type="submit" value="註冊"/>
</form>
</body>
</html>
SERVLET:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/*
* 1. 獲取參數username
* 2. 判斷是否為itcast
* 3. 如果是：響應1
* 4. 如果不是：響應0
*/
String username = request.getParameter("username");
if(username.equalsIgnoreCase("WTY")) {
response.getWriter().print("1");
} else {
response.getWriter().print("0");
}
}
AJAX:校驗用戶名是否被註冊