WEB应用中在表单验证时AJAX起到了很大的作用,特别是对用户名的验证。
JSP页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="text"/>
<input type="button" id="ok" value="测试"/>
</body>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
window.onload = function()
{
document.getElementById("ok").onclick = function()
{
// 01 获取xmlhttprequest对象
var xmlReq = ajaxFunction();
var infor = document.getElementById("text").value;
// 02接收服务器响应
xmlReq.onreadystatechange = function()
{
if(xmlReq.readyState ==4 )
{
if(xmlReq.status == 200 || xmlReq.status == 304)
{
var data = xmlReq.responseText;
alert(data);
}
}
};
// 03打开和服务器的连接
xmlReq.open("post","./MyServlet?timeStamp="+new Date().getTime(),true);
//post方法需要
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 04发送数据
xmlReq.send("inf="+infor);
};
};
</script>
</html>
xmlReq的onreadyStateChange事件是在readyState属性发生改变时触发的,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。
xmlReq.readyState一共有5个值:
0 (未初始化)
对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化)
对象已建立,尚未调用send方法
2 (发送数据)
send方法已调用,但是当前的状态及http头未知
3 (数据传送中)
已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成)
数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
xmlReq.status == 200表示执行成功
xmlReq.status == 304表示文件没有变化
一般指判断是否等于200就OK了
在这里表单提交的方式是post
以post方式提交的话,必须加上一句代码
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
一共有4步:
1.获取xmlhttprequest对象
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
2.接收服务器响应
xmlReq.onreadystatechange = function()
{
if(xmlReq.readyState ==4 )
{
if(xmlReq.status == 200 || xmlReq.status == 304)
{
var data = xmlReq.responseText;
alert(data);
}
}
};
3.打开和服务器连接,open方法一个有三个值,第一个值表示提交的方式是get还是post.
第二个值表示,提交给谁处理,是一个路径。第三个值表示是否异步请求,true为异步。
xmlReq.open("post","./MyServlet?timeStamp="+new Date().getTime(),true);
4.发送数据
xmlReq.send("inf="+infor);
Servlet:
package com.lxf.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 MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String text = request.getParameter("inf");
if (text.equals("admin")) {
out.println("error");
} else {
out.println(text);
}
}
}
- 大小: 16.3 KB
- 大小: 15.9 KB
分享到:
相关推荐
该物流管理系统采用jsp+servlet、android和Ajax异步交互等技术来开发。数据库采用开源的mysql作为数据存储。结构上分为表现层、业务层和数据访问层。其中表现层采用MVC结构开发;业务层封装业务流程,为适应业务的...
该物流管理系统采用jsp servlet、android和Ajax异步交互等技术来开发。数据库采用开源的mysql作为数据存储。结构上分为表现层、业务层和数据访问层。其中表现层采用MVC结构开发;业务层封装业务流程,为适应业务的...
物流管理系统采用jsp servlet、android和Ajax异步交互等技术来开发。数据库采用开源的mysql作为数据存储。结构上分为表现层、业务层和数据访问层。其中表现层采用MVC结构开发;业务层封装业务流程,为适应业务的变更...
同步操作 :在jsp/servlet中 发送了一个同步的request 这时用户必须等待响应. 特点:返回一个整张页面 异步操作 : 发送了一个异步的request 这时用户不用等待 ,可以进行后续的操作 特点: 返回一张页面的...
《基于JSP的畅想空间电子商务系统》是一款针对计算机专业学生及...此外,系统可能还包括了对Ajax技术的支持,以实现页面的异步数据更新,提升用户体验。为了确保系统的实用性和教学价值,该资料包可能还包括了详细的
其中AJAX技术运用于浏览器中,以向服务器索取网页的部分信息为主,提高整个页面的刷新效率,更好实现动态显示和交互,使用户请求和服务器响应异步化;Struts是一个基于J2EE平台的经典MVC框架,主要采用Servlet和JSP...
- 前端方面:JavaScript(jquery)核心语法、AJAX异步刷新、Layui前端 UI 框架 - 数据库方面:Mysql基本的DDL、DML语法 > 项目结构: ![image-20230107091513086](DormitoryManage.assets/image-20230107091513086...
abstract (关键字) 抽象 ['æbstrækt] access vt.访问,存取 ['ækses]'(n.入口,使用权) algorithm n....Annotation [java] 代码注释 [ænәu'teiʃәn] anonymous adj.匿名的[ә'nɒnimәs]'(反义:directly adv....
Java8新特性 数据库MySQL与SQL语⾔ JDBC 2.2JavaEE核⼼ HTML、CSS、JS、XML Tomcat服务器、HTTP协议、JSP、Servlet组件 EL表达式、会话控制、⽂件的上传下载 Filter组件、Listener组件、异步传输框架AJax 系统整体...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。 ...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
4.5、交互性 4.6、本章摘要 4.7、开发实战讲解 第5章 JSP基础语法 5.1、JSP注释 5.2、Scriptlet 5.2.1、第一种Scriptlet: 5.2.2、第二种Scriptlet:!%> 5.2.3、第三种Scriptlet: 5.3、Scriptlet标签 5.4...
一个Java+ajax写的登录实例,附有JAVA源文件,JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个...
Hibernate 可以应用在任何使用JDBC 的场合, 既可以在Java 的客户端程序使用, 也可以在Servlet/JSP 的Web 应用中使用。 AJAX是Asynchronout JavaScript and XML的缩写,它并不是一门新的语言或技术,实际上是几项...