ajax与 JSON

主要内容

• 原生 ajax 重点

• jQuery ajax 重点

• JSON 熟悉

章节目标

• 掌握原生 ajax

• 掌握jQuery ajax

• 掌握JSON

第一节 ajax

1. 什么是ajax

AJAX 全称为 Asynchronous JavaScript And Xml，表示异步的Java脚本和Xml文件，是一种异步刷新技术。

2. 为什么要使用ajax

Servlet 进行网页的变更往往是通过请求转发或者是重定向来完成，这样的操作更新的是整个网页，如果我们只需要更新网页的局部内容，就需要使用到AJAX来处理了。因为只是更新局部内容，因此，Servlet 传输的数据量就减少了，这不仅有效的利用了带宽，提高效率的同时还增加了用户的体验度，操作起来更为方便。

3. AJAX的核心

• IE浏览器： ActiveXObject

• 其他浏览器：XMLHttpRequest

常用方法：

常用属性：

• onreadystatechange: 监听就绪状态改变的事件，必须给定一个函数

• readyState: XMLHttpRequest的状态信息

• status: HTTP的状态码

• responseText: 以文本形式获得响应的内容

• responseXML: 将XML格式的响应内容解析成DOM对象

4. 应用场景

4.1 用户名检测

使用 ajax 完成注册时用户名是否可用

<div>
   	<input type="text" id="username"><span style="color='red'"></span>
</div>

$("#username").blur(function () {
    let xhr;//创建ajax引擎对象，所有操作都是由ajax引擎完成
    if(window.XMLHttpRequest){//GOOGLE，FIREFOX，IE7以上
        xhr = new XMLHttpRequest();
    } else if(window.ActiveXObject){//IE7以下
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function () {//为引擎对象绑定就绪状态监听事件
        if(xhr.readyState == 4 && xhr.status == 200){
            if(xhr.responseText == "true"){
                $("#username").siblings("span").text("该账号已被注册");
            } else {
                $("#username").siblings("span").text("该账号可以注册");
            }
        }
    }
    //第一个参数：请求方式GET/POST，第二个参数：后台服务器地址，第三个参数：是否异步
    xhr.open("GET","checkUsername?username="+$("#username").val(), true);
    xhr.send();//发送请求
});

4.1 登录

使用 ajax 完成登录

<div>
   	<input type="text" id="username">
</div>
<div>
   	<input type="password" id="password">
</div>
<div>
   	<input type="button" value="登录" id="loginBtn">
</div>

$("#loginBtn").click(function () {
    let xhr;//创建ajax引擎对象，所有操作都是由ajax引擎完成
    if(window.XMLHttpRequest){//GOOGLE，FIREFOX，IE7以上
        xhr = new XMLHttpRequest();
    } else if(window.ActiveXObject){//IE7以下
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function () {//为引擎对象绑定就绪状态监听事件
        if(xhr.readyState == 4 && xhr.status == 200){
            if(xhr.responseText == "1"){
                alert("登录成功")
            } else {
                alert("登录失败")
            }
        }
    }
    //第一个参数：请求方式GET/POST，第二个参数：后台服务器地址，第三个参数：是否异步
    xhr.open("POST","login", true);
    //POST方式发送请求时，携带数据一定要添加请求头，设置传输数据的类型
    //为application/x-www-form-urlencoded其作用将键值对的参数用&连接起来，
    //如果有空格，将空格转换为+加号；有特殊符号，将特殊符号转换为ASCII HEX值
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
    xhr.send("username="+$("#username").val() + "&password=" + $("#password").val());//发送请求
});

5. ajax 封装

演示封装过程

第二节 jQuery ajax

1. 为什么要使用jQuery ajax

原生ajax使用步骤繁琐，接收的数据格式需要处理，使用过程中涉及到的函数调用及状态验证较多，还需要处理浏览器的兼容性问题。而 jQuery ajax对原生ajax进行了封装，使用起来非常方便，深受开发者的喜爱。

2. 如何使用 jQuery ajax

$.ajax({
    url: '', //请求提交的URL地址
    type: '',//请求提交的类型
    data: {},//请求携带的数据
    dataType: '',//服务器端传回的数据类型，默认是application/text
    //成功时执行的回调函数，resp用于接收服务器端传递回来的数据
    success: function (resp) {},
    //请求过程中出现错误后执行的回掉函数，xhr用于接收失败后相关状态信息
    error: function(xhr, textStatus, errorThrown) {}
});

3. 应用场景

3.1 用户名检测

$("#username").blur(function () {
    $.ajax({
        url: 'checkUsername',//请求发送的地址
        type: 'get',//请求发送的方式
        data: { //请求携带的数据
            username: $("#username").val()
        },
        //成功时的回掉函数，resp接收服务器端返回的数据
        success: function (resp) {
            if(resp == "true"){
                $("#username").siblings("span").text("该账号已被注册");
            } else {
                $("#username").siblings("span").text("该账号可以注册");
            }
        }
    });
});

3.2 登录

$("#loginBtn").click(function () {
    $.ajax({
        url: 'login',//请求发送的地址
        type: 'post',//请求发送的方式
        data: { //请求携带的数据
            username: $("#username").val(),
            password: $("#password").val()
        },
        contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
        //成功时的回掉函数，resp接收服务器端返回的数据
        success: function (resp) {
            if(resp == '1'){
                $("#username").siblings("span").text("该账号已被注册");
            } else {
                $("#username").siblings("span").text("该账号可以注册");
            }
        }
    });
});

3.3 表格刷新

表格刷新主要利用的是 jQuery的 load() 方法进行表格刷新，这也是一种 ajax 的封装。load() 方法可以对页面的局部内容进行更新，load() 方法使用有两种方式：

//这种方式是GET请求
$("选择器").load("请求地址");

//这种方式是POST请求
$("选择器").load("请求地址", data);

使用load()对页面表格内容进行刷新

<!-- table.jsp -->
<input type="text" id="region">
<input type="button" value="查询" id="search">
<table>
    <thead>
        <tr>
            <th>代理商ID</th>
            <th>代理商编号</th>
            <th>代理商名称</th>
            <th>代理商区域</th>
        </tr>
    </thead>
    <tbody id="dataBox"></tbody>
</table>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function () {
        $("#search").click(function () {
            let data = { region: $("#region").val() };
            $("#dataBox").load("search", data);
        });
    })
</script>

<!-- data.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <c:forEach items="${agents}" var="agent">
     <tr>
         <td>${agent.aid}</td>
         <td>${agent.ano}</td>
         <td>${agent.aname}</td>
         <td>${agent.aregion}</td>
     </tr>
</c:forEach>

String region = req.getParameter("region");
AgentService service = new AgentServiceImpl();
List<Agent> agents = service.queryAgents(region);
req.getSession().setAttribute("agents", agents);
resp.sendRedirect("data.jsp");

第三节 JSON

1. 什么是 JSON

JSON 全称为 JavaScript Object Notation，表示 Javascript 对象符号，是一种网络数据交换的格式，通常在服务器端和客户端之间使用。

2. 如何定义 JSON

语法：

//JSON格式的对象
let json = {
??? "属性名1": "属性值1",
??? "属性名2": "属性值2",
??? "属性名3": "属性值3",
???? ...
};

//JSON格式的数组
let jsonArray = [值1,值2,值3, ...];

//JSON格式的对象数组
let jsonObjectArray = [
??? {"属性名1": "数值1","属性名2": "数值2", ...},
??? {"属性名1": "数值1","属性名2": "数值2", ...}
]

3. Servlet 返回 JSON 格式数据

//JSON对象 需要引入 fastJson 包
JSONObject json = new JSONObject();
//将集合放入JSON对象中，以便传回前端
json.put("numbers", new int[]{1,2,3,4,5,6,7,8});
resp.setCharacterEncoding("UTF-8");
PrintWriter pw = resp.getWriter();
//将JSON数据传回前端
pw.print(json);
pw.flush();
pw.close();