java web开发：ajax技术（一）——局部刷新技术的实现
一 什么是Ajax
Ajax：AsynchronousJavaScript And Xml——异步JavaScript和XML技术，还有一个比较通用的名称：页面局部刷新技术；是一种把多种技术融合到一起的JavaScript框架之一
二 Ajax主要用在哪里
Ajax的局部刷新是应用相对比较广泛的功能之一
比如常见搜索引擎的搜索建议（如在百度搜索页面中输入具体的字符后弹出匹配的关键词等等）、Google Maps（只刷新网页中地图所在的区域）、网页数据的验证（如账号等是否已经被注册或者使用）等等
三 怎么使用Ajax
（1）掌握Ajax技术，需要对一下内容有足够的了解
——标准web页面开发技术：HTML + CSS
——使用DOM模型解析HTML/XML的技术
——使用XMLHttpRequest对象（Ajax的核心，也是要讲解的重点）
——服务端编程技术：JSP/SERVLET
（2）实现一个简单Ajax程序的固定步骤
（2.1）创建XMLHttpRequest对象
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// 1. 声明变量，获取一个XMLHttpRequest对象(固定写法)
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX，请更新浏览器版本");
}
}
}
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
（2.2）创建处理服务器响应数据的代码
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// 2. 处理服务器响应回来的数据(固定写法)
xmlHttp.onreadystatechange = function () {
/* * * * * * * * * * * * * * * 自主开发部分 * * * * * * * * * * * * * * **/
}
};
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
（2.3）按照指定的方式打开和服务器之间的连接
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// 3. 打开远程连接
xmlHttp.open("method", "url", async);
参数解析
method:post/get——提交请求的方法
url——提交到服务器的url地址
async：true/false——是否异步提交
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
（2.4）发送请求
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
xmlHttp.send(null);
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
四 Ajax提交请求的两种方式
（1） GET方法提交异步请求
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
xmlHttp.open("get", "helloajax.action", true);
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
示例：客户密码拾取器
a. servlet
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
package com.phome.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("服务器接受到了请求...");
String password = req.getParameter("password");
System.out.println("客户端输入的密码：" + password);
}
}
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
b. web.xml配置
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
c. 视图页面开发——index.jsp
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
password :
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
d. 测试
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
运行项目
打开浏览器访问页面主页
在密码输入框中输入密码
服务器端会打印出用户输入的具体密码字符
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
（2）post方法体提交异步请求
将上例中视图页面中的发送请求部分修改为下面的post方式发送请求格式
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// 4. 发送请求
xmlHttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xmlHttp.send(null);
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
五 Ajax参数传递
（1）get方法提交参数
get方法提交参数，只需要在XMLHttpRequest.open();方法中，将参数附加到Url地址的后面即可
如：xmlHttp.open("get", "helloajax.action?password=" + value, true);
（2）post方法提交参数
post方法提交参数
a.设置请求头，告诉服务器参数包含在Post表单中提交
xmlHttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
b. 在发送请求时附加参数传递
如：
xmlHttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
xmlHttp.send("username=" + value);
六 Ajax处理服务器响应数据的方法
Ajax可以处理服务器返回的数据，主要有以下几种
（1）普通文本数据
（2）XML数据
（3）JSON数据——现下最流行的Ajax数据传递格式，详细JSON教程后续发布
示例：模拟用户信息查看器——JSON数据传递
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
a. 控制器servlet开发
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
package com.phome.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.phome.model.Address;
import com.phome.model.User;
public class AjaxServlet3 extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("gb18030");
resp.setContentType("text/html;charset=gb18030");
System.out.println("服务器接受到了请求...");
String username = req.getParameter("username");
System.out.println("客户端输入的账号：" + username);
User user = null;
Address addr = null;
if ("admin".equals(username)) {
user = new User("admin" , "admin" , 23 , "男" , addr);
} else if("manager".equals(username)) {
user = new User("manager" , "manager" , 33 , "女");
}
PrintWriter out = resp.getWriter();// 获取到浏览器的输出流
//out.write("{username:" + user.getUsername() + ",password:******,age:" + user.getAge() + ",gender:" + user.getGender() +"}");
out.write("{\"username\":\"" + user.getUsername() + "\",\"password\":\"******\",\"age\":\"" + user.getAge() + "\",\"gender\":\"" + user.getGender() +"\"}");
out.flush();
out.close();
}
}
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
b. web.xml配置
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
c. 视图开发
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
请输入要查询的账号 :
账号信息：
账号：
密码：
年龄：
性别：
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
d.测试
运行项目
打开浏览器，出现提示输入要查询的账号的文本输入框
输入指定的用户之后，从服务器返回具体的用户数据并打印到当前页面上
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
附注：XMLHttpRequest的几种状态
| 属性 |
描述 |
| onreadystatechange |
每次状态改变所触发事件的事件处理程序 |
| responseText |
从服务器进程返回数据的字符串形式 |
| responseXML |
从服务器进程返回的DOM兼容的文档数据对象 |
| status |
从服务器返回的数字代码 常见:404（资源未查询到）200（资源正确接收）500（服务器错误） |
| status Text |
伴随状态码的字符串信息 |
| readyState |
对象状态值 0—未初始化 1—正在加载 2—加载完毕 3—交互 4—完成 |
待续——JSON