调用ajax_[WEB篇]-AJAX-02-AJAX应用案例

Ajax

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);}
}

测试jsp：base.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;}@Overridepublic 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");;// 获取用户选择的省份idString 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);}
}

测试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/linker.jsp，结果显示如下

PS：此处需要注意的一点是，此处所有的测试jsp文件均是直接放置在WebContent的当前一级的目录下，如果是放置在其他的文件夹内有可能导致测试时失效，在测试的时候需要注意这一点

其余案例分析

a.分页

1.刷新分页：每次获得页面信息需要刷新当前的页面信息

2.无刷新分页：使用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。

b.图文验证码

LogIn.jsp

<body><form action="" method="get">用户名：<input type="text" name="name"><br /> 密码：<inputtype="password" name="pass"><br /> 验证码：<input type="text"name="picture"> <imgsrc="${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);}

图文验证码如何进行存储呢？-- 使用session对象进行存储

c.文件上传

Upload.jsp：

 <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();}

d.文件下载

                //获得下载的文件的名字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”时，为进行文件保存。

e.三级联动：ajax+json

1. 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>

2. JAVASCRIPT代码

    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;

3.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;}