A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© tanglong 初级黑马   /  2019-3-28 13:42  /  583 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

Ajax&Json

1. 能够理解异步的概念

- Ajax:    用于创建交互式网页的开发技术
  是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

2. 能够了解原生js的ajax

一定不要去敲这个代码!!!重要的是理解这种客户端网络请求的步骤以及思路!

- 创建异步对象

    //1.创建核心对象
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
   

- 建立连接

    xmlhttp.open("GET","ajaxServlet?username=tom",true);

- 发送请求

    xmlhttp.send();//post请求参数放在send()

- 接收数据

    xmlhttp.onreadystatechange=function()
    {
        //判断readyState就绪状态是否为4,判断status响应状态码是否为200
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
           //获取服务器的响应结果
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }

3. 能够使用jQuery的$.ajax()进行访问

- 语法格式:$.ajax({键值对})

      $.ajax({
                    url:"ajaxServlet1111" , // 请求路径
                    type:"POST" , //请求方式
                    //data: "username=jack&age=23",//请求参数
                    data:{"username":"jack","age":23},
                    success:function (data) {
                        alert(data);
                    },//响应成功后的回调函数
                    error:function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误,会执行的回调函数
   
                    dataType:"text"//设置接受到的响应数据的格式
                });



4.:happy: 能够使用jQuery的$.get()进行访问

$.get(url [data], [callback],[type])

     $.get("ajaxServlet",{"username":"rose"},function (data) {
                    alert(data);
                },"text");

5. :happy:能够使用jQuery的$.post()进行访问

$.post(url, [data], [callback], [type])

     $.post("ajaxServlet",{username:"rose"},function (data) {
                    alert(data);
                },"text");



6. 能够掌握json的对象&数组数据格式

- 对象:  {"key":"value","key1":"value1",...}
  数组:     ["test": {"key":"value","key1":"value1",...},"test1":[{},{},{}]]
- 注意:json里面的key一定要有双引号,不要写特殊符号
- 值符合八大基本类型,对象,数组

获取值的操作:

:happy:json对象.键名

json对象["键名"]

:happy:数组对象[索引]

遍历

7. 能够使用json转换工具Jackson进行json格式字符串的转换

- 核心对象:ObjectMapper
- writeValue(file/outputStream/wirter,obj)
- wirteValueAsString(obj)输出一个json字符串
- readValue(string,class)将字符串json转成java对象

8. 能够完成用户名是否存在案例

- 客户端
  - 编写前台JavaScript代码
        $(function(){
            //1. 获取第一个输入框元素
            //2. 给该元素绑定blur离焦事件
            //3. 发起异步请求(username获取输入框输入的value值)val()
            //{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
            $.get("findUserServlet",{"username":username},function(data){
                //4. 判断userExsit是否为true
                if(data.userExsit){
                    //5. 显示用户名存在
                }else{
                    //6. 显示用户名不存在
                }
            },"json");
        })
  前台页面实现完成后用浏览器打开,按F12开发者工具查看页面是否报错,看console控制台是否报错!
- 服务器
  - 编写findUserServlet
  - 步骤:
        //1. 获取username参数
        String username = request.getParamter("username");
        //2. 查询数据库判断是否有该用户名
        //3. 创建UserService
        //4.调用User user = UserService.findUser(username)--->UserDao.findUser(username)
        //select *  from  user where username = ?
        try{
        User user = JDBCTemplate.queryForObject(sql,new BeanRowPerperty(User)(User.class),username)
            return user;
        }catch(Exception e){
            return null;
        }
        ObjectMapper mapper = new ObjectMapper();
        Map map = new HashMap();
        //5. 判断user是否为空
        if(user ==null){
            //没有查询到
            map.put("userExist",false);
            map.put("msg","用户名可用");
            mapper.writeValueAsString(IO,map);
        }else{
            //查询到了
            map.put("userExist",true);
            map.put("msg","用户名不可用");
            mapper.writeValueAsString(IO,map);
        }
            
        
- 掌握前台页面Debug使用


0 个回复

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