AJAX

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 不是新的编程语言，而是一种使用现有标准的新方法

是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

异步和同步

同步：客户端必须等待服务器端的响应，在等待期间客户端不能做其他操作

异步：客户端不需要等待服务器端的响应，在服务器端处理请求时客户端可以进行其他操作

原生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");
}

(2). 建立连接

使用xmlhttp的open(method,url,async)方法

参数

method：请求类型(GET / POST)

url：文件在服务器上的位置

async：同步(false) 或 异步(true)

(3). 发送请求

使用xmlhttp的send()方法

如果请求方式为GET，请求参数拼接在url之后，send()方法为空参

如果请求方式为POST，请求参数在send()方法中定义

(4). 接受并处理来自服务器的响应结果

属性

① responseText：获得字符串形式的响应数据

② responseXML：获得 XML 形式的响应数据

获取时机

当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange，在事件onreadystatechange中

1. 判断响应状态readyState是否为4
   • 0: 请求未初始化
   • 1: 服务器连接已建立
   • 2: 请求已接收
   • 3: 请求处理中
   • 4: 请求已完成，且响应已就绪
2. 判断响应状态码status是否为200

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	var responseText = xmlhttp.responseText;
    }
  }

JQuery实现AJAX

1. $.ajax()

$.ajax({键值对})

$.ajax({
    url : "ajax" ,              // 请求路径
    type : "POST" ,             // 请求方式
    async : true ,              // 同步或异步
    data : {                    // 请求参数
        "username" : "jack" ,
        "age" : 20 ,
    } ,
    success : function (data) { // 请求成功后的回调函数
        alert(data);
    }
});

常用键值

2. $.get() & $.post()

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

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

参数

$.get("ajax",{"username" : "user"},function (data) {
    alert("get");
},"json");

//-----------------------------------------------------

$.post("ajax",{"username" : "user"},function (data) {
    alert("post");
},"json");

JSON

JavaScript Object Notation，JavaScript对象表示法

JSON是一种存储和交换文本信息的语法

JSON基本规则

数据在键值对中

数据由逗号分隔

花括号保存对象

方括号保存数组

<script>
    // 基本格式
    var person = {"name": "AAA", "age": 20, "sex": "M"};

    // [] 嵌套 {}
    var persons = [
        {"name": "BBB", "age": 20, "sex": "F"},
        {"name": "CCC", "age": 20, "sex": "F"}
    ];

    // {} 嵌套 []
    var class01 = {
        "students": [
            {"no": 1},
            {"no": 2},
            {"no": 3},
            {"no": 4},
            {"no": 5}
        ],
        "cno": "01"
    };
</script>

JSON值的类型

1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中）
5. 对象（在花括号中）
6. null

获取数据

定义JSON

var person = {"name": "AAA", "age": 20, "sex": "M"};
var class01 = {
    "students" : [
        {"sno" : 1},
        {"sno" : 2},
    ]
};

JSON对象.键名

var name = person.name;

JSON对象["键名"]

var age = person["age"];

数组对象[索引]

var sno1 = class01.students[0].sno;

使用for in获取所有键值

for (var key in person) { // key 会获取到 person中的所有键名
	alert(key + ":" + person[key]);
}

在这种情况中要获得对应键的值，不可以使用JSON对象.键名这种方法，以上面的代码为例，在循环体内会将JSON对象的键名以字符串格式赋值给key，若使用person.key则相当于person."name"，双引号的存在会导致无法寻找到对应值

使用双重循环获取数组中的所有键值

for (var i = 0; i < class01.students.length; i++){
    var s = class01.students[i];
    for (var key in s) {
        alert(key + ":" + s[key]);
    }
}

JSON对象的转换

JSON解析器

常见的JSON解析器：Jsonlib，Gson，fastjson，jackson

Java对象转为JSON

步骤

1. 导入jackson相关jar包
2. 创建Jackson核心对象ObjectMapper

ObjectMapper mapper = new ObjectMapper();

3. 调用ObjectMapper相关方法

   ① writeValue(参数1,obj)：参数1可接收File、Writer、OutPutStream

   File：将obj对象转换为Json字符串，并保存到指定的文件中

   Writer：将obj对象转换为Json字符串，并将Json数据填充到字符输出流中

   OutPutStream：将obj对象转换为Json字符串，并将Json数据填充到字节输出流中

   ② writeValueAsString(obj)：将对象转为json字符串

示例

/*
 Java对象转为Json字符串
*/
public class jacksonTest {
    @Test
    public void test(){
        // 创建Person类
        Person p = new Person();
        p.setName("AA");
        p.setSno("111");
        p.setSex("F");
        // 创建Jackson核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 转换对象
        try {
            String s = mapper.writeValueAsString(p);
            System.out.println(s);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
    }
}
/*
 输出结果为
 {"name":"AA","sno":"111","sex":"F"}
*/

注解

① @JsonIgnore：忽略属性

@JsonIgnore
private String name;

在某个属性或对应的get方法上添加该注解，转换后的Json字符串就不会出现对应的键值对

② @JsonFormat：属性值格式化

List转换

转换后得到的是一个Json数组

/*
 List集合转为Json字符串
*/
public class jacksonTest {
    @Test
    public void test(){
        // 创建Person类
        Person p1 = new Person("A","01","F");
        Person p2 = new Person("B","02","F");
        Person p3 = new Person("C","03","M");
        // 创建List集合
        List<Person> l = new ArrayList<Person>();
        // 添加对象
        l.add(p1);
        l.add(p2);
        l.add(p3);
        // 创建Jackson核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 转换对象
        try {
            String s = mapper.writeValueAsString(l);
            System.out.println(s);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
    }
}

输出结果

[{"sno":"01","sex":"F"},{"sno":"02","sex":"F"},{"sno":"03","sex":"M"}]

Map转换

转换后得到的内容与对象相同

/*
 Map集合转为Json字符串
*/
public class jacksonTest {
    @Test
    public void test(){
        // 创建Map集合
        Map<String,Object> map = new HashMap<String, Object>();
        // 添加数据
        map.put("name","AA");
        map.put("sno","01");
        map.put("sex","F");
        // 创建Jackson核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 转换对象
        try {
            String s = mapper.writeValueAsString(map);
            System.out.println(s);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
    }
}

输出结果

{"sno":"01","sex":"F","name":"AA"}

JSON转为Java对象

JSON转为Java对象的步骤与Java转Json相同，只是ObjectMapper相关方法有所不同

ObjectMapper方法

reafValue(Json字符串数据,期望转换为的类型)

public class jacksonTest {
    @Test
    public void test(){
        // 创建Json字符串
        String json = "{\"name\":\"AA\",\"sno\":\"01\",\"sex\":\"F\"}";
        // 创建Jackson核心对象
        ObjectMapper mapper = new ObjectMapper();
        // 转换为java对象
        try {
            Person person = mapper.readValue(json, Person.class);
            System.out.println(person);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
    }
}