JavaScript對象XMLHttpRequest
常用方法和說明
open(method,URL,async)
建立與服務器的連接
method參數指定請求的HTTP方法,典型的值是GET或POST
URL參數指定請求的地址
async參數指定是否使用異步請求，其值爲true或falsesend(content)
發送請求
content參數指定請求的參數setRequestHeader(header,value)
設置請求的頭信息
常用屬性
onreadystatechange：指定回調函數
readystate：XMLHttpRequest的狀態信息
就緒狀態碼和狀態說明：
0：XMLHttpRequest對象沒有完成初始化
1：XMLHttpRequest對象開始發送請求
2：XMLHttpRequest對象的請求發送完成
3：XMLHttpRequest對象開始讀取響應，還沒有結束
4：XMLHttpRequest對象讀取響應結束status：HTTP的狀態碼
狀態碼和狀態說明：
200：服務器響應正常
400：無法找到請求的資源
403：沒有訪問權限
404：訪問的資源不存在
500：服務器內部錯誤responseText：獲得響應的文本內容
responseXML：獲得響應的XML文檔對象
代碼如下
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.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 userNameValidate(){
var userName = document.getElementById("userName").value;
var xmlHttp = null;
// 瀏覽器的兼容性
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = new XMLHttpRequest();
}
}
// 設置打開的方式及頁面
xmlHttp.open("post", "UserValidate?userName="+userName, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 指定回調過來的函數
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
// 4 已經正常響應完成的情況
if(xmlHttp.status==200){
// 200 代表服務器一切正常
var str=xmlHttp.responseText; // 將服務器返回的信息保存到str中
document.getElementById("nameValidateReturn").innerHTML=str;
}
}
};
xmlHttp.send(null);
}
function userPasswordValidate(){
var userPassword = document.getElementById("userPassword").value;
var xmlHttp = null;
// 瀏覽器的兼容性
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = new XMLHttpRequest();
}
}
// 設置打開的方式及頁面
xmlHttp.open("post", "UserValidate", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 指定回調過來的函數
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
// 4 已經正常響應完成的情況
if(xmlHttp.status==200){
// 200 代表服務器一切正常
var str=xmlHttp.responseText; // 將服務器返回的信息保存到str中
document.getElementById("passwordValidateReturn").innerHTML=str;
}
}
};
xmlHttp.send("userPassword="+userPassword);
}
function userIsNull(){
var userName = document.getElementById("userName").value;
var userPassword = document.getElementById("userPassword").value;
if(userName == ""){
alert("請輸入用戶名！");
return false;
}
if(userPassword == ""){
alert("請輸入密碼！");
return false;
}
var nameValidateReturn = document.getElementById("nameValidateReturn").innerHTML;
var passwordValidateReturn = document.getElementById("passwordValidateReturn").innerHTML;
if(nameValidateReturn == "ok"){
if(passwordValidateReturn =="ok"){
alert("登陸成功！");
return true;
}else{
alert(passwordValidateReturn);
return false;
}
}else{
alert(nameValidateReturn);
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return userIsNull();">
<table cellspacing="15">
<tr>
<td>用戶名：</td>
<td><input type="text" id="userName" onblur="userNameValidate()" /></td>
<td><span id="nameValidateReturn" style="color:#EE7621;"></span></td>
</tr>
<tr>
<td align="right">密碼：</td>
<td><input id="userPassword" type="password" onblur="userPasswordValidate()"></td>
<td><span id="passwordValidateReturn" style="color:#EE7621;"></span></td>
</tr>
<tr>
<td align="center" colspan="2">
<input id="login" value="登陸" type="submit" class="login_btn">
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
UserValidate.java
package com.doris.ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserValidate extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
// 獲取用戶名和密碼
String userName = req.getParameter("userName");
String userPassword = req.getParameter("userPassword");
System.out.println(userName);
System.out.println(userPassword);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
String validateReturn = "";
if (userName != null && userName.length() > 0) {
// 中文亂碼
userName=new String(userName.getBytes("ISO-8859-1"),"GBK");
System.out.println(userName);
if(userName.equals("admin") || userName.equals("pccc"))
validateReturn = "ok";
else
validateReturn = "用戶不存在！";
}
if (userPassword != null && userPassword.length() > 0) {
if(userPassword.equals("admin") || userPassword.equals("pccc"))
validateReturn = "ok";
else
validateReturn = "密碼錯誤！";
}
// 將服務器的處理信息 輸出給客服端
out.write(validateReturn);
out.flush();
out.close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
}