最近刚开始学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的更多相关文章

  1. 修改myeclipse的servlet模板

    今天修改myeclipse的servlet模板时,发生 Could not create the view: An unexpected exception was thrown.错误. 解决方案:1 ...

  2. 使用myeclipse创建servlet后输入地址无法访问

    问题: 使用myeclipse创建servlet后输入地址无法访问 1.首先,路径的访问地址是在web.xml里设置的,一般会自动生成(但是可能会和你自己输入的有出入) 你必须按照<url-pa ...

  3. 通过 jsp+ajax+servlet+webservice 远程访问天气预报服务

    通过 jsp+ajax+servlet+webservice 远程访问天气预报服务   - webservice 客户端访问的方式     1. java代码来访问     2. ajax 方式异步加 ...

  4. MyEclipse修改Servlet模板

    进入myeclipse的安装路径 然后进入plugins文件夹 打开搜索框,输入 *wizard* 找到名字是 com.genuitec.eclipse.wizards_11.5.0.me201310 ...

  5. myeclipse中Servlet出错

    在myeclipse中Servlet总是出错,执行的时候一直提示找不到出现404错误, 然后把代码拷贝到eclipse ee中就没有问题,一直不理解怎么回事. 然后发了好长时间试了好些方法,结果把my ...

  6. 使用MyEclipse创建Servlet

    https://www.yiibai.com/servlet/creating-servlet-in-myeclipse-ide.html 如何在myeclipse IDE中创建Servlet? 要在 ...

  7. 使用MyEclipse中servlet对SQL Server 2008的CRUD

    1.在MyEclipse下建立Web Project,找到根目录建立Database文件夹和Doc文件夹,Database用于保存数据库信息,Doc用于保存数据库表信息. 2.打开SQL Server ...

  8. myeclipse实现Servlet实例（1） 通过继承servlet接口实现

    1.在myeclipse新建web project,配置Tomcat(在myeclipse的Window--preferences) 2.然后在src新建servlet文件( 此处放在com.tsin ...

  9. myeclipse实现Servlet实例（2） 继承GenericServet类实现，需要重写service方法

    1.在myeclipse新建web project,配置Tomcat(在myeclipse的Window--preferences) 2.然后在src新建servlet文件( 此处放在com.tsin ...

随机推荐

  1. Js实现简单的洗牌

    基础篇 洗牌采用的是,每一张牌,与后面随机一张牌来交换位置. 扑克牌采用编码制(如,0代表红桃A,依次类推)为了编码方便,扑克牌不含大小王,故52张. 一.扑克牌的了解 扑克(英文:Poker) 一副 ...

  2. Discuz中解决jquery 冲突的方法 绝对简单

    将jquery.js在common.js之前载入,不然jquery的$()函数会覆盖common.js的$()函数: 然后用到jQuery的$()函数的地方都用jQuery()代替. 例如 $(doc ...

  3. UITableView UITableViewCell

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  4. IIS6.0 IIS7.5应用程序池自动停止的解决方法

    前边提到由win2003升级到win2008 server r2 64位系统,然后用了几个小时配置IIS7.5+PHP+MYSQL等的环境,先是遇到IIS7.5下PHP访问慢的问题,解决之后又出了新的 ...

  5. phonegap + xcode5.0.2 配置开发环境

    phonegap官网:  http://phonegap.com/ 第一部:安装nodejs 安装地址:http://nodejs.org/ 安装phoneGap 官网下载http://phonega ...

  6. Android之NDK开发（转）

    Android之NDK开发 一.NDK产生的背景 Android平台从诞生起,就已经支持C.C++开发.众所周知,Android的SDK基于Java实现,这意味着基于Android SDK进行开发的第 ...

  7. 手机升级到iOS10,用Xcode7.3进行真机调试方法

    今天发布的正式版的iOS10,手机果断升级了,结果发现Xcode7.3不能真机调试了,原因是Xcode7.3里面没有iOS10的sdk,下面这个压缩包你可以下载下来放在你的Xcode7.3里面,当然了 ...

  8. wxPython入门练习代码 一

    Bare.py: #1.导入必须的wxPython包 import wx #2.子类化wx应用程序类 class App(wx.App): #3.定义应用程序初始化方法 def OnInit(self ...

  9. Git 配置

    在 windows 上安装完 Git 会右键菜单中看到 Git 的快捷打开选项, 点 Git Bash Here 就可以在当前目录下打开 Git 的命令行 Git shell,初次使用 Git 先配置 ...

  10. Hibernate+Oracle注解式完整实例

    MyEclipse10,新建Web Project,取名hibernate, jar包 1.Cat.java (实体类) package com.hibernate.bean; import java ...