AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是一种创建交互式网页应用的开发技术。初学者应从最原始的AJAX开始学习，这样才能掌握AJAX的核心，下面是通过实例来详细了解AJAX的基础应用。
可以通过input按钮绑定点击事件，那么这个点击事件就是要实现的AJAX的方法，也可以body里面onload()加载方法。为了方便理解，我给AJAX统一了一个流程，要想实现AJAX，就要按以下步骤走：(1)创建XMLHttpRequest对象；(2)设置请求方式；(3)回调函数；(4)发送请求。
(1)创建XMLHttpRequest对象：
XMLHttpRequest对象可以在不加载整个网页的情况下，对网页进行部分更新，实现后台与数据库交换数据。语法:var xmlHttp = new XMLHttpRequest();如果IE版本是5或6，则是 var xmlHttp = new ActiveXObject("Microsoft,xmlHttp")
(2)设置请求方式；
Web开发中请求方式有基本的四种：GET，POST，PUT，DELETE，对应着对这个资源的查，改，增，删4个操作，通常只需要用到，get post。XMLHttpRuquest.open(参数1:请求类型get或post;参数2:文件在服务器上的位置；参数3：是否异步处理请求，是为true，否为false)如：xmlHttp.open("POST","StudentServlet.do?method=getCLassJson&msg="+new Date(),true);
(3)回调函数；
XMLHttpRequest对象的属性onreadystatechange，返回的是一个匿名方法，写作：xmlHttp.onreadystatechange=function(){"回调函数内容"},发送的请求在后台处理完，再返回到前台所实现的功能，就是回调函数。
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//要执行的操作
}else{
alert("AJAX服务器返回错误！");
}
}xmlHttp.readyState代表当前XMLHttpRequest对象的状态，从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。
xmlHttp.status是服务器返回的结果，其中200代表正确。404代表未找到页面，500代表内部服务器错误，400代表错误请求。
(4)发送请求
调用XMLHttpRequest对象的send()方法，xmlHttp.send();
下面是整个studentList.jsp页面的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<title>学生列表</title>
<script type="text/javascript">
var xmlHttp;
<!--创建xmlHttpRequest对象-->
function create(){
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
<!--回调函数-->
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var data = xmlHttp.responseText;
var jsonData = eval(data);
var classDom = document.getElementById("students_class");
var optionHtml = "<option value=''>请选择</option>";
if(jsonData.length>0){
for(var i=0;i<jsonData.length;i++){
var classes=jsonData[i];
optionHtml += "<option value='"+classes.classId+"'>"+classes.className+"</option>";
}
}
classDom.innerHTML=optionHtml;
}else{
alert("AJAX服务器返回错误！");
}
}
}
<!--核心方法-->
function run(url){
create();
xmlHttp.open("POST",url,true); //设置请求方式
xmlHttp.onreadystatechange= callback; //调用回调函数
xmlHttp.send(); //发送请求
}
function ajaxJson(){
run("StudentServlet.do?method=getCLassJson&msg="+new Date());
}
</script>
</head>
<body οnlοad="ajaxJson()">
<h2 align="center">学生列表</h2>
<table width="800" border = "1" align="center" cellspacing="0" cellpadding="2" style="text-align: center">
<tr height="30" id="searchRow">
<td colspan="11">
<form action="StudentServlet.do?method=list" method="post">
姓名:<input type="text" name="studentName" size="10" value="${studentName }"/>
班级:<select name="students_class" id="students_class">
<option value=''>请选择</option>
</select>
入学时间:<input type="text" name="startDate" size="10" value="${startDate }" οnfοcus="WdatePicker()" />
至<input type="text" name="endDate" size="10" value="${endDate }" οnfοcus="WdatePicker()"/>
<input type="submit" value="搜索" />
</form>
</td>
</tr>
<tr height="30">
<th>序号</th>
<th>学号</th>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>入学时间</th>
<th>创建人</th>
<th>创建时间</th>
<th colspan = "2">操作</th>
</tr>
<!--c:forEach为循环控制，将集合(Collection)中的成员循序浏览一遍 JSTL JSP标准标签库-->
<%--
var接收从集合里遍历出的每一个元素，items用于接收集合对象，·varStatus：迭代变量的名称，用来表示迭代的状态
begin 定义遍历的开始位置，end定义遍历的结束位置，step：迭代的步长
varStatus.index：当前这次迭代从0开始的迭代索引，varStatus.count：当前这次迭代从1开始的迭代计数 first和last
--%>
<c:forEach var="student" items="${requestScope.studentList }" varStatus="listStatus">
<tr height="30">
<td>${listStatus.count}</td>
<td>${student.students_id}</td>
<td>${student.className}</td>
<td>${student.students_name}</td>
<td>${student.students_age}</td>
<td>${student.students_sex}</td>
<td>${student.students_date}</td>
<td>${student.create_name}</td>
<td>${student.create_date}</td>
<td>
<a href="StudentServlet.do?method=getDetail&studentId=${student.students_id}">修改</a>
</td>
<td>
<a href="javascript:if(confirm('确定删除吗？'))location='StudentServlet.do?method=del&studentId=${student.students_id}'">删除</a>
</td>
</tr>
</c:forEach>
<tr height="30"><td colspan="11" align="right"><input type="submit" name="submitStu" value="+新增信息" οnclick="javascript:window.location.href='updateStudent.jsp'"/></td></tr>
</table>
</body>
</html>
//得到classes
private void getCLassJson(HttpServletRequest request,HttpServletResponse response) {
try {
String classsql = "select * from t_class";
ResultSet rs = DB.getRs(classsql);//获取结果集
List<Map<String,Object>> classList = new ArrayList<Map<String,Object>>();
Map<String,Object> classMap= null;
while(rs.next()){ //遍历结果集并用Map接收
classMap = new HashMap<String, Object>();
classMap.put("classId",rs.getObject("class_id"));
classMap.put("className",rs.getObject("class_name"));
classList.add(classMap);//添加到List集合
}
//List转成j s o n对象
JSONArray jsonList = JSONArray.fromObject(classList);
response.getWriter().write(jsonList.toString());//返回响应信息并输出对象到前端
response.getWriter().flush();//刷新初始化数据流
} catch (Exception e) {
e.printStackTrace();
} finally{
try {
response.getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
}
return;
}
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
