传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© heifachangcun 中级黑马   /  2019-1-11 14:42  /  73 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小石姐姐 于 2019-1-17 09:52 编辑

AJax(**异步,局部刷新**)

        概念:
                英文全拼:ASynchronous JavaScript And XML 异步的JavaScript和XML
                1.异步和同步:客户端和服务器端相互通信的基础上
                        同步请求:
                                客户端必须等待服务器端的响应,在等待期间客户端不能做其他操作
                        异步(可理解为多线程)请求:
                                客户端不需要等待服务器端的响应,在服务器处理请求的过程中,客户端可以去进行其他的操作
                        **AJax支持异步请求,也支持同步请求.
                                          Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术;通过在后台与服务器进行少量数据交换,Ajax可以使
                                  网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新;传统的网页(不适用Ajax)如果需要
                                  更新内容,必须重载整个网页页面.
                *注:对网页主体不影响的情况下,对局部内容进行刷新
                        作用:提升用户的体验
        实现方式
                1.原生的JS实现方式(了解)
                        ajax也支持同步请求
                2.JQuery实现方式
                        1.$.ajax()发送异步请求
                                语法:
                                    
[Java] 纯文本查看 复制代码
    $.ajax({键值对});
                                                "type":"post/get",  //请求方式
                                                "url":"xxx",  //请求路径
                                                "data":"xxx=xxx & xxx=xxx",  //请求参数
                                                          或{"xxx":"xxx","xxx":"xxx"}
                                                        如:data:{"username":"jack","age":23},-->推荐使用
                                                "success":function(data){},    //表示响应成功会执行的回调函数
                                                                //data代表的是服务器返回的数据
                                                "error":function(data){},  //表示如果请求出错,会执行的回调函数                
                                                dataType:"text/json/jsonp"        //设置接收到的响应数据的格式  
              

                                                注意:如果不写dataType默认按服务器的响应头Content-Type来决定,MIME类型
                                                        dataType
                                                                Text :文本
                                                                json:json格式
                                                                jsonp:解决跨域问题  cross domain

                        2.$.get()-->发送get请求
                                语法:
                                
[Java] 纯文本查看 复制代码
        $.get(url,[data],[callback],[type])
                                                url:请求路径
                                                data:请求参数
                                                        "xxx=xxx & xxx= xxx",  //请求参数
                                                          或{"xxx":"xxx","xxx":"xxx"}
                                                callback:回调函数
                                                type:请求参数
                                                        text/json

                        3.$.post()-->发送post请求
                                语法:
                                 
[Java] 纯文本查看 复制代码
       $.post(url,[data],[callback],[type])
                                                url:请求路径
                                                data:请求参数
                                                callback:回调函数
                                                type:请求参数


****JSON
        1.概念        JavaScript Object Notation JavaScript对象表示法
                                *本质:js对象 --->对象.属性--->获取值
                如: var p = {"name": "张三","age":"23"};
                        Json现多用于存储和交换文本信息的语法
                        进行数据的传输
                *json作为一种数据协议的格式
        2.语法:
                1.规则:
                        1.数据在名称值对中:json数据是由键值对构成的
                                键用引号(单双皆可)引起来
                                值的取值类型
                                        1.数字
                                        2.字符串
                                        3.逻辑值(true/false)
                                        4.数组(在方括号中)
                                        5.对象(在花括号中)
                                        6.null
                        2.数据由逗号分隔
                                多个键值对由逗号分隔
                        3.花括号保存对象     
                                使用{}定义json格式     {"address":{"province":"陕西"....}}
                        4.方括号保存数组        
                                []    {"persons":[{},{}]}

                                使用:
                                        嵌套格式:
                                                第一种: {}->[]

                                例子:
[Java] 纯文本查看 复制代码
 var person = {
                                                persons:[{"name":"李四","age":25,"gender":"male"},
                                                                {"name":"张三","age":26,"gender":"male"},
                                                                {"name":"王五","age":30,"gender":"female"}
                                                        ]
                                                };


                                                第二种: []->{}        

                                例子
[Java] 纯文本查看 复制代码
:var persons = [{"name":"李四","age":25,"gender":"male"},
                                                                        {"name":"掌柜三","age":29,"gender":"female"},
                                                                        {"name":"貂蝉","age":68,"gender":"male"}
                                                                        ]

                   注意:看到大括号开头代表json对象
                                        对象.属性
                                看到中括号代表数组
                                        数组[索引].属性
                                如果括号被引号引起来,就不再是对象或数组,而是字符串了        
                2.获取数据
                        基本获取:
                                1.json对象.键名
                                2.json对象["键名"]
                                3.[]->{}:数组对象[索引].键名
                                        另注嵌套{}->[]:数组对象.数组键名[索引].键名
                        遍历获取:
                                遍历获取数组的值
                        例子:                  
[Java] 纯文本查看 复制代码
var ps = [
                                        {"name": "张三", "age": 23, "gender": true},
                            {"name": "李四", "age": 24, "gender": true},
                            {"name": "王五", "age": 25, "gender": false}
                                        ];
                                  //获取ps中的所有值
                        for (var i = 0; i < ps.length; i++) {
                            var p = ps;
                            for(var key in p){
                                alert(key+":"+p[key]);
                            }
                        }

                3.JSON数据和Java对象的相互转换
                        JSON解析器:封装好的工具类
                                Jsonlib-->官方的
                                Gson   -->谷歌
                                fastjson-->阿里
                                jackson -->springMVC默认的

                        1.JSON转为Java对象(了解)
                                使用步骤
                                        1.导入jackson相关jar包
                                        2.创建Jackson核心对象objectMapper
                                        3.调用objectMapper的相关方法进行转换
                                                1.readValue(json字符串数据,Class类型)

                        2.Java对象转为JSON
                                使用步骤
                                        1.导入jackson相关jar包
                                        2.创建Jackson核心对象objectMapper
                                        3.调用objectMapper的相关方法进行转换
                                                转换方法
                                                        writeValue(参数1,obj):
                                                                参数1:
[Java] 纯文本查看 复制代码
 File:将obj对象转换为json字符串,并保存到制定文件中
                                                                                new File("保存路径")
                                                                        Writer:将obj对象转换为json字符串,将json数据填充到字符输出流中
                                                                        OutputStream:将obj对象转换为json字符串,将json数据填充到字节输出流中
                                                        writeValueAsString(obj):将对象转为json字符串


                        **jackson api
                                        ObjectMapper  mapper = new Objectmapper;
                                                mapper.writeValueAsString(对象)
                                        或
                                                mapper.writeValue(输出流,对象)

                                注解
                                        1.@JsonIgnore:排除属性
                                        2.@JsonFormat():属性值格式化
                                                   参数:pattern="yyyy-MM-dd"



                                复杂Java对象转换
                                        1.list集合
                                                数组:[{},{}]
                                        2.map集合
                                                和对象一致:{key:value,key:value}
        案例:校验用户名是否存在               
                        1.服务器响应的数据,在客户端使用时,要想当做json数据格式使用时
                                        1.$,get(type):将最后一个参数type指定为"json"
                                        2.response.setContentType("application/json;charset=utf-8")

                                手动将字符串转为json               
                                        3.JSON.parse(data)
                                        4.eval("("+data+")")


分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马