中软国际实习第七天-Ajax使用

Ajax使用

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。下面就Ajax的使用流程进行说明：
(1)在webapp下导入js包
(2)在header中加入引用声明

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>

（3）在页面中加入对js的调用
表单中复选框设置name为ids,value为userInfo.id，用于给函数传参

<td><input name="ids" type="checkbox" value="${userInfo.id}"></td>
给“批量删除”按钮增加对deleteAll函数的调用
<button type="button" class="btn btn-default" title="批量删除"
      onclick="deleteAll()" >
   <i class="fa fa-file-o"></i> 批量删除
</button>

（4）在header中增加对函数的具体实现
其中@ResponseBody为声明返回JSON字符串给前端

@RequestMapping("/deleteAll.do")
@ResponseBody
public String deleteAll(String userList){
    String[] strs = userList.split(",");
    List<Integer> ids = new ArrayList<>();
    for(int i = 0; i < strs.length; i++){
        ids.add(Integer.parseInt(strs[i]));
    }
    userInfoService.deleteAll(ids);
    return "";
}

（5）分别进行持久层、服务层和控制层的实现
// 持久层接口

void deleteAll(List<Integer> ids);
// mapper文件实现
<delete id="deleteAll" parameterType="list">
    delete from userinfo where id in
        <foreach collection="list" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
</delete>

//服务层实现

@Override
public void deleteAll(List<Integer> ids) {
    userInfoDao.deleteAll(ids);
}

// 控制层实现

@RequestMapping("/deleteAll.do")
@ResponseBody
public String deleteAll(String userList){
    String[] strs = userList.split(",");
    List<Integer> ids = new ArrayList<>();
    for(int i = 0; i < strs.length; i++){
        ids.add(Integer.parseInt(strs[i]));
    }
    userInfoService.deleteAll(ids);
    return "";
}

（6）效果展示

使用Spring Security进行授权和认证

（1）使用认证来显示用户信息

<div class="pull-left info">
   <p>
      <security:authentication property="principal.username"></security:authentication>
   </p>
   <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>

（2）使用权限来对视图进行管理，有权限的用户可以看到“用户管理”模块

<security:authorize access="hasRole('ADMIN')">
   <a
   href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5"> <i
      class="fa fa-circle-o"></i> 用户管理
   </a>
</security:authorize>

get请求与post请求

get请求：
实例：查询，获取用户信息
特点：传参显示在URL中，常用于获取信息而非修改信息
缺陷：由于传参是后缀在URL中一起发送，因此传参内容收到URL长度的限制，此外也会有一定的安全问题。

post请求：
实例：表单数据发送，更新用户信息
特点：放在HTTP的包中发送，不会显示在URL中，POST的内容是没有长度限制的。常用于修改资源。

参考资料

[1].https://baike.baidu.com/item/ajax/8425
[2].https://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html