[TOC]

ajax和json

1.ajax

ajax:异步的javascript和xml

同步和异步：客户端和服务器端相互通信的基础上

  • 客户端必须等待服务器的响应，在次期间，在等待的响应客户端不能做其他操作，这就是同步。
  • 客户端必须等待服务器的响应，在此期间，在等待的响应的客户端可以进行其他的操作，这就是异步。

ajax技术：是一种在不需要重新加载浏览器页面的情况下，实现部分页面更新。通过在后台与服务器进行数据交换，ajax可以使当前的网页实现异步更新。在不实现整个网页重新加载的前提下，实现部分页面内容的更新。

如果不使用ajax技术，页面内容的替换，必须刷新整个网页，使用ajax技术可以提升用户体验。

  1. ​ XMLHttpRequest 是 AJAX 的基础。
  2. 　XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
  3. 　XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
  4. 　XMLHttpRequest的对象用于客户端和服务器之间的异步通信。

　它执行以下操作：

  1. 在后台从客户端发送数据
  2. 从服务器接收数据
  3. 更新网页而不重新加载。

1.1 创建XMLHttpRequest对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

1
2
3
4
5
6
7
8
9
10
11
12
13
//ajax请求的核心对象
var xmlhttp;

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

1.2 XMLHttpRequest对象的属性和方法

属性

属性 描述
onreadystatechange 存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。
readyState 存有的XMLHttpRequest的状态从0到4发生变化。
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
status 将状态返回为数字（例如，“Not Found”为404，“OK”为200）

方法

方法 描述
void open（method，URL）
void open（method，URL，async）
void open（method，URL，async，userName，password）		 请求的类型；GET 或 POST方法和URL的请求。
与上面相同，但指定异步或不。
与上面相同，但指定用户名和密码。
void send（content） 发送获取请求。

2.jquery的ajax技术

$.ajax( );

$.get( );

$.post( );

2.1 $.ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//ajax
function fun(){
    
    $.ajax({
        
        url:"/ajax.do",  //请求的url地址
        type:"POST", //请求的类型
        data:{"username":"zhangsan","password":"123456"},   //请求的参数

        //响应成功之后的回调函数。
        success:function (data) {
            console.log(data);
            $("#top").html(data);
        },
        //响应失败之后的回调函数。
        error:function () {
            alert("失败了");
        },
        dataType:"json"  //响应接收 到的数据的格式
        
    })
}

2.2 $.get( );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//get请求
function  fun(){

    /**
     * 一共有4个参数，第一个参数是url地址，  必须有
     * 第二个参数是：参数。  可以不写
     * 第三个参数：回调函数。可以不写
     * 第4个参数，返回结果的类型。可以不写
     *
     */
    jQuery.get("/ajax.do",{"username":"taoge","password":"123456"},function (data) {
        
        $("#top").text(data);
        
    },"text");

}

2.3 $.post( );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//post请求
 function  fun() {
     /**
     * 一共有4个参数，第一个参数是url地址，  必须有
     * 第二个参数是：参数。  可以不写
     * 第三个参数：回调函数。可以不写
     * 第4个参数，返回结果的类型。可以不写
     *
     */
     jQuery.post("/ajax.do",{"username":"taoge","password":"123456"},function (data){
         
         $("#top").text(data);
         
     },"text");


 }

3. json介绍

json: javascript object notation javascript对象表示。

  1. json现在多用于存储和交换文本的语法。
  2. 进行数据的交换。
  3. JSON比xml更小，更快，语法解析更简洁。

3.1 语法

3.1.1基本规则：数据是由键值对组成的。

  • 键需要使用引号引起来（单引号双引号都可以，推荐使用双引号）。（不用引号也可以，不要这么写）
  • 值有多种取值：
        1. 数字（正数和浮点数）    2. 字符串    3. 逻辑值（true，false）    4. 对象{“hotel”:{“brand“:“速八”}}    5. 数组：{"persons":[{ },{ }]}    6. null

3.1.2 获取数据的时候

  • json对象.键名
  • json对象[“键名”]
  • json数组[索引号]

4.jackson

让json数据和java对象互相转换的时候使用的。

JSON解析器：

  • jackSon
  • Gson
  • fastjson
  • jsonlib

4.1 JSON与java对象之间的转换

  1. 导入jackson所需要的包。

  2. 创建jackson的核心对象 ObjectMapper;

  3. ObjectMapper的相关方法进行转换。

    • readValue( json串, 要转换的类型 ) — json转成java对象

    • writeValue(参数1,obj); –将java对象转换成json对象

      • File:将obj对象转成json字符串，并且保存到指定的文件中
      • writer:将obj对象转成json字符串，将json字符串填充到字符输出流中。
      • outputStream: 将obj对象转成json字符串，然后将json字符串转成字节输出流。

    • writeValueAsString(obj); 直接将obj对象转换成json字符串。