使用ajax实现jsp在不刷新页面的前提下与后台进行数据交互

先附上此次测试的相关页面名称及代码，共有三个文件：web.xml、index.jsp以及放在包 com.ajax.com下的AjaxServerlet.java。

代码及解释如下：

(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+"/";
%>



  
    
    
 
    


点击
    

xmlhttp.readyState 的取值有0,1,2,3,4。readyState的值每一次改变都会自动调用 onreadystatechange 。

ReadyState取值	描述
0	描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1	描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2	描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3	描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4	描述一种"已加载"状态；此时，响应已经被完全接收。

在点击按钮后，从创建XMLHttpRequest对象开始到数据交互结束，虽然ReadyState一直在变化，但由于会自动调用 onreadystatechange  ，故能在整个过程中实现监听数据交互的整个流程并做出相应的回应，在这里，当 (xmlhttp.readyState == 4 && xmlhttp.status == 200) ，即数据发送完毕且连接正常时，获取后台传过来的数据并显示到 id 为 myAjax 的 div 中。

当不需要传递参数到后台时，可将send()方法中的字符串替换为null,即 send(null)，或在 open() 方法中使用 get 方式连接。

(2) web.xml

        
    
            AjaxServerlet
        com.ajax.com.AjaxServerlet
    
 
    
        AjaxServerlet
        /AjaxServerlet
    
   

配置servlet的目的是响应 index.jsp 页面中点击按钮出发事件时交由后台java类处理，标签中的"/AjaxServerlet"即为前端使用ajax时需要连接的url地址，使用时应去掉“/”。

(3) AjaxServerlet.java

package com.ajax.com;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServerlet extends HttpServlet {
     
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String age = request.getParameter("age");
        String name = request.getParameter("name");
 
        String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
                + "\":" + age + "}";
        System.out.println(personJSON);
        response.getWriter().write(personJSON);
    }
 
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
 
    }
}

获取前端传过来的数据并传参给前端。