一:ajax介绍
什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
二:ajax的基本实现过程
1、创建XmlHttpRequest对象
2、注册状态监控回调函数 .何时调用。xhr属性readyState每次发生变化时
3、建立与服务器的异步连接
4、发出异步请求
三:案例
ajaxTest.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
<script type="text/javascript">
function changePost(obj){
//1 获得部门id
var job_name = obj.value;
//2 发送ajax
//2.1 核心类 XMLHttpRequest (兼容浏览器)
var xmlhttp=null;
if (window.XMLHttpRequest){// code for all new browsers
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject){// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2 设置回调函数
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//3 显示
var postSelectObject = document.getElementById("postSelectId");
postSelectObject.innerHTML = "<option>----请--选--择----</option>";
var textData = xmlhttp.responseText;
// 转换成json
var jsonData = eval("("+textData+")");
// 遍历
for(var i = 0 ; i < jsonData.length ; i ++){
var postObj = jsonData[i];
var id = postObj.id;
var salary = postObj.salary;
postSelectObject.innerHTML += "<option value='"+id+"'>"+salary+"</option>";
}
}
};
//2.3 打开连接
var url = "${pageContext.request.contextPath}/jobAction_ajaxManager?job_name=" + job_name;
xmlhttp.open("GET", url);
//2.4 发送,get请求没有发送请求体内容
xmlhttp.send(null);
}
</script>
</head>
<body>
<form namespace="/" action="staffAction_add">
<table width="88%" border="0" class="emp_table" style="width:80%;">
<tr>
<td width="8%">职务:</td>
<td width="62%">
<select id="job_name" name ="job_name" οnchange="changePost(this)">
<option>----请--选--择----</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td width="8%">职务:</td>
<td width="62%">
<select id="postSelectId" name="id">
<option>----请--选--择----</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.ui.theme" value="simple"></constant>
<constant name="struts.devMode" value="true"></constant>
<constant name="struts.objectFactory" value="spring"></constant>
<package name="jobModel" namespace="/" extends="json-default">
<action name="jobAction_*" class="com.test.action.JobAction" method="{1}">
<result name="ajax" type="json">
<!-- 设置值栈名称,让struts获得数据 -->
<param name="root">allInfo</param>
<!-- 设置对象中哪些属性需要的,支持正则表达式, 语法必须转义 [ ] . \d表示匹配下标 -->
<param name="includeProperties">
\[\d\]\.id
</param>
</result>
</action>
</package>
</struts>
action:
//jsp页面使用ajax
public String ajaxManager(){
String job_name = model.getJob_name() ;
List<JobModel> allInfo = jobService.getByJob(job_name) ;
System.out.println("--------长度"+allInfo.size());
ActionContext.getContext().getValueStack().set("allInfo",allInfo ) ;
return "ajax" ;
}
数据库:
选择职务为1:
数据库:
这样一个简单的ssh框架的ajax操作就完成了