javaWeb核心技术第十三篇之Ajax
Posted haizai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaWeb核心技术第十三篇之Ajax相关的知识，希望对你有一定的参考价值。
Js--ajax--原理解释 概述:异步刷新网页,不会刷新整个页面. Get原理: <%@ 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>Insert title here</title> <script> function sendGetAjax() //下面的代码可以不需要练习 但不可以使用IE 浏览器兼容 //1.获得ajax引擎 var xmlHttp = new XMLHttpRequest(); //2.设置回调函数--作用是 响应回来时 ajax引擎会调用回调函数 将数据返回 //回调函数将会被执行四次 xmlHttp.onreadystatechange = function() //判断 readyState 状态必须是4 表示响应结束 if(xmlHttp.readyState == 4 ) //响应结束 不一定就是正确响应 //判断响应必须是成功 成功状态码是200 if(xmlHttp.status == 200) //接受服务器的值 var textTemp = xmlHttp.responseText; alert(textTemp); if(xmlHttp.status == 404) alert("yyy"); //3.打开连接 建立连接 //参数1:请求方式 //参数2:请求的路径 xmlHttp.open("get", "/ee66_day44/DemoServlet?username=jack2&nickname=rose2"); //4.发送 //参数表示 请求体 xmlHttp.send(null); </script> </head> <body> <form action="/ee66_day44/DemoServlet" method="post"> <input type="text" name="username" value="jack"/> <input type="text" name="nickname" value="rose"/> <input type="submit"/> </form> <a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a> </body> </html> Post原理: 跟get方式相似,但需要在3和4中间加一个设置请求头的代码. Jquery -- ajax(重点) Jquery:底层就是js 特性:兼容浏览器,api都是封装好的. Get方式: <!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>Insert title here</title> <script type="text/javascript" src="$pageContext.request.contextPath/js/jquery-1.11.3.min.js"></script> <script> function sendGetAjax() //1.导入jquery的类库 //2.jquery的api提供工具类 /** url :请求的路径 params:请求参数 格式1:key=value&key=value... 格式2:key:value,key:value.. js对象 fn : 回调函数 function(data) data就是回调函数中服务器响应的数据 type : text 默认值 表示服务器响应的数据是文本 如果设置的是json 直接将字符串数据转换成对象 */ //$.get(url,params,fn,type); //$.get("/ee66_day44/DemoServlet"); //应用场景 服务器统计访问人数 //$.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2"); //$.get("/ee66_day44/DemoServlet","username":"jack3","nickname":"rose3"); $.get("/ee66_day44/DemoServlet","username=jack2&nickname=rose2",function(data) alert(data); ,"text"); </script> </head> <body> <form action="/ee66_day44/DemoServlet" method="post"> <input type="text" name="username" value="jack"/> <input type="text" name="nickname" value="rose"/> <input type="submit"/> </form> <a href="javascript:void(0)" onclick="sendGetAjax()">点我发送ajax请求</a> </body> </ html> Post : Post提交方式和get方式没有区别,参数一样,写法一样. 如果涉及乱码get和post处理是不一样,建议post 案例分析: 1.失去焦点时发送ajax请求. 2.编写函数. 3.发送ajax请求,请求中携带参数. 参数是username 4.编写servlet代码. 5.回调函数中处理响应数据 if(1 失败) 用户名不可用,显示 可用隐藏 else 用户名不可用 隐藏 可用显示 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException //1.获得 String username = request.getParameter("username"); //2.处理 if("jack".equals(username)) //失败 返回1 //3.响应 response.getWriter().print("1"); else //成功 返回0 //3.响应 response.getWriter().print("0"); <script> //页面加载 $(function() //初始化 可用和不可用都需要隐藏 $("#FailedId").hide(); $("#SuccessId").hide(); //绑定事件 $("#username").blur(function() //获得参数 var usernameVal = $("#username").val(); //发送ajax请求 $.post("$pageContext.request.contextPath/CheckServlet","username":usernameVal,function(data) if("1"==data) //失败 用户名不可用显示 可用隐藏 $("#SuccessId").hide(); $("#FailedId").show(); else //成功 用户名不可用隐藏 可用显示 $("#SuccessId").show(); $("#FailedId").hide(); ); ); ) </script> <div class="col-sm-4"> <span class="label label-success" id="SuccessId">用户名可用</span> <span class="label label-danger" id="FailedId">用户名不可用</span> </div> Json(重点): Json是一种数据格式,用于通信获得数据传递数据方便. Json对象: Object:格式 key:value,key:value.... 使用map,对象,描述 Json数组: Object : 格式[obj,obj,obj...] 使用数组,list集合描述 数组中可以嵌套对象,对象可以嵌套数组. Js--json <script> //js对象 json 的 和value必须用双引号包括起来 如果是数字 boolean 变量是不需要双引号的 var obj = "a":"b","c":"d"; //alert(obj.c); //var obj = "‘a‘:‘b‘,‘c‘:‘d‘"; //alert(obj.a); //字符串 转换 对象 //1.eval可以将字符串转换成可执行的代码片段 //2.eval可以将字符串转换成对象 /* var objTemp = eval( "(" + obj +")" ); alert(objTemp.a); */ var arr = ["a" , "b" , 1 , true , obj]; alert(arr[4].a); var obj2 = "abc":arr; </script> 案例分析:自动联想功能 需求:在文本框中输入值,动态的联想数据库中数据填充在下拉框下. 1.联想时,数据库中所有全部联想(查询所有),js前台的细节. 2.加上条件联想(根据条件查询) */ 首页: 文本框输入内容 1.文本框添加事件(keydown按下,keypress按住,keyup弹起) 使用keyup弹起事件 2.发送ajax,携带参数searchWord 3.编写servlet 4.回调函数中获得数据 将一根div显示,再往框里加数据, <script> $(function() //1.给文本框绑定事件 $("#SearchId").keyup(function() //2.获得数据 var wordVal = $("#SearchId").val(); if(""==wordVal) $("#completeShow").hide(); return; //清空ul $("#showUI").html(""); //3.发送请求 $.post("$pageContext.request.contextPath/SearchWordServlet","searchWord":wordVal,function(data) //4.遍历 往div中添加数据 $(data).each(function() //this 表示 被遍历的当前对象 当前对象表示product List<Product> $("#showUI").append("<li class=‘list-group-item‘><a href=‘‘>"+this.pname+"("+this.pinyin+")"+"</a></li>"); ); //5.将div显示 $("#completeShow").show(); ,"json"); ); ) </script> <div id="completeShow"> <ul class="list-group" id="showUI"> </ul> </div> 服务器:servlet 1.获得 获得searchWord 2.处理 service.findByWord(searchWord) 返回值List<类名> 3.响应 使用json-lib,将集合转换成json字符串 public class SearchWordServlet extends HttpServlet protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException try //0.乱码 request.setCharacterEncoding("utf-8"); response.setHeader("content-type", "text/html;charset=utf-8"); //1.获得 String word = request.getParameter("searchWord"); //2.处理 ProductService service = new ProductService(); List<Product> list = service.findByWord(word); //3.响应 String json = JSONArray.fromObject(list).toString(); response.getWriter().print(json); catch (Exception e) e.printStackTrace(); public List<Product> findByWord(String word) throws SQLException QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource()); String sql =" SELECT * FROM product WHERE pname LIKE ? OR pinyin LIKE ? "; Object [] params = "%"+word+"%","%"+word+"%" ; return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);
以上是关于javaWeb核心技术第十三篇之Ajax的主要内容，如果未能解决你的问题，请参考以下文章