1. 定义1.1 优点2. 基于jQuery的AJAX
2.1 语法2.2 JSON2.3 案例 3. 传统的WEB数据交互 VS AJAX数据交互4. AJAX原理5. 三级联动案例
5.1 案例说明5.2 代码
1. 定义AJAX：异步的Javascript和xml，并不是新的编程，指的是一种交互方式，异步加载，客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个页面（局部刷新）
1.1 优点局部刷新，效果更好用户体验更好 2. 基于jQuery的AJAX 2.1 语法
$.ajax({属性})
常用的属性参数:
url:请求的后端服务地址type：请求类型，默认getdata：请求参数dataType：服务器返回的数据类型，text/jsonsuccess：请求成功的回调函数error：请求失败的回调函数complete：请求完成的回调函数（无论成功或者失败，都会回调） 2.2 JSON
一种轻量级数据交互格式，完成js和java等后端开发语言对象数据之间的转换
客户端和服务器之间传递对象数据，需要用JSON格式
var user = {
id:1,
name:"张三",
score:96.5
}
相当于java中的
package 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) {
super();
this.id = id;
this.name = name;
this.score = score;
}
}
User user = new User(1,"张三",96.5);
将java对象转为json格式
User user = new User(1,"张三",96.0);
//将java对象转为json格式
resp.setCharacterEncoding("utf-8");
JSONObject jsonObject = JSONObject.fromObject(user);
resp.getWriter().write(jsonObject.toString());
2.3 案例
jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
Insert title here
注1： 不能用表单提交请求，改用jQuery方式动态绑定时间来提交。
注2： servlet不能直接跳转到jsp，只能将数据返回。//alert(data)调用这条注释语句，即可看到结果，就是原因。
servlet
package bysj01;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/testservlet")
public class TestServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
try {
Thread.sleep(30);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String str = "Hello World";
resp.getWriter().write(str);
// req.setAttribute("str", str);
// req.getRequestDispatcher("test.jsp").forward(req, resp);
}
}
3. 传统的WEB数据交互 VS AJAX数据交互
客户端请求的方式不同
传统：浏览器发送同步请求
