Ajax
Ajax
-
Asynchronous JavaScript And XML：异步的 JavaScript 和 XML
-
AJAX 不是新的编程，指的是?种交互?式，异步加载，客户端和服务器的数据交互更新在局部??的 技术，不需要刷新整个??（局部刷新）
-
优点：
1、局部刷新，效率更?
2、?户体验更好 基于 jQuery 的 A JAX
<html> <head> <title>Title</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <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> </head> <body> <input id="text" type="text"/><br/> <input id="btn" type="button" value="提交"/> </body> </html>不能?表单提交请求，改? jQuery ?式动态绑定事件来提交。 Servlet 不能跳转到 JSP，只能将数据返回。
package com.southwind.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/test") public class TestServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException { String id = req.getParameter("id"); try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } String str = "Hello World"; resp.getWriter().write(str); } }
传统的WEB数据交互VS AJAX 数据交互
-
客户端请求的?式不同：
传统，浏览器发送同步请求 （form、a）
AJAX，异步引擎对象发送异步请求
-
服务器响应的?式不同：
传统，响应?个完整 JSP ??（视图）
AJAX，响应需要的数据
-
客户端处理?式不同：
传统：需要等待服务器完成响应并且重新加载整个??之后，?户才能进?后续的操作
AJAX：动态更新??中的局部内容，不影响?户的其他操作
AJAX 原理
基于jQuery的AJAX语法
$.ajax({属性})
常?的属性参数：
url：请求的后端服务地址
type：请求?式，默认
get data：请求参数
dataType：服务器返回的数据类型，text/json
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成的回调函数（?论成功或者失败，都会调?）
JSON
JavaScript Object Notation，?种轻量级数据交互格式，完成 js 与 Java 等后端开发语?对象数据之间 的转换客户端和服务器之间传递对象数据，需要? JSON 格式。
package com.southwind.entity;
public class User {
private Integer id;
private String name;
private Double score;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Double getScore() {
return score;
}
public void setScore(Double score) {
this.score = score;
}
public User(Integer id, String name, Double score) {
this.id = id;
this.name = name;
this.score = score;
}
}
User user = new User(1,"张三",96.5);
var user = {
id:1,
name:"张三",
score:96.5
}
package com.southwind.servlet;
import com.southwind.entity.User;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/test")
public class TestServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
User user = new User(1,"张三",96.5);
//将 Java 对象转为 JSON 格式
resp.setCharacterEncoding("UTF-8");
JSONObject jsonObject = JSONObject.fromObject(user);
resp.getWriter().write(jsonObject.toString());
}
}
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<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>
</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="提交"/>
</body>
</html>
原视频：https://space.bilibili.com/434617924?spm_id_from=333.788.b_765f7570696e666f