您的位置：首页 > 其它

ajax 异步请求

2018-01-23 17:00 148 查看
本人对于ajax的理解是：后台数据与服务器数据进行少量的交换，在不加载整个页面时实现数据的局部刷新。简单的说，就是实现一个页面部分数据的更新。

ajax工作原理



下面介绍一个实例

先贴上jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../base.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加用户信息</title>
<script type="text/javascript">
function init(){
//恢复角色
var roleId="${entity.roleId}";
if(roleId!=null&&roleId!="")
$("#roleId").val(roleId);
}

var xmlHttp;
function _validUsNo(vr) {
//1.创建一个请求对象
xmlHttp=new XMLHttpRequest();
//2.设置请求链接
xmlHttp.open("POST","<%=path%>/usMrg?flag=validUser&userName="+vr,true);
//3.设置回调函数
xmlHttp.onreadystatechange=rollBack;
//4.发送请求
xmlHttp.send(null);
}

function rollBack() {
if(xmlHttp.readyState==4 && xmlHttp.status==200){
if(xmlHttp.responseText == true ||xmlHttp.responseText == "true" ){
document.getElementById("userNoMsg").innerHTML="";
document.getElementById("subT").removeAttribute("disabled");
}else{
document.getElementById("userNoMsg").innerHTML="用户名已存在";
$("#subT").attr("disabled","disabled");
}
}
}
</script>
</head>
<body onload="init()">
<form action="<%=path%>/usMrg" >
<input type="hidden" name="flag" value="save">
<input type="hidden" name="status" value="0">
<fieldset>
<legend>用户信息添加</legend>
<center>${msg}</center>
<table align="center" width="60%" id="tableId">
<tr>
<th>用户名</th>
<td>
<input type="text" name="userName" id="userName"   onchange="_validUsNo(this.value)"  value="${entity.userName}" >
<span id="userNoMsg" style="color: red"></span>
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input type="password" name="password" id="password" value="${entity.password}" >
</td>
</tr>
<tr>
<th>姓名</th>
<td>
<input type="text" name="name" id="name" value="${entity.name}">
</td>
</tr>
<tr>
<th>角色</th>
<td>
<select name="roleId" id="roleId">
<option value="">---请选择---</option>
<c:forEach items="${roleMap}" var="role">
<option value="${role.key}">${role.value}</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="subT" value="保存">
<input type="reset" value="重置">
<input type="button" name="Submit" value="返回" onclick="javascript:history.back()">
</td>
4000
</tr>
</table>
</fieldset>
</form>
</body>
</html>
java代码
package com.shude.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

import com.shude.DAO.UserDAO;
import com.shude.DAO.im.IUserDAO;
import com.shude.entity.UserInfo;

public class UserServlet extends BaseServlet<UserInfo>{
private static final long serialVersionUID = 7060461831514174376L;
private IUserDAO userDAO;
public UserServlet(){
super();
userDAO=new UserDAO();
setBaseDao(userDAO);
urlMap.put("save_ok", "jsp/userMrg/addUser.jsp");
urlMap.put("queryById_ok", "jsp/userMrg/modifyUser.jsp");
urlMap.put("modify_ok", "jsp/userMrg/modifyUser.jsp");
urlMap.put("query_ok","jsp/userMrg/findUser.jsp");
urlMap.put("detailsById_ok","");
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String flag=req.getParameter("flag");
if("login".equals(flag)){
login(req,resp);
}else if("validUser".equals(flag)){
validUser(req, resp);
}
}

private void validUser(HttpServletRequest req, HttpServletResponse resp) {
String user=req.getParameter("userName");
boolean flag=userDAO.validUser(user);
PrintWriter out=null;
try {
out=resp.getWriter();
out.print(flag);
out.flush();
} catch (IOException e) {
e.printStackTrace();
}finally {
out.close();
}
}
}

如果不能看明白，需结合之前我写的两篇文章一起看 JDBC 实现通用的增删改查基础类       servlet通用的基础类
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航