我们在请求Servlet时,Servlet会将从数据库中查询到的数据封装成一个List数组,存储在request对象中,然后请求转发到另外一个页面,如以下代码使用request对象携带reportList转发到publication.jsp页面。

//1.将reportList数组存储在request对象中进行返回
request.setAttribute("reportList",reportList);

//2.请求转发到publication.jsp页面
request.getRequestDispatcher("/publication.jsp").forward(request,response);

这样,我们在publication.jsp中,使用EL表达式

${reportList[i].name}//获取第i个对象的name值
${reportList[i].name}//获取第i个对象的age值

就可以获取到reportList中的字段值,并显示在页面中,但是这样每次请求Servlet时都会进行请求转发,刷新整个页面。

        那么,我们如何在不刷新整个页面的情况下,获取到Servlet返回的数据,然后进行页面的局部刷新呢?

此时我们需要用到Ajax技术(AJAX=Asynchronous JavaScript and XML),AJAX可以通过后台与服务器进行少量数据交换,使网页进行局部刷新。

1. AJAX的基本用法

/*

    @param url:请求的地址
    @param funSucc:请求成功执行函数,接受返回的字符串str
    @param funFaild:请求失败执行函数,接受返回失败状态码的字符串str2
*/
function ajax(url,funSucc,funFaild) {
    var xhr;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();//IE6及其以下不支持
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open('GET',url,true);
    xhr.send(null);
    xhr.onreadystatechange=function (ev) {
        if(xhr.readyState==4){
            if(xhr.status==200){
                funSucc(xhr.responseText);
            }else {
                if(funFaild){
                    funFaild(xhr.status);
                }
            }
        }
    }
}

2. 调用ajax获取返回值

ajax('report',function(str){
    alert(str);//请求成功弹出返回的字符串str
},function(str2){
    alert(str2);//请求失败弹出失败状态码str2
})

3.由于ajax接受的数据为字符串,而Servlet从数据库中查询到的数据为List数组,我们需要在Servlet中将List数据转换为JSONString返回给前端。将List数组转换为JSONString使用com.alibaba.fastjson.JSON这个包,点击下载网站下载,很好用。

Map<String,Object> resMap=new HashMap<>();
resMap.put("reporList",reportList);//将reportList对象存储在resMap中
String resJSON= JSON.toJSONString(resMap);//将resMap中的数据转换为JSONString
response.getWriter().print(resJSON);//将JSONString字符串通过response对象返回

4.resJSON返回到前端后,我们需要对它进行获取。在第2步调用ajax获取返回值时,str接收到的就是resJSON字符串。现在我们改写第2步的代码:

ajax('report',function(str){
    //1.str为JOSNString字符串,我们需要先将它转换为JSON对象
    var obj=JSON.parse(str);
    //2.通过obj就可以获取到reportList数组的对象的属性值
    for(var i in obj){
        for(var j in obj[i]){
            alert(obj[i][j]);//遍历属性值

        }
    }
 },function(str2){
    alert(str2);//请求失败弹出失败状态码
})

这样,我们在不刷新整个页面的情况下,就能获取到Servlet通过response返回的数据,对页面进行局部刷新。

温馨提示:在这个过程中,我觉得比较复杂的地方是第4步,如何获取对象的值。这个获取得根据你得到的obj的具体情况,然后再一步一步取出自己想要的属性值。可以先console.log(obj)看看这个对象,然后再遍历,直到取到对象的值。