[Web基础]-Ajax
...大约 19 分钟
[Web基础]-Ajax
1.Ajax基本概念
【1】Ajax由来
同步 VS 异步
举个例子：普通B/S模式同步、AJAX技术(异步)
同步：提交请求-->等待服务器处理-->处理完毕返回 这个过程客户浏览器不能做任何事
异步：请求通过事件触发-->服务器处理-->(这个时候浏览器可以做别的)->处理完毕。
同步是指：发送数据后，等到接收方发回响应后才发下一个数据包的通讯方式
异步是指：发送方发送数据后，不等待收方发回响应，接着发送下个数据包
Ajax概念
在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。也就是说，在Web的传统模型中，客户端向服务器发送请求，服务器响应后返回整个页面
Ajax（Asynchronous JavaScript and XML）是一种不用刷新整个页面便可与服务器通讯的办法，它提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。在这个过程中用户不知道浏览器正在与服务器通信，使得Web站点看起来是即时响应的
【2】Ajax原理
Ajax核心
Ajax的核心是JavaScript对象XmlHttpRequest
该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户
Ajax交互
Ajax采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的”处理->等待->处理->等待”缺点。用户的浏览器在执行任务时即装载了AJAX引擎。
AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行
【3】Ajax执行过程
a.创建XMLHttpRequst对象
基本概念
XMLHttpRequest对象：XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准
创建XMLHttpRequest对象（由于非标准所以实现方法不统一）
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么
创建XMLHttpRequst对象：（固定的内容）
function createXMLHttpRequest(){
var XMLHttpReq;
if(window.XMLHttpRequest){ //火狐等浏览器
XMLHttpReq =new XMLHttpRequest();
}else if(window.ActiveXObject){//IE浏览器
try{
XMLHttpReq =new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
XMLHttpReq =new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttpReq;
}
b.打开和服务器的连接
XMLHttpRequest 对象的open 方法允许程序员用一个Ajax调用向服务器发送请求
open(method, url, asynch);
参数说明
- method：请求类型
类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。
- url：路径字符串
指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
- asynch：请求是否要异步传输
默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行
c.发送请求到服务器端
open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
send(data);
参数说明
- data：将要传递给服务器的字符串
若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);
当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null
d.响应客户端请求
响应客户端请求步骤说明
1）判断服务器状态是否交互完毕
2）判断数据是否成功返回到客户端
3）处理服务器端响应的数据
1）判断服务器状态是否交互完毕
Onreadystatechange
该事件处理函数由服务器触发，而不是用户
在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState来实现。改变 readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发readystatechange事件
readyState
readyState属性表示Ajax请求的当前状态。它的值用数字代表，参考说明如下所示
0 代表未初始化：还没有调用 open 方法
1 代表正在加载：open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕：send 已被调用。请求已经开始
3 代表交互中：服务器正在发送响应
4 代表完成：响应发送完毕
2）判断数据是否成功返回到客户端
status
服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分
# 常用状态码及其含义
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应
// 参考代码
xmlReq.onreadystatechange=function(){
if(xmlReq.readyState==4){
if(xmlReq.status==200){
......处理服务器响应的数据
}
}
}
3）处理服务器端响应的数据
服务器端响应的数据分为文本text类型和xml类型
responseText
XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束
responseXML
如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中。
只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。MIME 类型必须为 text/xml
【4】Ajax实现
🔖原生JS实现Ajax
核心对象：XMLHttpRequest
用于在后台与服务器交换数据，可以在不重新加载整个网页的情况下，对网页的某部分进行更新
打开链接：open(method,url,async)
method：请求的类型 GET 或 POST
url：请求资源的路径
async：true(异步) 或 false(同步)
发送请求：send(String params)
params：请求的参数(POST 专用)
处理响应：onreadystatechange
readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪
status：200-响应已全部 OK
获得响应数据形式
responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据
⚡JQuery方式实现Ajax
$.get(url,[data],[callback],[type]);
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等
2.Ajax案例
【1】Ajax的基本使用-测试服务器
ajax.js
/**
* Ajax的工作原理：Ajax的核心即JavaScript与XMLHttpRequst
* 该对象在浏览器中是一种支持异步请求的计数
* Ajax是基于JavaScript的操作，数据通过js传到服务器，需要考虑如下问题：
* 1.如何把用户请求的数据发送到服务器
* 2.服务器接收到如何处理
* 3.服务器处理完成后返回的数据格式是什么？
* xml、json数据 -- 客户端如何解析这种数据格式
* 4.如何把解析的数据通过JavaScript显示到客户端
*/
/**
* 利用Ajax完成与服务器进行交互的步骤 开发步骤：
* a.创建XMLHttpRequest对象
* b.打开与服务器的链接
* c.发送数据
* d.接收服务器的响应数据
*/
function createXMLHttpRequest(){
var XMLHttpReq;
//针对不同的浏览器创建XMLHttpRequest对象
if(window.XMLHttpRequest){ //火狐等浏览器
XMLHttpReq =new XMLHttpRequest();
}else if(window.ActiveXObject){//IE浏览器
try{
XMLHttpReq =new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
XMLHttpReq =new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttpReq;
}
// 在页面加载的时候这个函数自动执行
window.onload=function(){
document.getElementById("test").onclick=function(){
// 测试：alert("hello ajax...");
// a.创建XMLHttpRequest对象
var xmlReq=createXMLHttpRequest();
// b.打开与服务器的链接
/**
* 参数1：请求方式
* 参数2：请求路径
* 参数3：是否是同步的
* xmlReq.open("GET","AjaxServlet",true);
*/
xmlReq.open("GET","AjaxServlet",true);
// c.发送数据
/**
* 如果请求方式是get,则不需要向服务器传递数据：send(null)
* 如果请求方式是post,则传递指定的数据send(data)
*/
xmlReq.send(null);
// d.接收服务器的响应数据
/**
* onreadystatechange是服务器触发,会通知客户端当前服务的状态
* 0 -- 未初始化：还没有调用open方法
* 1 -- 正在加载：open方法已被调用，但send方法还没被调用
* 2 -- 已加载完毕：send方法已被调用，请求已开始处理
* 3 -- 交互中：服务器正在发送响应
* 4 -- 完成：响应发送完毕
* status 判断数据是否由服务器成功返回到客户端 状态码分为如下情况:
* 404 没找到页面(not found)
* 403 禁止访问(forbidden)
* 500 内部服务器出错(internal service error)
* 200 一切正常(ok)
* 304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
* 在测试的时候如果始终无法出现预期的效果有可能是响应的jsp文件放置位置有误
* 将其方在WebContent目录下直接进行测试，无须多加一级目录
*/
xmlReq.onreadystatechange=function(){
if(xmlReq.readyState==4){//4 代表 响应发送完毕 交互完成
if(xmlReq.status==200){//2000 代表数据由服务端 成功传递到客户端
//5.处理数据 客户端返回的数据 是文本类型 可以使用responseText 获取数据
var textDoc =xmlReq.responseText;
alert("服务器返回的数据是:"+textDoc);
}
}
}
}
}
AjaxServlet.java
/**
* AjaxServlet基本测试
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write("hello...");
pw.write("ajax...");
pw.write("test...");
pw.flush();
pw.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
base.jsp：定义jsp文件用于测试
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>1.Ajax的基本使用</title>
</head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajax.js"></script>
<body>
<form action="" method="post">
<input type="button" value="测试服务器" name="test" id="test"/>
</form>
</body>
</html>
测试
访问资源http://localhost:8080/JavaWeb_Ajax/base.jsp，点击“测试服务器”结果显示如下内容
【2】邮箱注册
代码分析：模拟数据库实现用户数据的保存
User.java
public class User {
private String username;
private String password;
public User() {
super();
}
public User(String username, String password) {
super();
this.username = username;
this.password = password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User [username=" + username + ", password=" + password + "]";
}
}
DBUser.java
public class DBUser {
// 模拟数据库保存User数据
private static List<User> list = new ArrayList<>();
static {
list.add(new User("haha","haha"));
list.add(new User("xixi","xixi"));
list.add(new User("bibi","bibi"));
}
// 验证用户是否存在
public static boolean checkUserName(String name) {
boolean flag = false;
for(int i=0;i<list.size();i++) {
User user = list.get(i);
if(user.getUsername().equals(name)) {
flag=true;
}
}
return flag;
}
}
CheckUsernameServlet.java
@WebServlet("/CheckUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {
/**
* 此处需要注意xml的书写规范，如果出错则打印数据进行分析
* 查看是否是xml的编辑有误
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw=response.getWriter();
String username=request.getParameter("username");
boolean flag =DBUser.checkUserName(username);
//把结果拼接为xml 然后响应到客户端
StringBuilder sb =new StringBuilder();
sb.append("<result>");
sb.append("<res>");
if(flag) {
sb.append("1");
}else {
sb.append("0");
}
sb.append("</res>");
sb.append("</result>");
//<result><res>1</res></result>
System.out.println(sb.toString());
pw.println(sb.toString());
pw.flush();
pw.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
jsp测试
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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>ajax案例1：用户名验证</title>
</head>
<script type="text/javascript">
var XMLHttpReq;
function createXMLHttpRequest() {
//针对不同的浏览器创建XMLHttpRequest对象
if (window.XMLHttpRequest) { //火狐等浏览器
XMLHttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject) {//IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function back() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
//得到服务器相应的数据 是xml数据格式的类型
var xmlDoc = XMLHttpReq.responseXML;
var info = document.getElementById("info");
var flag = xmlDoc.getElementsByTagName("res")[0].firstChild.nodeValue;
if (flag == 1) {
var error = "该邮箱已经被注册,请重新输入..";
info.innerHTML = error;
} else {
info.innerHTML = "恭喜你，此邮箱可以使用!!";
}
}
}
}
function checkUserName() {
var name = document.getElementById("username").value;
// a.创建XMLHTTPRequest对象
createXMLHttpRequest();
// b.打开链接
var url = "CheckUserNameServlet?username=" + name;
XMLHttpReq.open("GET", url, true);
// c.发送数据
XMLHttpReq.send(null);
// d.接收服务器的响应数据
XMLHttpReq.onreadystatechange = back;
}
</script>
<body>
<form action="reg">
用户名: <input type="text" name="username" id="username" onblur="checkUserName()" />
<span id="info"></span><br/>
密码:<input type="text" name="pwd"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
测试结果
访问资源http://localhost:8080/JavaWeb_Ajax/reg.jsp，输入数据分别进行测试
【3】下拉列表的二级联动
LinkerServlet.java
/**
* 二级联动测试
*/
@WebServlet("/LinkerServlet")
public class LinkerServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/xml;charset=UTF-8");;
// 获取用户选择的省份id
String targetId = request.getParameter("id");
String xml_start="<selects>";
String xml_end="</selects>";
String xml="";
if(targetId.equals("0")) {
xml = "<select><value>0</value><text>未选择</text></select>";
}else if(targetId.equals("1")) {
xml = "<select><value>1</value><text>杭州市</text></select>";
xml += "<select><value>2</value><text>温州市</text></select>";
xml += "<select><value>3</value><text>宁波市</text></select>";
xml += "<select><value>4</value><text>嘉兴市</text></select>";
}else if(targetId.equals("2")) {
xml = "<select><value>1</value><text>济南市</text></select>";
xml += "<select><value>2</value><text>青岛市</text></select>";
xml += "<select><value>3</value><text>潍坊市</text></select>";
xml += "<select><value>4</value><text>济宁市</text></select>";
}else if(targetId.equals("3")) {
xml = "<select><value>1</value><text>南京市</text></select>";
xml += "<select><value>2</value><text>苏州市</text></select>";
xml += "<select><value>3</value><text>南通市</text></select>";
xml += "<select><value>4</value><text>常州市</text></select>";
}else if(targetId.equals("4")) {
xml = "<select><value>1</value><text>厦门市</text></select>";
xml += "<select><value>2</value><text>福州市</text></select>";
xml += "<select><value>3</value><text>龙岩市</text></select>";
xml += "<select><value>4</value><text>福安市</text></select>";
}else if(targetId.equals("5")) {
xml = "<select><value>1</value><text>兰州市</text></select>";
xml += "<select><value>2</value><text>敦煌市</text></select>";
xml += "<select><value>3</value><text>定西市</text></select>";
xml += "<select><value>4</value><text>白银市</text></select>";
}else if(targetId.equals("6")) {
xml = "<select><value>1</value><text>广州市</text></select>";
xml += "<select><value>2</value><text>潮阳市</text></select>";
xml += "<select><value>3</value><text>珠海市</text></select>";
xml += "<select><value>4</value><text>澄海市</text></select>";
}
String res = xml_start+xml+xml_end;
response.getWriter().write(res);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
linker.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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>ajax案例1：用户名验证</title>
</head>
<script type="text/javascript">
var XMLHttpReq;
function createXMLHttpRequest() {
//针对不同的浏览器创建XMLHttpRequest对象
if (window.XMLHttpRequest) { //火狐等浏览器
XMLHttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject) {//IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function back() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
//得到服务器相应的数据 是xml数据格式的类型
var xmlDoc = XMLHttpReq.responseXML;
var info = document.getElementById("info");
var flag = xmlDoc.getElementsByTagName("res")[0].firstChild.nodeValue;
if (flag == 1) {
var error = "该邮箱已经被注册,请重新输入..";
info.innerHTML = error;
} else {
info.innerHTML = "恭喜你，此邮箱可以使用!!";
}
}
}
}
function checkUserName() {
var name = document.getElementById("username").value;
// a.创建XMLHTTPRequest对象
createXMLHttpRequest();
// b.打开链接
var url = "CheckUserNameServlet?username=" + name;
XMLHttpReq.open("GET", url, true);
// c.发送数据
XMLHttpReq.send(null);
// d.接收服务器的响应数据
XMLHttpReq.onreadystatechange = back;
}
</script>
<body>
<form action="reg">
用户名: <input type="text" name="username" id="username" onblur="checkUserName()" />
<span id="info"></span><br/>
密码:<input type="text" name="pwd"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
【4】分页
分页场景
针对大数据展示，引入分页减轻页面大数据量渲染压力
刷新分页：每次获得页面信息 ，需要刷新当前的页面信息
无刷新分页：使用ajax实现
不同数据库下的分页
# mysql
select * from table limit begin,个数
# oracle
select * from (select a.*,rownum rn from books a) where rn between begin and end;
/*
rownum说明：
rownum是个伪列，是随着结果集生成的，返回的第一行分配的是1，第二行是2等等，生成的结果是依次递加的，没有1就不会有2。
注意，不返回的就不算，第一条返回的结果的rownum为1
*/
【5】图文验证码
LogIn.jsp
使用session对象对图文验证码进行存储
<body>
<form action="" method="get">
用户名：<input type="text" name="name"><br /> 密码：<input
type="password" name="pass"><br /> 验证码：<input type="text"
name="picture"> <img
src="${pageContext.request.contextPath }/imgServlet"
onclick="change();" id="imge">
</form>
</body>
<script type="text/javascript">
function change() {
var time = new Date().toString();
var imge = document.getElementById("imge");
imge.src = "/web2/imgServlet?time=" + time;
}
</script>
imgServlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//构建一个数组
char[] chars = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"A", "B", "C", "D", "E", "F", "G", "H", "I",
"J", "K", "L", "M", "N", "O", "P", "Q", "R",
"S", "T", "U", "V", "W", "X", "Y", "Z" };
//设置响应的类型
response.setContentType("image/jpeg");
BufferedImage image = new BufferedImage(100 , 25, BufferedImage.TYPE_INT_RGB);
//获得一个画笔
Graphics graphics = image.getGraphics();
graphics.setColor(Color.blue);//设置画笔的颜色
//画一个长方形
graphics.fillRect(0, 0, 100, 25);
Random ran = new Random();
StringBuffer sbf = new StringBuffer();
for(int i = 0;i<4;i++){
int index = ran.nextInt(chars..length);
sbf.append(chars[index]);
}
//重新设置画笔的颜色
graphics.setColor(Color.red);
graphics.setFont(new Font("微软雅黑", Font.ITALIC, 20));
graphics.drawString(sbf.toString(), 10, 18);
//将图片输出
OutputStream out = response.getOutputStream();
ImageIO.write(image, "jpeg", out);
}
【6】文件上传
Upload.jsp
<!-- 表单的提交方式必须为post方式 类型必须为：multipart/form-data -->
<form action="" method="post" enctype="multipart/form-data">
用户名：<input type="text" name="name"><br />
<br /> 文件：<input type="file" name="file"><br />
<br /> <input type="submit" value="提交">
</form>
UploadServlet
// 创建存储文件的路径
String path = this.getServletContext().getRealPath("/upload");
File upload = new File(path);
if (!upload.exists()) {// 如果不存在此目录，则创建出来
upload.mkdirs();
}
// 创建一个文件处理工厂，创建FileItem对象
FileItemFactory sif = new DiskFileItemFactory();
// 创建解析器 ，将request中的内容存放在FileItem中
ServletFileUpload sfu = new ServletFileUpload(sif);
// 设置编码方式
sfu.setHeaderEncoding("UTF-8");
//设置上传文件的大小
//sfu.setFileSizeMax(1024*1024*1024*4);
try {
// 进行解析
List<FileItem> list = sfu.parseRequest(request);
for (FileItem fileItem : list) {
//判断提交的是否 不是一个文件
boolean isFile = fileItem.isFormField();
//获得表单域中name属性的值
String name = fileItem.getFieldName();
//获得表单域中value属性的值
String value = fileItem.getString("UTF-8");
//获得文件的名字
String fileName = fileItem.getName();
if(!isFile){//如果是一个文件
File file = new File(path+"/"+fileName);
fileItem.write(file);//将文件的内容写进去
}
//删除临时目录文件
fileItem.delete();
}
} catch (Exception e) {
e.printStackTrace();
}
【7】文件下载
文件下载参考代码
//获得下载的文件的名字
String fileName = request.getParameter("fileName");
//如果是中文需要进行设置
fileName = new String(fileName.getBytes("ISO8859-1"),"UTF-8");
//设置响应的头部
response.addHeader("Content-Disposition", "inline;filename="+fileName);
//获得文件的输入流以及输出流
String path = getServletContext().getRealPath("/upload")+"/"+fileName;
InputStream in = new FileInputStream(path);
//获得输出流
OutputStream out = response.getOutputStream();
byte[] buffer = new byte[1024];
int hasRead = 0;
while(-1!=(hasRead = in.read(buffer))){
out.write(buffer, 0, hasRead);
}
out.flush();
Content-Disposition设置：
Content-Disposition的值有两个，分别是：”inline”、”attachment”
- 当为“inline”时，为在线打开，不进行保存
- 当“attachment”时，为进行文件保存
【8】三级联动：ajax+json
html代码
<select id="pro" name="province" onchange="getRegion('city');">
<option>选择省</option>
</select>
<select id="city" onchange="getRegion('county');">
<option>选择市</option>
</select>
<select id="county" >
<option>选择县</option>
</select>
JS代码
function getRegion(type){
var id ;
if(type=="pro"){
id=1;
}else if(type=="city"){
id=document.getElementById("pro").value;
}else if(type=="county"){
id=document.getElementById("city").value;
}
request = getXMLHttpRequest();
request.open("GET","getSelect?id="+id);
request.onreadystatechange=_handleSelect(type);
request.send();
}
function _handleSelect(type){
return function(){
if(request.readyState==4){
if(request.status==200){
var xmlObj = request.responseXML;
var regions = xmlObj.getElementsByTagName("region");
var region = document.getElementById(type);
region.length=1;
for(var i=0;i<regions.length;i++){
var id=regions[i].firstChild.innerHTML;
var name=regions[i].lastChild.innerHTML;
createSelect(region,id,name);
}
}
}
}
}
function createSelect(region,id,name){
var option = new Option(name,id);
region[region.length]=option;
}
Servlet代码
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml;charset-8");
String id = request.getParameter("id");
RegionDao regionDao = new RegionDao();
List<Region> list = regionDao.getRegionByParentId(Integer.parseInt(id));
Document doc = listToDocument(list);
XMLWriter out = new XMLWriter(response.getOutputStream());
out.write(doc);
out.flush();
out.close();
}
private Document listToDocument(List<Region> list){
Document document = DocumentHelper.createDocument();
Element regions = document.addElement("regions");
for(Region r : list){
Element region = regions.addElement("region");
region.addElement("id").setText(r.getId()+"");
region.addElement("name").setText(r.getRegionName());
}
return document;
}
Powered by Waline v3.1.3