Ajax

一：删除记录或者注册（验证用户名）使用jQuery里面的Ajax与InputStream流相结合来实现局部书刷新技术（用Ajax时InputStream流比较有优势）
1：删除
【1】：JSP页面
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
<!--jQuery删除实现Ajax-->
//jQuery页面加载事件
$(function() {
//获得通过class属性<a>标签的对象
$(".delEmp").click(function(){
//获得隐藏域的name属性的值为该条记录的name名称
var ename = $(this).next().val();
//弹一个返回true  或false的框框出来
var falg = confirm("确定要删除" + ename + "的信息吗？");
//点击确定的操作
if (falg) {
//删除，用ajax的方式
//当前对象的父节点的父节点  也就是<td>
var $tr = $(this).parent().parent();
var url = this.href;
$.post(url, function(date) {
if (date == "1") {
alert("删除成功！");
$tr.remove();
} else {
alert("删除失败！");
}
});
}
//取消超链接行为
return false;
});
});
</script>

<td><a class="delEmp" href="delete?emp.eid=${eid }">删除</a>
<s:hidden name="ename"></s:hidden></td>
*注： 此处如果不是<a>标签，可以在var url=这里赋href的属性
【2】：Struts2.xmlw文件配置
<action name="delete" class="deleteEmp">
<result type="stream">
<param name="contentType">text/html</param>
            <param name="inputName">inputStream</param>
</result>
</action>
*注： param：参数  name：名称   contentType：内容类型 text/html：内容类型为text或html
inputName  下载文件的来源流，对应着action类中某个类型为Inputstream的属性名，例如取值为inputStream的属性需要编写getInputStream()方法
【3】：Action类中
public String execute(){
// 删除对象
try {
System.out.println("员工编码为："+emp.getEid());
Emp emp1 = empBiz.getEmp(emp.getEid());
empBiz.deleteEmp(emp1);
inputStream = new ByteArrayInputStream("1".getBytes("utf-8"));
} catch (Exception e) {
try {
inputStream = new ByteArrayInputStream("0".getBytes("utf-8"));
} catch (Exception e1) {
e1.printStackTrace();
}
e.printStackTrace();
}

return SUCCESS;
}
*注： ByteArrayInputSteam类从内存中的字节数组中读取数据，因此它的数据源是一个字节数组。这个类的构造方法包括：
    ByteArrayInputStream(byte[] buf)--------参数buf指定字节数组类型的数据源。
2：注册（验证用户名是否已存在、还有另外一个好理解一点的 见CRMSys项目/CRMSys/WebContent/pages/~user/role_add.jsp）
【1】：JSP页面
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

$(function(){
$("input[name=ename]").change(function(){
var val = $(this).val();
val = $.trim(val);
var $this = $(this);

if(val != ""){
//把当前节点后面的所有 font 兄弟节点删除
$this.nextAll("font").remove();

var url = "emp-validateLastName";
var args = {"lastName":val};
$.post(url, args, function(data){
//表示可用
if(data == "1"){
//在每个匹配的元素之后插入内容。
$this.after("<font color='green'>LastName可用!</font>");
}
//不可用
else if(data == "0"){
$this.after("<font color='red'>LastName不可用!</font>");
}
//服务器错误
else{
alert("服务器错误!");
}
});
}else{
alert("lastName 不能为空");
$(this).val("");
$this.focus();
}
});
})

</script>
*注：$("input[name=ename]")表示<s:textfield name="ename" label="LastName"></s:textfield>的对象
【2】：Struts2.xml配置文件
<action name="emp-validateLastName" class="empAction" method="validateLastName">
<result type="stream" name="ajax-success">
<param name="contentType">text/html</param>
<param name="inputName">inputStream</param>
</result>
</action>
【3】：Action页面
//lastName为页面的键值对    键的值
private String lastName;

public void setLastName(String lastName) {
this.lastName = lastName;
}

public String getLastName() {
return lastName;
}

public String validateLastName() throws UnsupportedEncodingException {
//JSP页面键值对传参var args = {"lastName":val};   getEmployeeByName(String name);返回boolean类型的值
if (empBiz.getEmployeeByName(lastName)) {
inputStream = new ByteArrayInputStream("1".getBytes("UTF-8"));
} else {
inputStream = new ByteArrayInputStream("0".getBytes("UTF-8"));
}

return "ajax-success";
}

二：删除记录或者注册（验证用户名）使用jQuery里面的Ajax与JSON相结合来实现局部书刷新技术（用Ajax时JSON是不可取的，有劣势，两个jar包，后期耦合度高，配置文件也比上面有缺点）
《json-lib-2.3-jdk15.jar、struts2-json-plugin-2.3.4.1.jar》导入两个包
1：注册（验证用户）
【1】：JSP页面
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">

//员工名称验证
$("#ename").blur(function() {
var ename = $(this).val();
var $info = $("#ename_info");
$info.css("color", "red");
if (ename == "" || ename == null) {
$info.html("员工姓名不能为空");
//$info.css("color","red");
} else {
$.ajax({
url : "checkName",
type : "get",
//数据类型为json
data : {
"ename" : ename
},
dataType : "json",
success : function(data) {
if (data.flag == true) {
$info.html("员工名已有");
} else {
$info.html("员工名可用");
}
},
error : function(data) {
alert("请求失败");
}
});
}
});

});
</script>
<td>员工编号</td>
<td><input type="text" id="eid" name="emp.eid"
readonly="readonly">
</td>
【2】：Struts2.xml配置文件

<package name="check" namespace="/" extends="json-default">
<action name="checkName" class="checkAction">
<result type="json"></result>
</action>
</package>
【3】：Action类
private String ename;
private boolean flag;

public String getEname() {
return ename;
}

public void setEname(String ename) {
this.ename = ename;
}

public boolean isFlag() {
return flag;
}

public void setFlag(boolean flag) {
this.flag = flag;
}


@Override
public String execute() throws Exception {
System.out.println(ename);
ApplicationContext ac = new ClassPathXmlApplicationContext("beans.xml");
EmpService ed = (EmpService) ac.getBean("empService");
try {
Emp emp = ed.getEmpByName(ename);
if (emp == null) {
flag = false;
} else {
flag = true;
}
System.out.println(flag);
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}


三：使用JavaScript实现Ajax技术
【1】：jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function check(){

//先得到名字
var name = document.getElementById("uname").value;
var mess = document.getElementById("mess");
if (name == "") {
    mess.innerHTML = "用户名不能为空";
} else {
    //表示用户名不为空
    var xml;
   
    try{
        //针对IE7以上创建的XMLHttpRequest对象
        xml = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        //针对于其他浏览器创建的XMLHttpRequest对象
        xml = new XMLHttpRequest();
      
    }
    if (xml != null) {
  
        //设置请求的连接
        xml.open("get", "FindNameServlet?uname=" + name, true);
        //发送请求
        xml.send(null);
       
        //根据回调函数来得到响应结果
        xml.onreadystatechange = function () {
            //判断状态码来判断服务器有没有完全响应
            if (xml.readyState == 4 && xml.status == 200) {
                var result = xml.responseText; //得到响应的结果是一个普通文本
                if (result == 'true') {
                    mess.innerHTML = '用户名已经存在';
                } else {
                    mess.innerHTML = '用户名可用';
                }
            }
        }
    }
}
}
</script>
</head>
 
<body>
用户名：  <input type="text"  id="uname" onblur="check()" /><span id="mess" style="color:red"></span>
</body>
</html>

二：Servlet类
public class FindNameServlet extends HttpServlet {
//其他部分略
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {


response.setContentType("text/html;charset=utf-8");

String name = request.getParameter("uname");

FindDao fd = new FindDao();
//调用底层的方法
boolean flag = fd.getNameByName(name);
PrintWriter out = response.getWriter();
out.print(flag);
out.flush();
out.close();
}
}

三：web.xml
<servlet>
    <description>This is the description of my J2EE component</description>
   <display-name>This is the display name of my J2EE component</display-name>
   <servlet-name>FindNameServlet</servlet-name>
    <servlet-class>com.bdqn.test.FindNameServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>FindNameServlet</servlet-name>
    <url-pattern>/FindNameServlet</url-pattern>
  </servlet-mapping>