关于Ajax ,jQuery以及jQuery Ajax 编程（四）

最新推荐文章于 2024-10-05 19:40:46 发布

EZ127

最新推荐文章于 2024-10-05 19:40:46 发布

阅读量295

点赞数

文章标签： ajax servlet jsp

基于ajax+servlet+jsp的简单功能实现：

工程结构：

servlet:

package com.ajax.test;

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 DoAjaxServlet extends HttpServlet {  
     
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)  
    throws ServletException, IOException {  
        response.setContentType("text/html;charset=UTF-8");  
        PrintWriter out = response.getWriter();  
        try {  
            response.setContentType("text/html");  
            response.setHeader("Cache-Control", "no-store");  
            response.setHeader("Pragma", "no-cache");  
            response.setDateHeader("Expires", 0);  
            String name = request.getParameter("id");  
            if(name.equals("luzhu")) {  
                out.write("OK");  
            }  
            else {  
                out.write("NO");  
            }  
        } finally {   
            out.close();  
        }  
    }   
  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
    throws ServletException, IOException {  
        processRequest(request, response);  
    }   
  
    @Override  
    protected void doPost(HttpServletRequest request, HttpServletResponse response)  
    throws ServletException, IOException {  
        processRequest(request, response);  
    }  
  
    @Override  
    public String getServletInfo() {  
        return "Short description";  
    }  
  
}

web.xml配置：

   <servlet>  
	    <servlet-name>DoAjaxServlet</servlet-name>  
	    <servlet-class>com.ajax.test.DoAjaxServlet</servlet-class>  
   </servlet>  
   <servlet-mapping>  
	    <servlet-name>DoAjaxServlet</servlet-name>  
	    <url-pattern>/validate.do</url-pattern>  
   </servlet-mapping>

 <%@page contentType="text/html" pageEncoding="UTF-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
    "http://www.w3.org/TR/html4/loose.dtd">  
 <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <script type="text/javascript" src="<%=basePath%>js/Ajax.js" charset="utf-8"></script>        
    </head>  
    <body>  
        <h1>Ajax Test</h1><p>  
        <form action="" method="get" name="form">  
            <br>  
            用户名：  
            <input type="text" size="10" maxlength="8" id="userName" name="name" οnblur="validate()">  
            <span id="info"></span>  
            <br>  
            密码：  
            <input type="text" size="10" maxlength="8" >  
        </form>  
    </body>  
</html>

提示：这里的

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

帮助我们在启动tomcat时获取相应的http地址，这就是为什么经常有人导入绝对路径却依然无法正常显示的原因的解决方案。

Ajax.js:

    var req;  
    function validate() {  
        //获取表单提交的内容  
        var idField = document.getElementById("userName");  
        //访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do  
        var url = "validate.do?id=" + escape(idField.value);                  
        //创建一个XMLHttpRequest对象req  
        if(window.XMLHttpRequest) {  
            //IE7, Firefox, Opera支持  
            req = new XMLHttpRequest();  
        }else if(window.ActiveXObject) {  
            //IE5,IE6支持  
            req = new ActiveXObject("Microsoft.XMLHTTP");  
        }  
        /* 
         open(String method,String url, boolean )函数有3个参数 
         method参数指定向servlet发送请求所使用的方法，有GET,POST等 
         boolean值指定是否异步，true为使用，false为不使用。 
         我们使用异步才能体会到Ajax强大的异步功能。 
         */  
        req.open("GET", url, true);  
        //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态  
        req.onreadystatechange = callback;  
        //send函数发送请求  
        req.send(null);                  
    }  
      
    function callback() {  
        if(req.readyState == 4 && req.status == 200) {  
            var check = req.responseText;  
            show (check);  
        }  
    }  
      
    function show(str) {  
        if(str == "OK") {  
            var show = "<font color='green'>successful usename!</font>";  
            document.getElementById("info").innerHTML = show;  
        }  
        else if( str == "NO") {  
            var show = "<font color='red'>the usename is not exist!</font>";  
            document.getElementById("info").innerHTML = show;  
        }  
    }

键入地址：http://localhost:8080/ajax_Servlet/login.jsp  
结果：

EZ127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

关于Ajax ,jQuery以及jQuery Ajax 编程 （四）

关于Ajax ,jQuery以及jQuery Ajax 编程（四）