ajax的原理大家可以看上图
如何获得Ajax对象？
XMLHttpRequest没有标准化，要区分浏览器。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie浏览器
xhr = new XMLHttpRequest();
}else{
//ie浏览器
xhr = new ActiveXObject(‘MicroSoft.XMLHttp‘);
}
return xhr;
}
下面我把代码贴出来：
1.注册页面regist.jsp
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<html>
<head>
<style>
.tips{
color:red;
}
</style>
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript">
function check_username(){
//获得ajax对象
var xhr = getXhr();
//使用ajax对象发请求
xhr.open(‘get‘,
‘check_username.do?username=‘
+$F(‘username‘),true);
xhr.onreadystatechange=function(){
//只有readyState等于4，才能获得
//服务器返回的所有数据。
if(xhr.readyState == 4){
//判断服务器返回的数据是否正确
if(xhr.status == 200){
var txt = xhr.responseText;
$(‘username_msg‘).innerHTML = txt;
}else{
$(‘username_msg‘).innerHTML = ‘验证出错‘;
}
}
};
$(‘username_msg‘).innerHTML = ‘正在验证...‘;
xhr.send(null);
}
function check_number(){
var xhr = getXhr();
xhr.open(‘get‘,
‘check_number.do?number=‘
+ $F(‘number‘),true);
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
$(‘number_msg‘).innerHTML = txt;
}
};
xhr.send(null);
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<form action="regist.do" method="post">
<fieldset>
<legend>注册</legend>
用户名:<input id="username" name="username"
onblur="check_username();"/>
<span class="tips" id="username_msg"></span>
<br/>
真实姓名:<input name="name"/><br/>
验证码:<input name="number" id="number"
onblur="check_number();"/>
<span class="tips" id="number_msg"></span>
<br/>
<img src="checkcode"
onclick=""http://blog.51cto.com/viewpic.php?refimg=" + this.src=‘checkcode?‘ + Math.random();"/><br/>
<input type="submit" value="提交"/>
</fieldset>
</form>
</body>
</html>
2.获得ajax对象my.js
function $(id){
return document.getElementById(id);
}
function $F(id){
return $(id).value;
}
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
//非ie浏览器
xhr = new XMLHttpRequest();
} else {
//ie浏览器
xhr = new ActiveXObject("MicroSoft.XMLHttp");
}
return xhr;
}
3.servlet验证页面ActionServlet.Java
package web;
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;
import javax.servlet.http.HttpSession;
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"),
uri.lastIndexOf("."));
if(action.equals("/check_username")){
if(1 == 2){
throw new ServletException("");
}
String username =
request.getParameter("username");
if(username.equals("tom")){
out.println("用户名存在");
}else{
out.println("用户名未被注册");
}
}else if(action.equals("/check_number")){
String number1 =
request.getParameter("number");
HttpSession session =
request.getSession();
String number2 =
(String)session.getAttribute("number");
if(number1.equalsIgnoreCase(number2)){
out.println("验证码正确");
}else{
out.println("验证码错误");
}
}
out.close();
}
}
4.画验证码CheckcodeServlet.java
package web;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class CheckcodeServlet extends HttpServlet {
private int width = 80;
private int height = 30;
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*
* 绘图
*/
//step1,创建一个内存映像对象(画布)
BufferedImage image =
new BufferedImage(width,height,
BufferedImage.TYPE_INT_RGB);
//step2,获得画笔
Graphics g = image.getGraphics();
//step3,给笔上一个颜色
Random r = new Random();
g.setColor(new Color(r.nextInt(255),
r.nextInt(255),r.nextInt(255)));
//step4,绘图,先填充背景
g.fillRect(0, 0, width, height);
//step5,绘图,给画笔再设置一个颜色，用来
//绘图
g.setColor(new Color(0,0,0));
g.setFont(new Font(null,Font.BOLD,20));
String number = r.nextInt(99999) + "";
HttpSession session =
request.getSession();
session.setAttribute("number", number);
g.drawString(number, 10, 22);
/*
* 输出
*/
//step1,设置content-type消息头，告诉浏览器
//返回的是一个图片
response.setContentType("image/jpeg");
//step2,获得一个字节输出流
OutputStream ops =
response.getOutputStream();
//step3,将原始图片压缩，然后输出
javax.imageio.ImageIO
.write(image, "jpeg", ops);
ops.close();
}
}
5.配置文件web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet> <servlet-name>checkcodeServlet</servlet-name> <servlet-class>web.CheckcodeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>checkcodeServlet</servlet-name> <url-pattern>/checkcode</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
代码我都贴出来了，只是一个简单的验证，来测试一下：
ajax是一种用来改善用户体验的技术，其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象，一般称之为ajax对象)异步地(当ajax对象向
服务器发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作)向服务器发送请求。 服务器返回的数据不再是一个完整的新的页面，而是部分数据，利用这些数据，更新当前页面。整个过程，页面无刷新，不打断用户的操作。
来自本人CSDN:http://blog.csdn.net/wudalang_gd/article/details/50812186
时间： 2024-08-09 06:34:40