JSP中servlet的使用

JSP是通过servlet将前端与后台连接起来，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" 
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>TestJSF</display-name>
  <servlet>
      <servlet-name>TestServlet</servlet-name>
      <servlet-class>org.bluemaplestudio.testjsf.TestServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>TestServlet</servlet-name>
      <url-pattern>/testAjax</url-pattern>
  </servlet-mapping>
</web-app>

其中TestServlet继承自javax.servlet.http.HttpServlet类：

package org.bluemaplestudio.testjsf;

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 TestServlet extends HttpServlet {  
     
    /**
     * 
     */
    private static final long serialVersionUID = 6153463874216920515L;

    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("1")) {  
                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";  
    }  
}  

访问的url地址为：“testAjax?id=1”

一般调用Ajax方式：

    var req;  
    function validate() {  
        //获取表单提交的内容  
        var idField = document.getElementById("userName");  
        //访问testAjax这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给testAjax  
        var url = "testAjax?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'>恭喜！！用户名可用！</font>";  
            document.getElementById("info").innerHTML = show;  
        }  
        else if( str == "NO") {  
            var show = "<font color='red'>对不起，用户名不可用！！请重新输入！</font>";  
            document.getElementById("info").innerHTML = show;  
        }  
    }  

 

使用jQuery.js调用Ajax访问方式：

    var req;  
    function validate() {  
        //获取表单提交的内容  
        var idField = document.getElementById("userName");  
        //访问testAjax这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给testAjax  
        var url = "testAjax?id=" + escape(idField.value);                  
       //4.$.ajax拼接data的异步请求   
        $.ajax({     
            url:url,
            data:{}, 
            type:'get',       
            async : true, //默认为true 异步     
            error:function(){     
               alert('error');     
            },     
            success:function(data){     
                //var check = data.responseText;  
                show (data);     
            }    
        }); 
    }  
      
    function show(str) {  
        if(str == "OK") {  
            var show = "<font color='green'>恭喜！！用户名可用！</font>";  
            document.getElementById("info").innerHTML = show;  
        }  
        else if( str == "NO") {  
            var show = "<font color='red'>对不起，用户名不可用！！请重新输入！</font>";  
            document.getElementById("info").innerHTML = show;  
        }  
    }