ajax

最新推荐文章于 2024-07-29 14:22:26 发布

Blank_IT

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量145

点赞数

文章标签： ajax java

本文链接：https://blog.csdn.net/Blank_IT/article/details/116244751

版权

Ajax

文章目录

JSON

概述
- JSON（JavaScript Object Notation）：JS对象标记
- 是一种轻量级的数据交换格式
- 易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

JSON语法

JSON语法是JavaScript对象表示语法的子集

符号
[]	表示数组
{}	表示对象
“”	表示是属性名或字符串类型的值
:	表示属性和值之间的间隔符
,	表示多个属性的间隔符或者是多个元素的间隔符

JSON的值
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）
- 对象（在大括号中）
- null

JSON解析

为什么需要解析
- 浏览器和服务器之间交互采用JSON格式，但传输的是JSON字符串
- 需要转成Java对象或JS对象，这种转换过程称为JSON解析
服务器端采用
- FastJSON：阿里开发的专门用来处理JSON的工具包
- Jackson：Jackson公司开发的一套处理JSON的API。（框架阶段使用）

FastJSON

概述
- FastJSON是阿里开发的一个Java库
- 可以将Java对象转换为JSON格式，也可以将JSON字符串转换为Java对象
方法
- JSON.toJSONString() 方法可以将对象转换成JSON字符串
- JSON.parseObject() 方法则返过来将JSON字符串转成对象

课堂案例

使用FastJSON处理JSON字符串

@WebServlet(name = "JsonServlet",value = "/jsonservelt")
public class JsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json;charset=utf-8");
        Book book = new Book(101, "葵花宝典", "张三", new Date(), "北京光华出版社", "20202002021", new BigDecimal(119), "", 10);
//        String js = JSON.toJSONString(book);
        Book book1=new Book(102, "葵花宝典2", "张三", new Date(), "北京光华出版社", "20202002022", new BigDecimal(119), "", 10);
        ArrayList<Book> list = new ArrayList<>();
        list.add(book);
        list.add(book1);
        list.add(book1);
        String js = JSON.toJSONString(list, SerializerFeature.PrettyFormat,     //美化json
                SerializerFeature.WriteMapNullValue,                    //输出null值
                SerializerFeature.WriteNullStringAsEmpty,           //输出 ""
                SerializerFeature.DisableCircularReferenceDetect     //禁用循环引用检测
        );
        System.out.println(js);
        response.getWriter().write(js);
        //JSON转 java对象
//        Book book2 = JSON.parseObject(js,Book.class);
//        System.out.println(book2);
        List<Book> books = JSON.parseArray(js, Book.class);
        for (Book book2 : books) {
            System.out.println(book2.toString());
        }
    }

注意事项
- 控制不序列化某些属性
  - @JSONField(serializable=false)
- 控制格式化时间
  - @JSONField(format=“yyyy-MM-dd”);
- 控制输出
  - SerializerFeature.PrettyFormat //美化输出
  - SerializerFeature.WriteMapNullValue //输出空值null
  - SerializerFeature.WriteNullStringAsEmpty //输出空值""
  - SerializerFeature.DisableCircularReferenceDetect //禁用循环检测

浏览器处理JSON

浏览器内置提供JSON对象处理JSON字符串
JSON.stringify();
- 把JavaScript对象转成JSON字符串
JSON.parse();
- 把JSON字符串转成JavaScript对象

AJAX

概述
- AJAX = Asynchronous JavaScript and XML
- AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

AJAX使用步骤

1 创建XMLHttpRequest对象
- var xhr = new XMLHttpRequest();
2 设置回调函数
- xhr.onreadystatechange = function(){…}
3 打开连接
- xhr.open(method,url,async);
4 发送请求
- xhr.send(data);

创建XMLHttpRequest对象

兼容各种浏览器写法

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();    //IE7+ firefox,chrome,opera,safari浏览器
}else{
    //IE6，IE5浏览器执行代码
    xhr=new ActiveXobject("Microsoft.XMLHTTP");
}

设置回调函数

readyState有5种状态

状态	描述
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

statue
- 200：成功
- 404：资源未找到
- 500：服务器端错误

打开连接、发送请求

open(method,url,async)
- method:请求方式，get或post
- url：请求的服务器地址
- async：是否异步，true表示异步，false表示同步，默认是true
注意
- post请求发送之前要设置内容类型请求头

 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

Send(data)
- data表示发送给服务器的数据

XMLHttpRequestxiangy

获取响应内容
- XMLHttpRequest对象的responseText或responseXML属性

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

同源策略

同源策略
- AJAX请求地址的协议、域名、端口号必须和页面所在的地址相同
- 解决跨域问题
  - 1 JSONP(麻烦，不推荐)
  - 2 服务器通过（“Access-Control-Allow-Origin”,"*"）响应头

案例

AJAX验证用户是否可用
- 验证用户是否可以注册，利用AJAX技术进行动态验证

//html前端代码
  <form action="" method="post">
    <table>
        <tr>
            <td>用户名</td>
            <td><input id="username" type="text" name="username" onblur="check1()">
                <span id="usermsg"></span>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td><input id="btn" type="submit" value="注册"></td>
        </tr>

    </table>

    </form>
    <script type="text/javascript">

            function check1() {
                var username=document.getElementById("username").value;
                if(username==null||username.trim().length==0){
                    alert("用户名不能为空")
                }
                var usermsg = document.getElementById("usermsg");
                var btn = document.getElementById("btn");
                //发送ajax请求
                //1、创建XMLHttpRequest连接
                var xhr = new XMLHttpRequest();
                //2、设置回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState==4&&xhr.status==200){
                        if (xhr.responseText=="false"){     //说明该用户名不存在，可以使用
                            usermsg.innerHTML="该用户名可用";
                            usermsg.style.color="green";
                            btn.disabled=false;
                        }else{
                            usermsg.innerHTML="该用户名已存在";
                            usermsg.style.color="red";
                            btn.disabled=true;
                        }
                    }
                }
                //3、打开连接
                xhr.open("get","registerServlet?username="+username,true);     //true 异步 默认为 true 可不设置
                //4、发送
                xhr.send();
            }
    </script>

//servlet代码
@WebServlet(name = "RegistServlet",value = "/registerServlet")
public class RegistServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        ArrayList<String> list = new ArrayList<>();
        list.add("lisa");
        list.add("zhangsan");
        list.add("lisi");
        list.add("wanger");
        System.out.println(username);
        if (username!=null){
            if (list.contains(username)){
                response.getWriter().write("true");
            }else {
                response.getWriter().write("false");
            }
        }
    }

AJAX获取书籍列表
- 使用AJAX异步获取书籍列表

//html 前端代码
<h1>书籍展示</h1>
    <input type="button" value="查看所有书籍" onclick="check1()">
<table id="booktab" style="margin: 0 auto" width="90%" border="1">
    <tr>
        <th>id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版时间</th>
        <th>出版社</th>
        <th>isbn</th>
        <th>价格</th>
        <th>图片</th>
        <th>类别</th>
        <th>操作</th>
    </tr>
</table>
    <script type="text/javascript">
        function check1() {
            var booktab = document.getElementById("booktab");
            //创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //设置回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4&&xhr.status==200){
                    //处理数据
                    var js = xhr.responseText;
                    var booklist  = JSON.parse(js);
                    //先把表格中的数据清除
                //防止重复查询
                 var count = booktab.rows.length;
                    for (var i = 0; i <count-1 ; i++) {
                        booktab.deleteCell(1);
                    }
                    for (var i = 0; i < booklist.length; i++) {
                        //在表格中插入一行
                        var bookrow =  booktab.insertRow();
                        bookrow.style.textAlign="center";
                        bookrow.insertCell().innerHTML = booklist[i].id;
                        bookrow.insertCell().innerHTML = booklist[i].title;
                        bookrow.insertCell().innerHTML = booklist[i].author;
                        bookrow.insertCell().innerHTML = booklist[i].publishDate;
                        bookrow.insertCell().innerHTML = booklist[i].publisher;
                        bookrow.insertCell().innerHTML = booklist[i].isbn;
                        bookrow.insertCell().innerHTML = booklist[i].price;
                        bookrow.insertCell().innerHTML = booklist[i].picture;
                        bookrow.insertCell().innerHTML = booklist[i].cid;
                    }
                }
            }
            xhr.open("get","booklist",true);
            xhr.send();
        }
    </script>

//servlet代码
@WebServlet(name = "BookListServlet",value = "/booklist")
public class BookListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("application/json;charset=utf-8");

        Book book1 = new Book(101, "葵花宝典1", "张三", new Date(), "北京光华出版社", "20202002021", new BigDecimal(119), "", 10);
        Book book2 = new Book(102, "葵花宝典2", "张三", new Date(), "北京光华出版社", "20202002022", new BigDecimal(119), "", 10);
        Book book3 = new Book(103, "葵花宝典3", "张三", new Date(), "北京光华出版社", "20202002023", new BigDecimal(119), "", 10);
        Book book4 = new Book(104, "葵花宝典4", "张三", new Date(), "北京光华出版社", "20202002024", new BigDecimal(119), "", 10);
        Book book5 = new Book(105, "葵花宝典5", "张三", new Date(), "北京光华出版社", "20202002025", new BigDecimal(119), "", 10);
        Book book6 = new Book(106, "葵花宝典6", "张三", new Date(), "北京光华出版社", "20202002026", new BigDecimal(119), "", 10);
        Book book7 = new Book(107, "葵花宝典7", "张三", new Date(), "北京光华出版社", "20202002027", new BigDecimal(119), "", 10);
        Book book8 = new Book(108, "葵花宝典8", "张三", new Date(), "北京光华出版社", "20202002028", new BigDecimal(119), "", 10);
        Book book9 = new Book(109, "葵花宝典9", "张三", new Date(), "北京光华出版社", "20202002029", new BigDecimal(119), "", 10);
        Book book10 = new Book(110, "葵花宝典10", "张三", new Date(), "北京光华出版社", "20202002030", new BigDecimal(119), "", 10);
        ArrayList<Book> list = new ArrayList<>();
        list.add(book1);
        list.add(book2);
        list.add(book3);
        list.add(book4);
        list.add(book5);
        list.add(book6);
        list.add(book7);
        list.add(book8);
        list.add(book9);
        list.add(book10);
        //java对象转为JSON字符串
        String js = JSON.toJSONString(list, SerializerFeature.PrettyFormat);
        response.getWriter().write(js);
    }

登录及跳转

//HTML前端代码
<form action="" method="post" >
        <table>
            <tr>
                <td>用户名</td>
                <td><input id="username" type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input id="password" type="password" name="password"></td>
            </tr>
            <tr>
                <td><input type="button" value="登录" onclick="login()"></td>
            </tr>
        </table>

    <script type="text/javascript">
        function login() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            // alert(username);
            // alert(password);

            if (username==null||username.trim().length==0){
                alert("用户名不能为空");
                return;
            }
            if (password==null||password.trim().length==0){
                alert("密码不能为空");
                return;
            }

            //创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //设置回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4&&xhr.status==200){
                    var js = xhr.responseText;
                     var msg = JSON.parse(js);
                    alert(msg.data+".."+msg.code+".."+msg.msg);
                    if (msg.code==0){
                        alert(msg.msg);
                        window.location="booklist.html";
                    }else{
                        alert(msg.msg);
                        window.location="ajaxlogin.html";
                    }
                }
            }
            xhr.open("post","ajaxlogin");
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //post 设置响应头
            xhr.send("username="+username+"&password="+password);
        }
    </script>
    </form>

//实体类Result
public class Result<T> {
    //状态码
    private int code;
    //消息
    private String msg;
    //数据
    private T data;

    private Result(T date) {
        this.data = date;
        this.code = 0;
        this.msg = "success";
    }

    private Result(CodeMsg codeMsg) {
        if (codeMsg!=null){
            this.code = codeMsg.getCode();
            this.msg = codeMsg.getMsg();
        }
    }

    //返回成功的结果
    public static <T> Result success(T data){
        return new Result<T>(data);
    }
    //返回失败的结果
    public static <T> Result fail(CodeMsg codeMsg){
        return new Result<T>(codeMsg);
    }
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public T getData() {
        return data;
    }
    public void setData(T data) {
        this.data = data;
    }
    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }
}

//实体类CodeMsg
public class CodeMsg {
    private int code;  //状态码
    private String msg; //消息

    private CodeMsg() {
    }
    private CodeMsg(int code, String msg) {
        this.code = code;
        this.msg = msg;
    }
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    @Override
    public String toString() {
        return "CodeMsg{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                '}';
    }
    //登录成功
    public static final CodeMsg SUCCESS=new CodeMsg(0, "success");
    //定义错误CodeMsg
    //用户名为空
    public static final CodeMsg USERNAMEEMPTY = new CodeMsg(10001, "用户名为空");
    //密码为空
    public static final CodeMsg PASSWORDEMPTY = new CodeMsg(10002, "密码为空");
    //用户名或密码错误
    public static final CodeMsg LOGINFAIL = new CodeMsg(10003, "用户名或密码错误");
}

//servelt代码
@WebServlet(name = "AjaxLoginServlet",value = "/ajaxlogin")
public class AjaxLoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        if (username==null||username.trim().length()==0){
            Result usernameempty = Result.fail(CodeMsg.USERNAMEEMPTY);
            response.getWriter().write(JSON.toJSONString(usernameempty));
//            response.getWriter().write("用户名不能为空");
            return;
        }
        if (password==null||password.trim().length()==0){
            Result pwdempty = Result.fail(CodeMsg.PASSWORDEMPTY);
            response.getWriter().write(JSON.toJSONString(pwdempty));
//            response.getWriter().write("密码不能为空");
            return;
        }
        if ("admin".equals(username)&&"888".equals(password)){
            User user = new User(username, password);
            request.getSession().setAttribute("user", user);
            Result success = Result.success(CodeMsg.SUCCESS);
            response.getWriter().write(JSON.toJSONString(success));
//            response.getWriter().write("登录成功");
        }else{
            Result fail = Result.fail(CodeMsg.LOGINFAIL);
            response.getWriter().write(JSON.toJSONString(fail));
        }
    }

Blank_IT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

Ajax文章目录AjaxJSONJSON语法JSON解析FastJSON课堂案例浏览器处理JSONAJAXAJAX使用步骤创建XMLHttpRequest对象设置回调函数打开连接、发送请求XMLHttpRequestxiangy同源策略案例JSON概述JSON（JavaScript Object Notation）：JS对象标记是一种轻量级的数据交换格式易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率JSON语法JSON语法是JavaScript对象表示语法的子
复制链接

扫一扫