AJAX的学习与使用

AJAX的全称为 Asynchronous JavaScript And XML 翻译为异步的javascript和xml，是一种可以实现发送异步请求的技术。

为什么要使用AJAX

传统的同步请求：页面需要不停的跳转、用户体验度差、无法实现局部刷新、速度慢（每次请求都需要返回一整个页面）

AJAX的异步请求：可以异步的向服务器发送请求，速度更快（只需要获取到数据，通过js动态加载）、可以实现局部刷新

其AJAX的最大特点就是：异步访问（快），局部刷新（用户体验度好）

文本格式（重要）

javascript需要这样接收：xhr.responseText,xhr 是XMLHttpRequest对象

所谓文本格式、就是服务器在接收请求时，返回一个字符串的文本数据。例如：

resp.setContentType("text/html;charset=UTF-8");

PrintWriter out = resp.getWriter();
out.write("这是一段文本数据");

JSON格式（重要）

javascript需要这样接收：xhr.responseText,xhr 是XMLHttpRequest对象，但是需要使用 eval()或者JSON.parse(这个要求key也必须是字符串,使用单引号或者双引号括起来的)转换

什么是JSON格式，就是一种规范的数据格式，格式如下

{"name":"zhangsan","age":"18"}

服务器端响应实体类JSON格式的3种方式

修改实体类的toString方法（不推荐）

修改前:
@Override
    public String toString() {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                '}';
    }

修改后（去掉了前面的Student，并将等于号替换成了英文的冒号）：
@Override
    public String toString() {
        return "{" +
                "name:'" + name + '\'' +
                ", age:" + age +
                '}';
    }

手动拼接一个JSON格式的数据(不推荐)

使用google的Gosn类库将实体类转换为JSON数据（推荐）

在WEB-INF/lib目录下放入Gosn的jar包
将jar包添加到类路径中
使用示例

resp.setContentType("text/html;charset=UTF-8");

// 封装Josn数据
Student student = new Student("张三",19);
String json = new Gson().toJson(student);

// 响应数据
PrintWriter out = resp.getWriter();
out.write(json);

XML格式（了解，得到的是一个DOM对象，可以使用getElementById等方法）

javascript需要这样接收：xhr.responseXML,xhr 是XMLHttpRequest对象

 // 注意，ContentType修改了
        resp.setContentType("text/xml;charset=UTF-8");

        // 封装XML数据
        String xmlData = "<students>" +
                            "<student>" +
                                "<name>zhangsan</name>" +
                                "<age>18</age>" +
                            "</student>" +
                            "<student>" +
                                "<name>lisi</name>" +
                                "<age>29</age>" +
                            "</student>" +
                        "</students>";

        // 响应数据
        PrintWriter out = resp.getWriter();
        out.write(xmlData);

get请求

服务器端（这里博主自己封装了个BaseServlet，所以可以通过/ajax/方法名的方式访问到，我会将BaseServlet的代码放到最后）

@WebServlet(urlPatterns = "/ajax/*")
public class AjaxServlet extends BaseServlet {

public void dataType(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    resp.setContentType("text/html;charset=UTF-8");Student student = new Student("张三",18);
String json = new Gson().toJson(student);

resp.getWriter().write(json);
}

}

前端

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

">