第一章 Ajax概述
1.1 什么是Ajax
Ajax 即"Asynchronous Javascript And XML"(异步JavaScript和XML),一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
简而言之：一项可以发送异步请求，对页面进行局部更新的技术。
1.2 Ajax常见的应用场景
Ajax通常用需要发送异步请求的地方，如注册表单的用户名校验，省市二级联动和搜索框数据补全。
1.2.1 注册表单的用户名校验
很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。
1.2.2 内容自动补全
不管是专注于搜索的百度，还是站点内商品搜索的京东，都有搜索功能，在i搜索框输入查询关键字时，整个页面没有刷新，但会根据关键字显示相关查询字条，这个过程是异步的。
1.3 同步请求和异步请求
1.3.1 同步方式发送请求
发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。
1.3.2 异步方式发送请求
发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。
总结：一般情况下都使用异步，后续的操作必须要依赖于ajax请求的结果的时候，必须使用同步。
第二章 原生的Ajax
Ajax技术的核心是XMLHttpRequest。Ajax就是通过XMLHttpRequest对象来发送异步的请求。
2.1 js原生Ajax的开发步骤
-
创建Ajax引擎对象 -- XMLHttpRequest对象;
-
为XMLHttpRequest对象绑定监听(监听服务器,将数据响应给引擎);
-
绑定提交地址;
-
发送请求;
-
接收响应数据;
2.2 js原生Ajax的代码实现
需求 :
-
点击页面按钮发送请求到后台Servlet;
-
后台Servlet接收数据后,给出响应;
-
页面接收响应数据;
2.2.1 js代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn" onclick="sendAjax();">点击后，发送Ajax请求</button>
</body>
<script>
function sendAjax() {
//js原生的Ajax实现
//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2.给XMLHttpRequest对象绑定监听
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
//5.接收响应
alert(xhr.responseText);
}
}
//3.绑定提交地址
/**
* GET:请求方式；
* url：请求地址
* flag： true--异步请求，false--同步请求
*/
xhr.open("GET", "/ajaxServlet", true);
//4.发送请求
xhr.send();
}
</script>
</html>2.2.2 Servlet代码
@WebServlet(name = "AjaxDemo", urlPatterns = "/ajaxServlet")
public class AjaxDemo extends HttpServlet {
/**
* 接收ajax请求
*/
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.getWriter().println("输出内容");
}
}- responseText : 响应体的内容
- readystate : ajax请求的状态 从0到4
-
status :http的请求状态码 200 404 500
第三章 jQuery的Ajax
js原生的Ajax虽然能够向后台发送请求，但是太过繁琐。jQuery对原生的Ajax方法进行了封装，下面是开发中使用的比较多的3种jQuery的Ajax实现。
以上3种方法都是基于jQuery实现的，所以在使用之前必须先导入jquery的类库。
3.1 GET请求方式
3.1.1 GET请求方式概述
通过远程HTTP GET请求发送请求。这是一个简单的GET请求，以取代复杂$.ajax。请求成功时可调用回调函数。如需复杂的ajax请求参数设置，请使用$.ajax 。
3.1.2 GET请求的语法格式
$.get(url,[data],[callback],[type])
3.2 POST请求方式
3.2.1 GET请求方式概述
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能，如需复杂的ajax参数设置请使用$.ajax。
3.2.2 GET请求的语法格式
$.post(url, [data], [callback], [type])
3.3 Ajax请求
3.3.1 Ajax请求方式概述
通过 HTTP 请求加载远程数据。jQuery 底层 A JAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。
3.3.2 Ajax请求方式语法
$.ajax([settings])
其中，settings是一个js字面量形式的对象，格式是{name:value,name:value... ...}，
常用的name属性名如下 :
第四章 JSON数据格式
4.1 什么是JSON
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
4.2 JSON的语法格式
-
JSON数据的键值是字符串类型，值可以是任意类型；
-
标准的JSON数据，键值必须用双引号包裹起来；
第五章 JSON转换工具(java后台)
JSON的转换工具是通过java封装好的一些jar工具包，直接将java对象或集合转换成json格式的字符串。
常见的jar包有以下几种：
5.1 开发步骤
1.创建java对象和集合
2.使用FastJson包中抽象类JSON中toJSONString(Object obj);将java对象转换成JSON字符串;
5.2 转换java代码实现
准备 :
-
创建一个描述学生的实体类;
-
创建一个描述课程的实体类;
-
学生关联课程(假设一对一);
public class Student {
private Integer id;
private String studentName;
private int studentAge;
private Course course;public class Course {
private Integer id;
private String courseName;
private String code;5.2.1 转换java对象
public class JavaBeanToJson {
public static void main(String[] args) {
//1.简单对象
Student stu1 = new Student();
stu1.setId(1);
stu1.setStudentName("张三");
stu1.setStudentAge(10);
//将javabean转化成JSON
String s = JSON.toJSONString(stu1);
System.out.println(s);
}
}//运行结果
{"id":1,"studentAge":10,"studentName":"张三"}5.2.2 转换List集合
public class JavaBeanToJson {
public static void main(String[] args) {
//1.简单对象
Student stu1 = new Student();
stu1.setId(1);
stu1.setStudentName("张三");
stu1.setStudentAge(10);
Student stu2 = new Student();
stu2.setId(2);
stu2.setStudentName("李四");
stu2.setStudentAge(12);
//2.数组
List<Student> stuList = new ArrayList<>();
stuList.add(stu1);
stuList.add(stu2);
//将list转换成JSON
String jsonList = JSON.toJSONString(stuList);
System.out.println(jsonList);
}
}//运行结果
[
{ "id": 1,"studentAge": 10, "studentName": "张三"},
{"id": 2, "studentAge": 12,"studentName": "李四"}
]5.2.3 转换复杂对象
public class JavaBeanToJson {
public static void main(String[] args) {
//1.简单对象
Student stu2 = new Student();
stu2.setId(2);
stu2.setStudentName("李四");
stu2.setStudentAge(12);
//3.复杂对象
Course course = new Course();
course.setId(1);
course.setCourseName("英语");
course.setCode("en");
stu2.setCourse(course);
//将复杂对象转换成JSON
String s2 = JSON.toJSONString(stu2);
System.out.println(s2);
}
}//运行结果
{
"course": {
"code": "en",
"courseName": "英语",
"id": 1
},
"id": 2,
"studentAge": 12,
"studentName": "李四"
}