品牌网站开发网站seo收费
一、Ajax
1.定义
Ajax（Asynchronous JavaScript And XML）：异步的 JavaScript 和 XML
AJAX 不是新的编程语言，指的是⼀种交互方式：异步加载。
客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个页面 --> 局部刷新。
优点：
① 局部刷新，效率更高
② 用户体验更好
2.原理
3.基于 jQuery 的 AJAX 语法
$.ajax({
属性，
})
常用的属性参数：
| url | 请求的后端服务地址 |
| type | 请求方式，默认 get |
| data | 请求所携带的参数 |
| dataType | 服务器返回的数据类型：text / json |
| success | 请求成功的回调函数 |
| error | 请求失败的回调函数 |
| complete | 请求完成的回调函数（无论成功或者失败，都会调用） |
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body><input id="text" type="text"/><br/><input id="btn" type="button" value="提交"/><script type="text/javascript">$(function () {var btn = $("#btn");btn.click(function () {$.ajax({url: '/test',type: 'post',data: 'id=1',dataType: 'text',success: function (data) {var text = $("#text");text.before("<span>" + data + "</span><br/>");}});});})</script>
</body>
</html>@WebServlet("/test")
public class TestServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id = req.getParameter("id");try {Thread.sleep(1500);//1.5s} catch (InterruptedException e) {e.printStackTrace();}String str = "Hello World";resp.getWriter().write(str);}
}
注意：
① 不能用表单提交请求（同步请求），改用 jQuery 方式动态绑定事件来提交。
② Servlet 不能跳转到 jsp，只能将数据返回（通过 response.getWriter() 将数据写回到页面）。
success 回调函数中的 data，就代表返回的数据。
如果跳转到 jsp 的话，会将 jsp 的整个页面代码作为 data 返回。
4.传统的 WEB 数据交互 与 AJAX 数据交互 的区别
① 客户端请求的方式不同：
传统：浏览器发送同步请求 （form、a）
AJAX：异步引擎对象发送异步请求
② 服务器响应的⽅式不同：
传统：响应⼀个完整 JSP 页面（视图）
AJAX：响应需要的数据
③ 客户端处理方式不同：
传统：需要等待服务器完成响应并且重新加载整个页面之后，用户才能进行后续的操作。
AJAX：动态更新页面中的局部内容，不影响用户的其他操作
二、Json
1.定义
JavaScript Object Notation：⼀种轻量级数据交互格式，完成 js 与 Java 等后端开发语⾔对象数据之间的转换 。
客户端和服务器之间传递对象数据，需要用到 JSON 格式。
2.使用步骤：
① 导入 json 依赖
<!-- 添加JSON依赖--><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version><!-- 必须添加JDK版本号--><classifier>jdk15</classifier></dependency><dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils</artifactId><version>1.9.2</version></dependency><dependency><groupId>commons-collections</groupId><artifactId>commons-collections</artifactId><version>3.2.1</version></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.5</version></dependency><dependency><groupId>net.sf.ezmorph</groupId><artifactId>ezmorph</artifactId><version>1.0.3</version></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.2</version></dependency>② 将 Java 对象转换为 Json 格式
public class TestServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {User user = new User(1, "张三", 96.5);//处理中文乱码resp.setCharacterEncoding("UTF-8");//将 Java 对象转为 JSON 格式JSONObject jsonObject = JSONObject.fromObject(user);resp.getWriter().write(jsonObject.toString());}
}注意：
如果是一个普通的 Java 对象，使用 JSONObject.fromObject() 进行转换；
如果是一个 Java 对象的集合，使用 JSONArray.fromObject() 进行转换；
如果是多个 Java 对象的集合，可以创造一个类进行封装，类的属性就是这多个集合。然后返回该对象，如下：
public class Location {private List<String> cities;//市private List<String> areas;//区public List<String> getCities() {return cities;}public void setCities(List<String> cities) {this.cities = cities;}public List<String> getAreas() {return areas;}public void setAreas(List<String> areas) {this.areas = areas;}
}
③ Ajax 中以 json 格式返回数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>编号：<input id="id" type="text"/><br/>姓名：<input id="name" type="text"/><br/>成绩：<input id="score" type="text"/><br/><input id="btn" type="button" value="提交"/><script type="text/javascript">$(function () {var btn = $("#btn");btn.click(function () {$.ajax({url:'/test',type:'post',dataType:'json',success:function(data){$("#id").val(data.id);$("#name").val(data.name);$("#score").val(data.score);}})});})</script>
</body>
</html>