08_Ajax&Json

作者: 渐进逾 | 来源:发表于2019-08-26 08:40 被阅读0次

08_Ajax&Json

异步请求

无刷新获取服务器资源。
特点：

js发送异步请求，服务器响应返回的数据给到js,js操作dom更新页面
无刷新页面原来数据不变，所以用户不用等待可以点击任何发送新的请求

Ajax：

Asynchronous JavaScript And XML（异步的JavaScript和XML）。使用ajax可以进行异步请求，无刷新获取服务器的数据。以前是浏览器发送有刷新同步请求，现在是js发送无刷新异步请求。

Ajax应用场景：

1.异步检验用户名
2.内容自动补全

同步与异步请求区别

image.png

同步方式发送请求

浏览器发送请求，服务器处理（用户处于等待），服务器返回数据给浏览器，浏览器加载整个页面

异步方式发送请求

js发送异步请求，服务器处理（用户不需要等待），服务器返回的数据给js，js操作dom更新局部页面，也叫局部刷新

什么时候使用异步？什么使用使用同步？

1.页面跳转，页面切换，使用同步

2.一个页面内的更新，可以使用异步或同步

异步：体验好，开发成本高，异步提交请求方式：只有一种js代码提交

同步：会刷新，同步提交请求有几种方式
方式1.浏览器地址栏自己输入url
方式2：a标签超链接
方式3：location.href 本质操作浏览器地址栏 js代码方式
方式4：form表单的action,表单提交

案例-原生js实现ajax案例1-servlet处理异步校验请求

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "CheckUserNameServlet",urlPatterns = "/CheckUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.获取请求数据username
        String username = request.getParameter("username");

        //2.校验用户名是否为admin
        if("admin".equals(username)) {

            //3.是admin,返回true，代表用户名已被注册
            response.getWriter().write("true");
        }else {

            //4.不是，返回false，代表用户名可以使用
            response.getWriter().write("false");
        }
    }
}

原生js实现ajax案例2-前端发送异步请求与更新页面

发送异步请求语法

image.png

Ajax连接状态

readyState存有ajax连接状态，从 0 到 4 发生变化。
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪

image.png

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    用户名:<input type="text" id="username" name="username"><span id="info"></span>
</p>
<script type="text/javascript">
    //目标：提交异步请求验证用户名是否已被注册

    //1.给文本框注册失去焦点事件
    document.getElementById("username").onblur=function () {

        //2.获取输入的用户名
        var username = this.value;

        //3.用户名有值，发送异步请求
        if(username){

            //4.发送异步请求
            //4.1 创建ajax引擎对象【重点】
            var xmlHttp = new XMLHttpRequest();

            //4.2 设置异步请求回调函数，用于获取服务器返回的数据更新到页面上
            xmlHttp.onreadystatechange = function () {

                //获取服务器返回的数据有2个前提：
                //  1.ajax引擎与服务器通信状态readyState=4, 代表获取服务器响应的数据完成
                //  2.http协议通信状态码status=200, 代表通信正常
                if(xmlHttp.readyState==4 && xmlHttp.status==200){

                    //获取服务器返回的数据
                    var isRegister = xmlHttp.responseText;//返回数据有："true"或“false”

                    if(isRegister=="true"){
                        //如果服务器返回“true”，显示已被注册
                        document.getElementById("info").innerHTML="已被注册";
                    }else{
                        //如果服务器返回“false”，显示可以使用
                        document.getElementById("info").innerHTML="可以使用";
                    }
                }
            };

            //4.3 初始化请求，设置请求提交数据方法、访问服务器的资源路径
            xmlHttp.open("get","CheckUserNameServlet?username="+username,true);
            //  参数1：设置提交请求数据的方法，get或post
            //  参数2：访问服务器的资源路径
            //  参数3：设置是否异步提交请求，true代表异步，并且是默认值，可以省略

            //4.4 发送异步请求
            xmlHttp.send();

        }
    }
</script>
</body>
</html>

原生js实现ajax案例3-调试测试运行

目标：使用debug调试条码运行，观察整个异步发送请求、服务器处理、js更新页面的运行过程。
前端调试

使用浏览器的开发者工具
设置断点
每一行运行

image.png

后端调试

设置断点
每一行运行

image.png

tips:
1.在后端设置断点，并能进入运行，说明发送异步请求成功。
2.在回调函数里面设置断点，并能进入运行，说服务器成功处理了异步请求。

.jq实现ajax的五种方式1-全局对象get方法

image.png

1.get异步请求

get异步请求的参数有4个?url参数是必须的.
异步请求传递请求参数数据格式:
格式1：以key=value字符串形式，例如：'key1=value1&key2=value2...'
格式2：json普通对象格式，{key1:value1,key2:value2}

2.post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<p>
    用户名:<input type="text" id="username" name="username"><span id="info"></span>
</p>
<script type="text/javascript">
    //目标：提交异步请求验证用户名是否已被注册

    //1.给用户名文本框注册失去焦点事件
    $("#username").blur(function () {

        //2.获取输入的用户名
        var username  = $(this).val();

        //3.校验用户名是否有值
        if(username){

            //4.用户名有值提交异步请求【jquery的post方法实现ajax异步请求】
            /*
            * 语法：$.post(url[,data][,callback][,type]);
            * 参数1: url, 设置服务器资源地址,这是必须的参数
            * 参数2: data, 设置提交的请求数据，支持2种格式
            *        格式1：键值对的字符串形式，eg:"key1=value1&key2=value2..."
            *        格式2：js对象方式（json对象），eg:{key1:value1,key2:value2,...}
            * 参数3: callback, 设置成功的回调函数
            *       格式：function(result){...}
            *       result是服务器返回的结果，使用一个参数接收
            * 参数4：设置服务器返回数据的类型，默认文本字符串
            *       type="xml",设置服务器返回xml格式的字符串
            *       type="text",设置服务器返回文本字符串，默认值
            *       type="script",设置服务器返回javascript字符串
            *       type="html",设置服务器返回html格式字符串
            *       type="json",设置服务器返回json格式字符串，并将其转换为json对象（js对象）
            *           json格式字符串：'{"key1":value1,"key2":value2,...}' 注意：要求json字符串里面的可以必须使用双引号括起来
            * */
            $.post(
                "CheckUserNameServlet",
                {name:username},
                function (result) {
                    //更新页面显示
                    //result有2个值true或false字符串
                    if(result=="true"){
                        //页面显示“已被注册”
                        $("#info").text("已被注册");
                    }else{
                        //页面显示“可以使用”
                        $("#info").text("可以使用");
                    }
                }
            );
        }
    });

</script>
</body>
</html>

tips:post提交异步请求比get好在哪里？
提交数据大小没有限制

3.全局对象ajax方法

案例：(实现异步登录)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form action="login" method="post" id="loginForm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username" placeholder="请输入用户名"/></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="登录" id="btnLogin"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
   

</script>
</body>
</html>

ajax方法语法

语法：
$.ajax(json对象) api文档写法$ .ajax([settings])
json对象常用属性如下：
url：服务器访问地址
async：设置后台发送类型，是异步或同步发送。通常省略。默认值：true，异步发送请求
data：发送给服务器的数据的格式
格式1：键=值
格式2：{键:值} 里面可以有多个键值对
method：发送请求的方式：GET或POST，早期的版本这个属性叫:type
默认的请求方式，GET方式
dataType：服务器返回的数据类型
取值可以是 xml, html, script, json, text, _default等
success：服务器响应成功以后调用的回调函数，回调函数的参数是服务器返回的数据
error：如果服务器出现异常调用这个函数


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "LoginServlet",urlPatterns = "/LoginServlet")
public class LoginServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int a=1/0;
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.获取请求数据username和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //2.校验用户名必须为admin，密码必须为123
        if("admin".equals(username) && "123".equals(password)) {

            //3.校验通过，返回true，代表登录成功
            response.getWriter().write("true");
        }else {

            //4.校验失败，返回false，代表登录失败
            response.getWriter().write("false");
        }
    }
}

jquery_ajax_ajax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form action="login" method="post" id="loginForm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username" placeholder="请输入用户名"/></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password" id="password" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" value="登录" id="btnLogin"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">

    //1.给登录按钮注册点击事件【注意，不可以使用表单的提交事件，因为提交是有刷新请求】
    $("#btnLogin").click(function () {

        //2.获取用户名与密码
        var username = $("#username").val();
        var password = $("#password").val();

        //3.使用jquery的ajax全局方法提交异步请求
        /*
        * 语法：$.ajax(json对象)
        * 这个全局方法参数json对象常用的属性如下：
        *   url 服务器访问地址
            async   设置后台发送类型，是异步或同步发送。通常省略
                    默认值：true，异步发送请求
            data    发送给服务器的数据的格式
                    格式1：键=值
                    格式2：{键:值} 里面可以有多个键值对
            method  发送请求的方式：GET或POST，早期的版本这个属性叫:type
                    默认的请求方式，GET方式
            dataType    服务器返回的数据类型
                        取值可以是 xml, html, script, json, text, _default等
            success 服务器响应成功以后调用的回调函数
                    回调函数的参数是服务器返回的数据
            error   如果服务器出现异常调用这个函数

         * 总结：ajax全局方法功能比全局的get，post方法强大如下：
         *       1.ajax全局方法可以设置是否异步，全局get，post只能异步
         *       2.ajax全局方法可以设置错误回调函数，全局get，post只有成功回调函数
        * */
        $.ajax({
            url:"LoginServlet",
            data:{username:username,password:password},
            method:"post",
            success:function (isLogin) {
                //isLogin服务器返回数据“true”或“false”
                if("true"==isLogin){
                    //返回“true”，代表登录成功
                    alert(username+"登录成功了");
                }else {
                    //返回“false”，代表登录失败
                    alert(username+"登录失败");
                }
            },
            error:function () {
                alert("服务器忙。。。");  //简单输出消息，以后会跳转到友好页面显示
            }
        });

    });


</script>
</body>
</html>

tips:ajax方法发送异步请求比get/post方法更好在什么地方?
1.功能多
2.可以传入是否是发送异步请求
3.服务器发生异常的错误回调函数

.jq3.0新增get-post签名方法发送异步请求

4.get签名方法方式

<script type="text/javascript">

    //1.给登录按钮注册点击事件【注意，不可以使用表单的提交事件，因为提交是有刷新请求】
    $("#btnLogin").click(function () {

        //2.获取用户名与密码
        var username = $("#username").val();
        var password = $("#password").val();

        //3.使用jquery的get全局方法提交异步请求
        /*
        * 语法：$.get(json对象)  由于明确写了get，所以叫get签名方法
        *
        * 这个全局方法参数json对象常用的属性如下：
        *   url 服务器访问地址
            async   设置后台发送类型，是异步或同步发送。通常省略
                    默认值：true，异步发送请求
            data    发送给服务器的数据的格式
                    格式1：键=值
                    格式2：{键:值} 里面可以有多个键值对
            dataType    服务器返回的数据类型
                        取值可以是 xml, html, script, json, text, _default等
            success 服务器响应成功以后调用的回调函数
                    回调函数的参数是服务器返回的数据
            error   如果服务器出现异常调用这个函数

         * 总结：jquery3.0新特性get全局方法与ajax全局方法功能对比如下：
         *       新特性方法少写method参数，达到了简化，可读性更强
        * */
        $.get({
            url:"LoginServlet",
            data:{username:username,password:password},
            success:function (isLogin) {
                //isLogin服务器返回数据“true”或“false”
                if("true"==isLogin){
                    //返回“true”，代表登录成功
                    alert(username+"登录成功了");
                }else {
                    //返回“false”，代表登录失败
                    alert(username+"登录失败");
                }
            },
            error:function () {
                alert("服务器忙。。。");  //简单输出消息，以后会跳转到友好页面显示
            }
        });

    });


</script>

5.post签名方法方式【推荐使用】

<script type="text/javascript">

    //1.给登录按钮注册点击事件【注意，不可以使用表单的提交事件，因为提交是有刷新请求】
    $("#btnLogin").click(function () {

        //2.获取用户名与密码
        var username = $("#username").val();
        var password = $("#password").val();

        //3.使用jquery的post全局方法提交异步请求
        /*
        * 语法：$.post(json对象)  由于明确写了post，所以叫post签名方法【推荐使用】
        *
        * 这个全局方法参数json对象常用的属性如下：
        *   url 服务器访问地址
            async   设置后台发送类型，是异步或同步发送。通常省略
                    默认值：true，异步发送请求
            data    发送给服务器的数据的格式
                    格式1：键=值
                    格式2：{键:值} 里面可以有多个键值对
            dataType    服务器返回的数据类型
                        取值可以是 xml, html, script, json, text, _default等
            success 服务器响应成功以后调用的回调函数
                    回调函数的参数是服务器返回的数据
            error   如果服务器出现异常调用这个函数

         * 总结：jquery3.0新特性post全局方法与ajax全局方法功能对比如下：
         *       新特性方法少写method参数，达到了简化，可读性更强
        * */
        $.post({
            url:"LoginServlet",
            data:{username:username,password:password},
            success:function (isLogin) {
                //isLogin服务器返回数据“true”或“false”
                if("true"==isLogin){
                    //返回“true”，代表登录成功
                    alert(username+"登录成功了");
                }else {
                    //返回“false”，代表登录失败
                    alert(username+"登录失败");
                }
            },
            error:function () {
                alert("服务器忙。。。");  //简单输出消息，以后会跳转到友好页面显示
            }
        });

    });


</script>

tips:jq3.0新增get/post签名方法比原有ajax方法更好在什么地方?
简化了请求方式的设置，少设置了一个参数。

JSON

JSON(JavaScript Object Notation), javascript的对象标记. 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据格式是一致的。

轻量级

输数据体积小，与xml相比，xml传输数据量大

JSON对象格式

普通对象格式

{key:value,key:value,....}

JSON数组对象格式

[ obj , obj , obj , ....]

表示一组值，多个值用逗号分隔

数据格式示例

<script type="text/javascript">
    //1 json普通对象格式
    var user = {
        "username":"jack",
        "password":"1234"
    };
    alert(user.username); //通过key获得json数据


    //2 json数组对象格式
    var data = [
        {"id":"b001","title":"javaweb","price":"998"},
        {"id":"b002","title":"java 基础","price":"123"},
        {"id":"b003","title":"ssh","price":"250"},
    ];
    alert(data[1].title);//获取的是“java 基础”

    //3 json混合模式（普通对象+数组）
    var user2 = {
        "username":"jack",
        "password":"1234",
        "data":[
            {"id":"b001","title":"javaweb","price":"998"},
            {"id":"b002","title":"java 基础","price":"123"},
            {"id":"b003","title":"ssh","price":"250"},
        ]
    };
    alert(user2.data[2].title);//获取的是“ssh”
</script>

tips:

JSON都有什么类型

json对象
json字符串
如何使用：服务器返回json字符串
前端js接收到服务器返回的数据为json对象
开发人员：接收到json对象，可以方便的解析数据

json对象都有什么类型

1.普通对象，解析数据：对象.属性名
2.数组，解析数据: 数组名[下标].属性名
3.混合

json字符串转换工具

image.png

jackson

image.png

利用第三方工具类将java对象转换为json字符串

工具类的语法
核心类ObjectMapper

ObjectMapperjsonString=objectMapper.writeValueAsString(java对象);

将java对象转换为json字符串的语法

转换代码

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.entity.User;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JackSonTest {

    public static void main(String[] args) throws JsonProcessingException {

        /*
        * 目标：将java对象转换为json字符串
        *
        * jackson的语法：
        *       核心类：ObjectMapper
        *       类有将java对象转换为json字符串方法：writeValueAsString(java对象);
        * */

        //ObjectMapper
        ObjectMapper objectMapper = new ObjectMapper();

        //1.将JavBean转换为json字符串
        //创建对象
        User user = new User(100,"张三","123");

        //转换为json字符串
        String jsonData = objectMapper.writeValueAsString(user);

        //打印输出
        System.out.println("javaBean对象转换json字符串："+jsonData);

        //2.将Map转换为json字符串
        //创建对象
        Map<String,User> map = new HashMap<>();
        map.put("zhangsan",new User(100,"张三","123"));
        map.put("lisi",new User(101,"李四","123"));

        //转换为json字符串
        jsonData = objectMapper.writeValueAsString(map);

        //打印输出
        System.out.println("Map对象转换json字符串："+jsonData);

        //3.将List转换为json字符串
        //创建对象
        List<User> userList = new ArrayList<>();
        userList.add(new User(100,"张三","123"));
        userList.add(new User(101,"李四","123"));

        //转换为json字符串
        jsonData = objectMapper.writeValueAsString(userList);

        //打印输出
        System.out.println("List对象转换json字符串："+jsonData);
    }
}

案例

1.内容自动补全

image.png

2.省市级联

image.png

08_Ajax&Json
异步请求无刷新获取服务器资源。特点： js发送异步请求，服务器响应返回的数据给到js,js操作dom更新页面无...

08_Ajax&Json

异步请求

Ajax：

Ajax应用场景：

同步与异步请求区别

同步方式发送请求

异步方式发送请求

什么时候使用异步？什么使用使用同步？

案例-原生js实现ajax案例1-servlet处理异步校验请求

原生js实现ajax案例2-前端发送异步请求与更新页面

发送异步请求语法

Ajax连接状态

原生js实现ajax案例3-调试测试运行

后端调试

.jq实现ajax的五种方式1-全局对象get方法

1.get异步请求

2.post

3.全局对象ajax方法

ajax方法语法

.jq3.0新增get-post签名方法发送异步请求

JSON

轻量级

JSON对象格式

数据格式示例

JSON都有什么类型

json对象都有什么类型

json字符串转换工具

jackson

转换代码

案例

1.内容自动补全

2.省市级联

相关文章

08_Ajax&Json

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读