JavaScript基础（二）：JSON与Ajax

一：JSON基础

1. 什么是JSON ？
JSON（JavaScript Object Noataion）是js语言的一个子集，它是一种数据格式，使用JSON可以很容易的将js对象的属性序列化为一个字符串或者将JSON字符串反序列化为js对象。与传统的XML数据传输格式相比，JSON更加容易阅读和理解，同时解析JSON字符串也更加容易（一行代码），相比于XML而言，传输相同的信息，JSON字符串体积更小。

// 一个JSON字符串例子
{
    "firstName": "Cruise",
    "lastName": "Tom",
    "age": 56,
    "address": null
}

2. JSON中的数据格式
JSON可以表示三种数据：简单值，对象和数组
2.1 简单值包括：字符串、数值、布尔值和null，与js字符串不同，JSON中的字符串必须使用双引号
2.2 对象：

// JSON表示的对象中只有属性，没有变量、函数和方法，属性名称必须使用双引号！
{
    "firstName": "Cruise",
    "lastName": "Tom",
    "age": 56,
    "address": {
        "street": "123 someplace",
        "city": "Los Angeles",
        "state": "California"
    }

}

2.3 数组（多个对象）：

[
    {
        "firstName": "Sheldon",
        "lastName": "Cooper",
        "age": 37,
        "address": {
            "street": "321 someplace",
            "city": "Pasadena",
            "state": "California"
        }

    },
    {
        "firstName": "Cruise",
        "lastName": "Tom",
        "age": 56,
        "address": {
            "street": "123 someplace",
            "city": "Los Angeles",
            "state": "California"
        }
    }
]

3. JSON字符串的序列化与反序列化

    // 创建一个js对象
    var person = {
        "firstName": "Sheldon",
        "lastName": "Cooper",
        "age": 37,
        "address": {
            "street": "321 someplace",
            "city": "Pasadena",
            "state": "California"
        }
    };

    // 将js对象序列化一个JSON字符串
    var json = JSON.stringify(person);

    // 将JSON字符串反序列化为js对象
    var actor = JSON.parse(json);

二：Ajax基础

1. Ajax的概念
Ajax允许浏览器通过javascript向服务器发送请求和接收数据，而无需刷新整个Web页面。

2. XMLHttpRequest对象
XMLHttpRequest对象是浏览器的内置对象，使用该对象可以向服务器发送请求，获取数据。
2.1 创建XMLHttpRequest对象，用于连接服务器，发送请求和接收数据

var request = new XMLHttpRequest();

2.2 初始化XMLHttpRequest对象

// 初始化XMLHttpRequest对象
// requestType: 请求类型，POST/GET
// url: 请求发送的目标
// async: 指定请求是同步还是异步模式，默认是异步的(默认值true)，一般省略该参数
request.open(requestType, url, async);

2.3 异步调用，绑定事件处理函数
XMLHttpRequest对象包含一个readyState属性，该属性值是一个数字，用于表示请求的状态：

0---对象已创定，未调用open()方法
1--已调用open()初始化对象，未发送请求
2--请求已发送
3--开始接收来自服务器的数据
4--服务器响应完毕(200/404/500...)

readyState属性值变化的时候都会触发readystatechange事件，调用onreadystatechange事件处理函数

// 定义事件处理函数，XMLHttpRequest请求完毕的调用
function reqReadyStateChange(){
    if(request.readyState == 4){    // 服务器响应完毕
        if(request.status == 200){  // http状态码200，请求处理成功
            // responseText表示服务器响应的数据
            alert(request.responseText);
        } else {
            alert("The server retutn a status code of " + request.status);
        }
    }
}

// 将函数绑定到事件上
request.onreadystatechange = reqReadyStateChange;

// 发送请求，接收一个字符串类型的参数，参数为发送给服务器的请求体，如果不包含请求体，则将null作为值传入（必须）
request.send(null);

2. 封装简易的Ajax模块
封装Ajax模块，提高代码的复用性

// 封装XMLHttpRequest对象的函数，GET类型的异步Ajax请求
function HttpRequest(url, callback){
    // 创建并初始化XMLHttpRequest对象
    this.reqeust = new XMLHttpRequest();
    this.reqeust.open("GET", url, true);

    var temRequest = this.reqeust;

    // 定义事件处理函数
    function reqReadyStateChange(){
        if(temRequest.readyState == 4){     // 服务器请求响应完毕
            if(temRequest.status == 200){   // 请求处理成功
                // responseText属性为服务器返回的数据
                callback(temRequest.responseText);
            }
        }
    }

    // 为readystatechange事件绑定事件处理函数
    temRequest.onreadystatechange = reqReadyStateChange;
}

// 封装send方法，之后调用send()方法无需传递参数
HttpRequest.prototype.send = function(){
    this.reqeust.send(null);
}