黑马程序员技术交流社区

标题: ajax&json学习 [打印本页]

作者: tanglong 时间: 2019-3-28 13:42
标题: ajax&json学习
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使用

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2