1 AJAX
1.1AJAX概念
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
传统的Web应用的请求方式:
AJAX的web请求流程
1.2使用原生的js实现AJAX请求
1.2.1GET请求
[1]准备好后台
创建一个响应的servlet。
@WebServlet("/ajax") public class AjaxServlet extends HttpServlet implements Servlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("执行了AjaxServlet--doGet"); }
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("执行了AjaxServlet--doPost"); } } |
[2]添加页面
<html> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <input type="text" /> <a href="ajax">click</a> <input type="button" onclick="ajaxReqeust()" value="ajax请求"/> </body> </html> |
[3]添加函数做ajax请求
①申明和创建请求对象xmlHttpRequest
(此对象用来发送请求,获取响应数据。)
(不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。)
var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX!"); return false; } } } |
②设置回调函数
(XMLHttpRequest从创建到发送请求,到接受响应完成。整个过程中状态会改变,会有一个属性readyState一致改变,用来表示当前的状态:
状态 | 描述 |
0 | 请求未初始化(在调用 open() 之前) |
1 | 请求已提出(调用 send() 之前) |
2 | 请求已发送(这里通常可以从响应得到内容头部) |
3 | 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) |
4 | 请求已完成(可以访问服务器响应并使用它) |
)
当发送请求完成之后,会有一个“对象”等待服务器端响应,监控状态的概念,整个对象其实就是XMLHttpRequest对象的一个方法onreadystatechange:
设置监控(会调)函数:
//设置回调函数 xmlHttp.onreadystatechange=function(){ //此函数在ajax请求发送完成之后就开始等待客户端响应 //判断状态改变的清情况,根据状态做出响应 if(xmlHttp.readyState==4){//响应处理完成 if(xmlHttp.status==200){//判断响应状态码 //通过xmlHttp获取响应的数据 var result = xmlHttp.responseText; console.log("响应结果:"+result); } } } |
③打开请求
(设置请求的相关数据:请求方式,url,参数等)
/** *@param 请求方式(GET/POST) *@param 请求的url ,请求参数可以使用?连接在url后面 *@param true表示异步请求,false相反 */ xmlHttp.open("GET","ajax",true); |
④发送请求
//发送请求 xmlHttp.send(null); |
Send的参数:post请求时会将请求参数放在send中,get请求时参数是在url后面的,所以send中传递null即可。
⑤在GET请求中的携带参数
GET请求的参数就是在url后面。
后台正常获取:
如果使用的是tomcat8以前的版本。在后端解码。
⑥AJAX请求的响应
什么是web请求的响应?
任何的web请求响应的一定是符合HTTP协议的响应格式。
浏览器可以解析响应头和响应内容(html)
Ajax请求同样可以获取浏览器接受的所以响应内容。
例如:在后台响应一个HTML。
前端通过ajax获取的响应结果就是整个html的代码:
使用ajax的目标就是为了不响应整个页面。所以当使用ajax请求时一般情况下都是响应一个简单的字符串或者数字等等。
1.2.2POST请求
Post请求的代码和get请求的代码机会一致。
- 取xmlHttpRequest对象
- 置回调函数
- 开请求
- 设置请求的内容类型
//设置请求的内容类型 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); |
- 发送请求(携带请求参数)
1.3异步请求的深度理解
[1]什么是异步?
所谓异步就是多件事可以并发执行。
[2]异步请求
异步请求就是在干其他事的同时进行web请求。
传统的请求是由浏览器发送的。 页面之所以会刷新,是因为浏览器请求了最新的数据,要显示最新的数据,所以会覆盖原来的数据,感觉就是页面刷新了。
如果不是浏览器发送请求,浏览器继续显示原来的数据,由XMLHttpRequest发送请求,并且获取响应的最新的数据,通过javascript将数据显示在页面上,这时浏览器可以继续显示原来的数据,就不会产生覆盖现象,所以页面不会刷新。
例如:在响应结束后,在回调函数中将响应的结果通过js显示在页面上。
请求之后页面并未刷新,而最新的数据已经显示在页面中:
请求由XMLHttpRequest发送,并且处理,浏览器继续显示原来数据。
产生的效果是:局部刷新。
1.4ajax的同步请求
同步请求的方式就是将open的第三个参数设置为false。
Ajax请求完成之后,通过js修改页面内容:
让后台等待3秒钟再响应:
测试结果:
Ajax请求的回调函数得到响应结果之后,将响应结果显示在页面上之后,才会将网页背景修改为pink。
如果是异步则,在发送请求之后,页面就会改变背景,而不会等待响应结束。
1.5ajax的好处
1 无刷新更新页面,减少用户实际和心理等待时间
2 减少网络流通量
3 提高响应速度。
最终的目标就是提高用户体验。
“保护数据“;
1.6 使用AJAX实现一个用户列表的请求
[1]页面:
<script type="text/javascript"> function getAllUser(){
} </script> </head> <body> <input type="button" value="走你" onclick="getAllUser()"/> <table class="table table-bordered"> <tr> <td>#</td> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>操作</td> </tr> </table> </body> |
[2]添加响应的servlet
@WebServlet("/userList") public class UserListServlet extends HttpServlet { private static final long serialVersionUID = 1L;
public UserListServlet() { super(); }
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //模拟数据 List<User> users = new ArrayList<User>(); users.add(new User(1, "东风", 18, 1)); users.add(new User(2, "南风", 18, 1)); users.add(new User(3, "西风", 18, 1)); users.add(new User(4, "北风", 18, 1)); users.add(new User(5, "红中", 18, 1));
//响应客户端 StringBuffer sb = new StringBuffer(); for (User u : users) { sb.append("<tr><td>"+u.getId()+"</td><td>"+u.getName()+"</td><td>"+u.getAge()+"</td><td>"+u.getGender()+"</td><td>编辑/删除</td></tr>"); } response.setCharacterEncoding("utf-8"); response.getWriter().write(sb.toString()); }
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } |
[3]添加ajax请求:
function getAllUser(){ //申明和创建请求对象xmlHttpRequest var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX!"); return false; } } } //设置回调函数 xmlHttp.onreadystatechange=function(){ //此函数在ajax请求发送完成之后就开始等待客户端响应 //判断状态改变的清情况,根据状态做出响应 if(xmlHttp.readyState==4){//响应处理完成 if(xmlHttp.status==200){//判断响应状态码 //通过xmlHttp获取响应的数据 var result = xmlHttp.responseText; console.log("响应结果:"+result); //document.getElementById("result").innerHTML=result; //将响应的结果添加到表格中 var table = document.getElementById("table"); table.innerHTML = table.innerHTML+result; } } }
/** *@param 请求方式(GET/POST) *@param 请求的url ,请求参数可以使用?连接在url后面 *@param true表示异步请求,false相反 */ xmlHttp.open("GET","userList",true); //发送请求 xmlHttp.send(null); } |
发现问题:在后台拼接字符串非常麻烦,而且容易出错。
将拼接的过程去掉,直接在JSP中生成表格:
添加jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:forEach items="users" var="u"> <tr> <td>${u.id }</td> <td>${u.name }</td> <td>${u.age }</td> <td>${u.gender }</td> <td>编辑/删除</td> </tr> </c:forEach> |
修改原有的servlet:
2 jquery的AJAX
2.1了解jquery的AJAX的API:
2.2 $.ajax()
参数:
案例:
function $_ajax(){ $.ajax({ type:"GET",//请求的方法类型 url:"ajax",//请求的url //data:"id=123&uname=jerry", data:{id:456,uname:'tom'},//请求参数 success:function(data){//响应成功时的处理函数,data是响应结果 console.log(data); }, error:function(e){//响应失败时的处理函数 console.log(e); }, async :true//异步和同步的设置 }); } |
2.3 $.get()
和$.ajax中设置type为GET是一样的。
参数:
案例:
function $_get(){ /** *参数1:请求的url *参数2:请求参数 (p=v&p1=v1 {p:v,p1:v1}) *参数3:回调函数 */ $.get("ajax",{id:789,uname:'卡卡西'},function(data){ console.log("get:"+data); }); } |
2.4 $.post()
和$.get几乎完全一致,只是请求方式是post
参数:
案例:
function $_post(){ /** *参数1:请求的url *参数2:请求参数 (p=v&p1=v1 {p:v,p1:v1}) *参数3:回调函数 */ $.post("ajax",{id:789,uname:'卡卡西'},function(data){ console.log("post:"+data); }); } |
2.5 $(selector).load(url)
从服务器加载数据,然后把返回到 HTML 放入匹配元素
函数的参数:
案例:
2.6表单序列化
案例:
<script type='text/javascript' src='js/jquery-2.1.0.min.js'></script> <script type="text/javascript"> function xlh(){ var pm = $("#ufo").serialize(); console.log(pm); pm = $("#ufo").serializeArray(); console.log(pm); } </script> </head> <body> <form action="" id="ufo"> 用户名:<input type="text" name="uname"/><br/> 密码:<input type="text" name="upass"/><br/> 性别:<input type="radio" name="gender" value="1"/>男 <input type="radio" name="gender" value="2"/>女 <input type="radio" name="gender" value="0"/>不明 <br/> <input type="button" onclick="xlh()" value="序列化"/> </form> </body> |
结果:
3 JSON
3.1认识json
JSON:JavaScript 对象表示法(JavaScript Object Notation)。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
- JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言 *
- JSON 具有自我描述性,更易理解
JSON就是对象的字符串表示形式:
一个对象:
Java:
User u = new User(); u.setUname(“张三”); u.setUage(18); u.setUbirth(“2018-5-9”); |
Js中的对象:
Var u = new Object(); u.uname=”张三”; u.uage=18 u.ubirth=’2018-5-9’; var u = {“uname”:”张三”,”uage”:18,”ubirth”:”2018-5-9”}; |
JSON对象
u = ‘{“uname”:”张三”,”uage”:18,”ubirth”:”2018-5-9”}’; |
XML表示一个对象
<user> <uname>张三</uname> <uage>18</uage> <ubirth>2018-5-9</ubirth> </user> |
3.2JSON语法
JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
案例:
{"total":5,"data":[ {"uname":"张三","uage":18,"ugener":1}, {"uname":"张三","uage":18,"ugener":1}, {"uname":"张三","uage":18,"ugener":1}, {"uname":"张三","uage":18,"ugener":1}, {"uname":"张三","uage":18,"ugener":1} ]} |
Tips:json的属性理论上都要使用“属性名”,所有的字符串必须使用“”.所有的数字可以省略“”。
3.3在java中json和对象之间的转换
需要三个jar文件
将一个单个对象转换为json
@Test public void testObjectToJsn() throws IOException { User u = new User(18, "路飞", 20, 1); ObjectMapper mapper = new ObjectMapper(); //将对象转换为json String string = mapper.writeValueAsString(u); System.out.println(string); } |
将一个Map转换为json
@Test public void testMapToJson() throws IOException { User u = new User(18, "路飞", 20, 1); Map<String,Object> map = new HashMap<>(); map.put("uid", 118); map.put("uname", "路路飞"); map.put("u", u); //将map转换为json ObjectMapper mapper = new ObjectMapper(); String string = mapper.writeValueAsString(map); System.out.println(string); } |
将一个collection转换为json
@Test public void testCollectionToJson() throws IOException { Collection c = new ArrayList(); User u = new User(18, "路飞", 20, 1); Map<String, Object> map = new HashMap<>(); map.put("uid", 118); map.put("uname", "路路飞"); map.put("u", u); c.add(u); c.add(u); c.add(u); c.add(map); // 将map转换为json ObjectMapper mapper = new ObjectMapper(); String string = mapper.writeValueAsString(c); System.out.println(string); } |
将json转换为对象
@Test public void testJsonToObject() throws Exception { String json = "{\"id\":18,\"name\":\"路飞\",\"age\":20,\"gender\":1}"; //将json字符串转换为对象 ObjectMapper mapper = new ObjectMapper(); User u = mapper.readValue(json, User.class); System.out.println(u); } |
3.4在javaScript中json和对象的转换
Json本身就是javascript的对象。
<script type="text/javascript"> var str = '{"id":"18","name":"路飞","age":"20","gender":"1"}'; console.log(str); var s = eval('('+str+')'); console.log(s); </script> |
4. 综合案例
[1]注册时验证用户名是否重复
搭建项目:
Web.xml配置:
添加beans.xml文件
DAO中通过命名查询用户
Service开发:
在beans.xml中添加配置:
添加servlet继承BaseServlet
@WebServlet("/user") public class UserServlet extends BaseServlet { private IUserService userService = (IUserService) BeansFactory.getBean("userService"); public void checkLoginName(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException { //获取请求参数 String loginName = request.getParameter("loginName"); boolean result = userService.checkLoginName(loginName); //响应客户端 String json = "{\"result\":0}"; if(result) { json = "{\"result\":1}"; } response.getWriter().write(json); } } |
前端页面中添加验证函数:
$(document).ready(function(){ //添加一个失去焦点的事件 $("#loginName").blur(function(){ //获取输入的登录名 var loginName = $(this).val(); if(loginName!=''){ //通过ajax验证 $.ajax({ type:"GET", url:"user", data:{op:"checkLoginName",loginName:loginName}, dataType:"json",//预期返回的结果类型 success:function(data){ if(data.result==1){ $("#loginName").css("border","1px solid red"); alert("登录名重复"); } } }); } }); }); |
[2]用户列表
响应json格式的数据
DAO实现:
@Override public List<User> queryAll() { try { return qr.query("select * from bbs_user", new BeanListHandler<>(User.class)); } catch (SQLException e) { e.printStackTrace(); } return null } |
Service实现:
public List<User> queryAll() { // TODO Auto-generated method stub return userDAO.queryAll(); } |
添加一个servlet响应json格式的列表:
public class UserServlet extends BaseServlet { private IUserService userService = (IUserService) BeansFactory.getBean("userService"); public void userList(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException { List<User> users = userService.queryAll(); //将用户列表转化为json ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(users); //输出json response.setCharacterEncoding("utf-8"); response.getWriter().write(json); } } |
添加页面:
<script type="text/javascript"> $(document).ready(function(){ var table = $("#utable");//找到表格对象 //ajax请求列表 $.ajax({ type:"GET", url:"user", data:{op:"userList"}, dataType:"json", success:function(data){ //遍历json将数据显示在表格中 $.each(data,function(index,item){ console.log(item); //创建tr var tr = "<tr><td>"+item.uId+"</td><td>"+item.nickName+"</td><td>"+item.loginName+"</td><td>"+(item.gender==1?'男':'女')+"</td><td>编辑/删除</td></tr>"; table.append($(tr)); }) } }); }); </script> </head> <body> <table class="table table-bordered" id="utable"> <tr> <th>#</th> <th>昵称</th> <th>登录名</th> <th>性别</th> <th>操作</th> </tr> </table> </body> |