Myeclipse+AJAX+Servlet
最近刚开始学AJAX的知识,这里介绍一个简单的Myeclipse+AJAX+Servlet项目。
此项目包含3个文件:index.jsp、check.java。还有一个需要配置的文件是:web.xml,此文件在/Webroot/WEB-INF目录下,在建立工程的时候选中一个复选框就会有此文件。
此项目的完成步骤:
1.建立index.jsp文件,输入以下代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <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>
var xmlHttpReq;
//创建一个XmlHttpRequest对象
function createXmlHttpRequest()
{
window.alert("进入到createXmlHttpRequest()函数");
if(window.XMLHttpRequest)
{
xmlHttpReq = new XMLHttpRequest();//非IE浏览器
}else
{
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
}
//检测用户名是否已经被注册
function checkUser()
{
window.alert("进入到checkUser()函数");
var username = document.getElementById("user").value;
if(username=="")
{
alert("用户名必须填写!");
return false;
}
//首先创建对象
createXmlHttpRequest();
//指明准备状态改变时回调的函数名
xmlHttpReq.onreadystatechange=handle;
//尝试以异步的get方式访问某个URL
//请求服务器端的一个servlet
//var url = "/web06/Servlet/"
var url = "./servlet/Check?username="+username;//+Math.random();
window.alert(username);
xmlHttpReq.open("get",url,true);
//向服务器发送请求
xmlHttpReq.send();
window.alert("已经发送数据");
}
//状态发生改变时回调的函数
function handle()
{
//准备状态为4
window.alert("进入到handle()函数");
if(xmlHttpReq.readyState==4)
{
window.alert("响应已完成;您可以获取并使用服务器的响应了。");
//响应状态码为200,代表一切正常
if(xmlHttpReq.status==200)
{
window.alert("交易成功 ");
var res = xmlHttpReq.responseText;
var result = document.getElementById("result");
result.innerHTML = "<font color=red>"+res+"</font>";
}
}
}
</script>
</head> <body>
<center><h1>表单注册</h1></center>
<hr>
姓名:
<input type="text" id="user">
<input type="button" value="检测用户名" onclick="checkUser()">
<span id="result"></span>
</body>
</body>
</html>
2.建立Check.java文件,此文件所属的packet名称为com.wepull.servlet,代码如下:
package com.wepull.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//@WebServlet (name="Check",urlPatterns={"/diaocha.do"})
public class Check extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决返回中文乱码问题
//response.getWriter().println("str");
response.setCharacterEncoding("utf-8"); String user = request.getParameter("username");
response.getWriter().println(user);
response.getWriter().println(request);
System.out.println(user+"传过来是null");
System.out.println(request);
System.out.println(user+"传过来是null");
//解决接收中文乱码问题
//user = new String(user.getBytes("iso-8859-1"),"utf-8");
if(user == "")
{
System.out.println("user is nullD!!!");
}
else
{
System.out.println(user); String msg = null;
if("jing".equals(user))
{
msg = "用户名已经被占用!";
}else
{
msg = "用户名可以使用!";
}
response.getWriter().println(msg);
} }
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
3.修改web.xml文件
修改前:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>web08</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
修改后:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>web08</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Check</servlet-name>
<servlet-class>com.wepull.servlet.Check</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Check</servlet-name>
<url-pattern>/servlet/Check</url-pattern>
</servlet-mapping>
</web-app>
其中web08是我的项目名称。
重要提醒(因为这个错误我Debug了好几天。。。)
var url = "./servlet/Check?username="+username;//+Math.random();
一定要注意""中的第一个字符 " ." ,否则Servlet就会收不到前端发送的数据(url不正确)。
4.最后运行出来结果如下:
4.1
4.2
ps:程序运行中和运行结果会有一些调试的代码,请大家自行忽略。
Myeclipse+AJAX+Servlet的更多相关文章
- 修改myeclipse的servlet模板
今天修改myeclipse的servlet模板时,发生 Could not create the view: An unexpected exception was thrown.错误. 解决方案:1 ...
- 使用myeclipse创建servlet后输入地址无法访问
问题: 使用myeclipse创建servlet后输入地址无法访问 1.首先,路径的访问地址是在web.xml里设置的,一般会自动生成(但是可能会和你自己输入的有出入) 你必须按照<url-pa ...
- 通过 jsp+ajax+servlet+webservice 远程访问天气预报服务
通过 jsp+ajax+servlet+webservice 远程访问天气预报服务 - webservice 客户端访问的方式 1. java代码来访问 2. ajax 方式异步加 ...
- MyEclipse修改Servlet模板
进入myeclipse的安装路径 然后进入plugins文件夹 打开搜索框,输入 *wizard* 找到名字是 com.genuitec.eclipse.wizards_11.5.0.me201310 ...
- myeclipse中Servlet出错
在myeclipse中Servlet总是出错,执行的时候一直提示找不到出现404错误, 然后把代码拷贝到eclipse ee中就没有问题,一直不理解怎么回事. 然后发了好长时间试了好些方法,结果把my ...
- 使用MyEclipse创建Servlet
https://www.yiibai.com/servlet/creating-servlet-in-myeclipse-ide.html 如何在myeclipse IDE中创建Servlet? 要在 ...
- 使用MyEclipse中servlet对SQL Server 2008的CRUD
1.在MyEclipse下建立Web Project,找到根目录建立Database文件夹和Doc文件夹,Database用于保存数据库信息,Doc用于保存数据库表信息. 2.打开SQL Server ...
- myeclipse实现Servlet实例(1) 通过继承servlet接口实现
1.在myeclipse新建web project,配置Tomcat(在myeclipse的Window--preferences) 2.然后在src新建servlet文件( 此处放在com.tsin ...
- myeclipse实现Servlet实例(2) 继承GenericServet类实现,需要重写service方法
1.在myeclipse新建web project,配置Tomcat(在myeclipse的Window--preferences) 2.然后在src新建servlet文件( 此处放在com.tsin ...
随机推荐
- nullable,nonnull, null_resettable以及_Null_unspecified的区别和使用
1.关键字:可以用于属性 方法和返回值参数中 关键字作用:提示作用 告诉开发者属性信息 关键字的目的:迎合swift 强语言,swift必须要指定一个对象是否为空 关键字好处:提高代码规划,减少沟通 ...
- 基础算法之冒泡排序Bubble Sort
原理 将相邻的数据两两进行比较,按照从小到大或者从大到小的顺序进行位置交换,这样一趟过去后,最大或最小的数字被交换到了最后一位,然后从头开始再次进行两两比较交换,直到倒数第二位时结束.按照此规则,若干 ...
- Easyui 异步树的实现
网上最多的onBeforeExpand 可用,因为后台代码没写对导致树形结构重复加载数据 前端代码: <%@ page language="java" contentType ...
- 数据库 'MessageManage' 的事务日志已满。若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列。
提供两种办法:(SQL Server2008) 注意:建议使用第一种方法.第二种方法只是删除已有日志文件,日后还会继续生成. 第一种方法:清空日志. 1.打开企业管理器,直接在查询分析器里执行:(如果 ...
- Eclipse 创建maven项目
新建maven project
- nmon--非常棒的LINUX/AIX性能计数器监测和分析工具
转自51Testinghttp://bbs.51testing.com/viewthread.php?tid=116526 经常看到很多人讨论说loadrunner对linux/aix的性能监测太少, ...
- Swift 07.关键字
每一种语言都有相应的关键词,每个关键词都有他独特的作用,来看看swfit中的关键词: 关键词: 用来声明的: class, deinit, enum, extension, func, import, ...
- 虚拟化 模板制作 rhev笔记
查看主机是否支持RHEV:一要支持vt-x, 一定是64位操作系统 cat /proc/cpuinfo 查看是否有lm(64位) 是否有, vmx(or svm)(vt-x) 虚拟化中制作Linux模 ...
- 大话设计模式之<一>计算器的深思
一个面试题引发的深思,试问我们会如何用面向对象的语言写一个计算器,自从我学习了高级编程之后,面向对象的思想也算是深入在我的编程思想里面,从最开始学习的人类到各色人种,及动物到猫狗鼠这样的例子,我甚至听 ...
- apache和nginx
虽然nginx使用较少 还是写写文章,记录下 nginx是异步非阻塞,apache是阻塞的. apache动态页面比nginx好. 由于nginx的高并发性(使用epoll模型),所以出来静态页面性能 ...