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数据交互
客户端请求的方式不同
传统:浏览器发送同步请求
评论列表(0条)