1、Ajax简介
AJAX即“AsynchronousJavascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术、AJAX =异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
教程连接
例子:注册表单之校验用户是否注册!
Servlet类:
package com.ajax.data;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxServlet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/*
* 1. 获取参数username
* 2. 判断是否为itcast
* 5. 如果为空:响应2
* 3. 如果是:响应1
* 4. 如果不是:响应0
*/
String username = request.getParameter("username");
if(username.equalsIgnoreCase("chen")) {
response.getWriter().print("1");
}else if(username.equalsIgnoreCase("")) {
response.getWriter().print("2");
}else {
response.getWriter().print("0");
}
}
}
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>演示用户名是否被注册</title>
<script type="text/javascript" src="ajax_createXMLHttpRequest/createXMLHttpRequest.js"></script>
<script type="text/javascript">
window.onload = function() {
// 获取文本框,给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开连接
xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>", 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.innerHTML = "很抱歉!用户名已被注册!";
}else if(text == "2") {
//得到span元素
span.innerHTML = "请输入用户名!";
}else if(text == "0"){
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>
createXMLHttpRequest.js
/**
* 创建XMLHttpRequest
* return XMLHttpRequest
* 适用常用浏览器
*
*/
function createXMLHttpRequest() {
try {
//大多数浏览器
return new XMLHttpRequest();
} catch (e) {
try {
//IE6.0
return ActvieXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE5.5及更早版本
return ActvieXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("请换更新版本的浏览器!该浏览器不支持XMLHttpRequest!");
throw e;
}
}
}
}
效果图