Ajax的使用步骤和JSON格式

（1）Ajax是Asynchronous JavaScript and XML（异步JavaScript和XML）的简写。就是浏览器和服务器之间的一种异步通信方式。使用Ajax可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

Ajax中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面。浏览器可以做自己的事。直到成功获取响应后，浏览器才开始处理响应数据。

XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式（现在用json）。

（2）基本用法：

Ajax想要实现浏览器与服务器之间的异步通信，需要依靠XMLHttpRequest，它是一个构造函数。不论是XMLHttpRequest还是Ajax，都没有和具体的某种数据格式绑定

（3）Ajax使用步骤：

//使用步骤：
        //1.创建xhr对象
        const xhr = new XMLHttpRequest();
        //2.准备发送请求，第三个参数true代表是异步请求
        xhr.open('HTTP方法GET,POST,PUT,DELETE','地址URL',true)
        // 调用open并不会真正发送请求，而只是做好发送请求前的准备工作
        //3.发送请求
        //调用send（）正式发送请求,参数是通过请求体携带的数据
        xhr.send(null);
        //4.监听事件，处理响应(最好放在创建对象后面)
        //当获取到响应后，会触发xhr对象的readystatechange事件
        // 可以在该事件中对响应进行处理
        xhr.onreadystatechange = () => {
            //判断状态是否完成，未完成就返回
            if(xhr.readyState !== 4) return;
            //获取到响应后，响应的内容会自动填充xhr对象的属性
            // 判断请求或服务器端是否出错
// xhr.status:HTTP状态码
// xhr.statusText: HTTP状态说明
            if((xhr.status>=200&&xhr.status<300)||xhr.status === 304) {
                console.log('正常使用响应数据');
                console.log(xhr.responseText);
            }
        };
   // readystatechange事件也可以配合addEventListener使用，不过IE6~8不支持
        // 为了兼容性，readystatechange中不使用this，而是直接使用xhr
        // readystatechange事件监听readyState这个状态的变化
        //它的值从0~4，一共5个状态
        // 0：未初始化。尚未调用open()
        // 1：启动。已经调用open()，但尚未调用send()
        // 2: 发送。已经调用send(),但尚未接收到响应
        // 3：接收。已经接收到部分响应数据
        // 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了。

JSON 

Ajax发送和接收数据的一种格式，全称是JavaScript Object Notation。有3种形式，每种形式的写法都和js中的数据结构很像，可以实现互相转换。

⑴ JSON的三种形式

①简单值形式（对应基本数据类型：数字、字符串、布尔值、null）

 // 注意事项：
        // json中没有undefined值
        // 字符串必须使用双引号
        // json中是不能注释的

②对象形式（对应JS中的对象）

注意事项与基本值形式一样

③数组形式（对应JS中的数组）

注意事项与基本值形式一样

⑵常用方法：

//1.JSON.parse()
        // 可以将JSON格式的字符串解析成JS中的对应值
        // 一定要是合法的JSON字符串，否则会报错

        //2.JSON.stringify()
        // 将基本数据类型、对象和数组转换成JSON格式
        //让localStorage/sessionStorage可以存储对象

        //3.使用JSON.parse()和JSON.stringify()封装localStorage
       //两个对象（或数组），值相同，由于地址不同，直接比较是不相等的，
       //而使用JSON.stringify方法将对象（或数组）转成字符串之后，就可以只比较值了

 应用：

// 封装localStorage

const storage = window.localStorage;
// 存储数据
const set = (key,value) => {
  // 将JS类型转为JSON字符串类型
  storage.setItem(key,JSON.stringify(value));
};
// 获取数据
const get = (key) => {
    // 将JSON字符串类型解析为JS类型
  return JSON.parse(storage.getItem(key));
};
// 删除数据
const remove = (key) => {
  storage.removeItem(key);
};
// 清空数据
const clear = () => {
  storage.clear();
};
export {set,get,remove,clear};
<script type="module">
    import {set,get,remove,clear} from './storage.js';
    set('username','ls');
    console.log(get('username'));
    set('zs',{
      username:"张三",
      age:20
    });
    console.log(get('zs')); // {username: '张三', age: 20}

    remove('username');
    clear();
  </script>