黑马程序员技术交流社区

标题: Ajax&JSON笔记 [打印本页]
作者: Masumi    时间: 2019-9-19 13:36
标题: Ajax&JSON笔记
Ajax
概念
Asynchronous JavaScript And XML 异步的JavaScript和XML

异步和同步
同步：客户端发出请求后，必须等待服务器的响应才能进行下一步操作
异步：客户端发出请求后，可以执行其它的操作，等到服务器返回响应消息时再对响应消息进行处理

Ajax的特点：
传统的网页如果需要更新某一部分的内容，则需要重新载入整个网页。
Ajax可以实现无需加载整个网页，就可以更新部分的网页

Ajax的实现方式
原生的JS实现方式（了解）
//1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome,Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
            }

            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        *get方式，请求参数在URL后边拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或false（同步）

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

            //3.发送请求
            xmlhttp.send();

            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取

           //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
           xmlhttp.onreadystatechange=function()
            {
               //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4&& xmlhttp.status==200)
                {
                   //获取服务器的响应结果
                    var responseText =xmlhttp.responseText;
                    alert(responseText);
                }
            }

Jquery的实现方式（三种方式）

$.ajax({key1:value1, key2:value2…})
传入键值对，来指定请求的url、请求参数、请求方式等参数
  
键名
  		  
意义
  
  
url
  		  
请求资源的url
  
  
data
  		  
请求参数
    通常写法：
    data{"k1":"v1","k2":"v2"}
  
  
type
  		  
请求方式：get、post
  
  
success
  		  
成功获得响应后执行的回调函数
  
  
error
  		  
响应失败时调用的回调函数
  
  
dataType
  		  
响应消息的数据类型
    默认情况下，浏览器会根据响应的mime类型来解析
  


$.ajax({
               //首先传入一些可选参数
               url:"ajaxServlet",//请求的url
               type:"POST",//请求方式
               //传递数据，方式1：
                //data:"name=lhp&age=22",

               //传递数据的方式2，json方式：
                data:{
                 "name":"lhp",
                   "age":"22"
                },

               //成功获得服务器响应后的回调函数,参数代表了服务器响应的数据
               success:function (data) {
                   alert(data);
                },

               // 接收服务器响应出错时的回调函数
               error:function () {
                   alert("出错啦！");
                },
               //指定接收的响应数据类型
               //默认情况下，浏览器会根据响应的mime类型来解析
               dataType:"text"
            });


$.get(url,[data],[callback],[dateType])
这种方式不用给键值对，直接传参数
  
参数名
  		  
意义
  
  
url
  		  
请求资源的url
  
  
data
  		  
传递的请求参数，使用json对象的方式来存储数据
  
  
callback
  		  
成功获得服务器响应后执行的回调函数
  
  
dataType
  		  
响应数据的类型
  

$.get("ajaxServlet",{name:"lhp",age:"22"},function(data) {
               alert(data);
           },"text");

$.post(url,[data],[callback],[dateType])
同上，区别在于$.get()使用get方式，$.post()使用post方式发送ajax请求

JSON
概念
JavaScript Object Notation
JavaScript对象表示法

多用于存储和交换文本信息
JSON比XML更小、更快、更容易解析

数据类型与定义方式
定义方式：
用大括号表示这是一个json对象，大括号内用键值对形式定义对象属性
用中括号表示一个数组
var person = {
       //json的数据类型
       "name":"lhp",//字符串类型
       "age":22,//数字类型，可以是整型和浮点型
       "gender":true,//布尔类型
       "hobby":["lol","animation","comic"],//数组类型
       "aaa":null,//null类型
       "city":{"name":"chengdu","province":"sichuan","country":"china"}//json对象类型
        //数组和对象可以嵌套
    }

JSON对象的遍历：获取JSON对象的所有键对应的所有值
for in 循环
for (var key in Obj){
Obj[key]
}

Obj代表要遍历的JSON对象，key代表遍历中的属性名，使用Obj[key]来得到属性值

代码

JSON数据和Java对象的相互转换
JSON解析器
常见的解析器：Jsonlib，Gson，fastjson，jackson

JSON转为Java对象
使用步骤
  方法名
  		  说明
  
  T  readValue(String jsonStr,   Class<T> calss)
  		  jsonStr:待转换的json字符串
    clss：目标Java对象的class对象
  


Java对象转为JSON
使用步骤
转换方法
  方法名
  		  说明
  
  writeValue(参数1，Object o)
  		  
参数1
  
1.传入File对象：将转换的json对象写入文件中
  
2.传入Writer:将转换的json对象写入字符输出流中
  
3.传入OutputStream；将转换的json对象写入字节输出流中
  
Object：待转换的Java对象
  
  String  writeValueAsString(Object o)
  		  
传入待转换的Java对象，返回该对象的JSON数据字符串
  


jackson注解
一下两个注解是注解在Java对象的属性上的
@JsonIgnore：转换成json对象时，忽略此属性
@JsonFormat(pattern ="yyyy年MM月dd日"):该属性（通常为date类型）在转换为json键值对时，会被格式化。相当于使用了SimpleDateFormat
代码
JavaBean
public class Person {
    private String name;
    private int age;
    private boolean gender;

//   @JsonIgnore//转换成json对象时，忽略此属性
   @JsonFormat(pattern = "yyyy年MM月dd日") //JsonFormat注解的pattern属性，相当于使用simpleDateFormat来格式化日期
    private Date birthDay;

…省略构造方法和getter/setter
   
测试类

案例：检查用户名是否存在
需求：
用户名在输入框中输入了用户名后，当输入框失去焦点，就检查该用户名是否存在，并给出提示信息
步骤：
1.给输入框绑定失去焦点事件，失去焦点时发送ajax请求，请求参数为输入的用户名
2.在服务器端获取username，检查是否存在
3.返回结果
代码
前端代码
服务器端代码









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