JSON和ajax_json ajax-CSDN博客

本文链接：https://blog.csdn.net/zz1173/article/details/125141746

1 json数据格式
1.为什么在学习ajax操作之前学习json数据格式？
一般情况下后端处理程序不会识别javascript对象,前端处理程序往往会是不会识别后端处理程序返回的数据对象。
此时我们需要一种数据格式能够被后端处理程序和前端处理程序都识别--json数据格式

2.什么是 JSON ？
JSON--JavaScript对象表示法【JavaScript Object Notation】
脱离编程语言的进行数据交换的文本【字符串】数据格式
在没有JSON之前我们使用XML充当数据交换格式。

3.JSON数据的组成----文本【字符串】
1.json对象
1.“{}”--json对象的字符串表示
2.“{}”包含的是--【键值对】
键---使用双引号包围
值---数字，字符串【双引号包围】，
逻辑值，json数组【使用[]】,
JSON对象【使用{}】，null

4 json数组

“[]”--json数组
“[]”包含---具体数据值/json对象\

比较复杂的json数据都是对象中有数组，数组中有对象的嵌套结构
https://free-api.heweather.com/v5/weather?city=%E8%A5%BF%E5%AE%89&key=d7bd43af19c64994b62fc643e5d75272
面对上面的复杂json数据，我们往往不能看清他的结构，这时我们可以借助工具来查看json的结构
https://www.json.cn/
————————————————
版权声明：本文为CSDN博主「Zz1173」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Zz1173/article/details/123798299

5 JSON数据的转换

1.判断得到的是json对象还是json字符串

json对象的字符串---->json对象[javascript对象]

(使用 JSON.parse() 方法将数据转换为 JavaScript 对象。)

json对象[javascript对象]--->json对象的字符串

(可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。)

1.JSON

<script>
    // JSON 作为一种数据传递的格式
    var loginInfo = {
      phone: '17602900172',
      password: 'admin123',
    };
    // {"phone":"17602900172","password":"admin123"}
    // stirng=>有格式的字符串 JSON "{phone: '17602900172', password: 'admin123'}"
    var str = JSON.stringify(loginInfo);
    console.log(str);
    // 解析JSON字符串
    console.log(JSON.parse(str));
  </script>

2.发送GET请求

<script>
    // 创建XMLHttpRequest对象
    // Internet Explorer （IE5 和 IE6）
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    console.log(xhr);
    // 监听ajax状态的变化
    xhr.onreadystatechange = function () {
      //  0: 请求未初始化
      //  1: 服务器连接已建立
      //  2: 请求已接收
      //  3: 请求处理中
      //  4: 请求已完成，且响应已就绪
      if (xhr.readyState === 4) {
        console.log('请求完成了');
        // 获取响应的结果 字符串
        console.log(JSON.parse(xhr.responseText));
      }
    };

    // xhr.open(method,url,boolean)
    // method:GET
    // url:协议+ip+端口号+具体路径
    // boolean:是否是异步请求
    xhr.open('GET', 'http://119.91.125.14:8888/home/goods?type=pop&page=1', true);
    xhr.send();
  </script>

3.发送POST请求

<script>
    // 创建XMLHttpRequest对象
    // Internet Explorer （IE5 和 IE6）
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    console.log(xhr);
    // 监听ajax状态的变化
    xhr.onreadystatechange = function () {
      //  0: 请求未初始化
      //  1: 服务器连接已建立
      //  2: 请求已接收
      //  3: 请求处理中
      //  4: 请求已完成，且响应已就绪
      // state 网络状态码 200 201 成功 4xx 5xx
      if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 201)) {
        console.log('请求完成了');
        // 获取响应的结果 字符串
        console.log(JSON.parse(xhr.response));
      }
    };

    // method:POST
    xhr.open('POST', 'http://119.91.125.14:8888/user/login', true);
    // 设置请求头
    xhr.setRequestHeader('Content-type', 'application/json');

    var loginInfo = {
      phone: '17602900172',
      password: '123456',
    };
    // post：由于请求数据放在请求体中，所以需要对数据做序列化处理（JSON）
    xhr.send(JSON.stringify(loginInfo));
  </script>

4.练习

function ajax(options) {
  // 取出参数
  var url = options.url;
  var method = options.method || 'GET';
  var data = options.data || {};
  var header = options.header || {};
  var success = options.success;

  // 创建XMLHTTPRequst对象
  var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

  // 监听xhr state状态的变化
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 201)) {
      success(JSON.parse(xhr.response));
    }
  };

  // 开启请求
  xhr.open(method, url, true);

  // 设置请求头
  for (var key in header) {
    xhr.setRequestHeader(key, header[key]);
  }

  // 发送请求
  xhr.send(JSON.stringify(data));
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script src="./ajax.js"></script>
<script>
// 使用
ajax({
url: 'http://119.91.125.14:8888/home/goods?type=pop&page=1',
success: function (response) {
console.log(response);
   },
   });

// 登陆
ajax({
url: 'http://119.91.125.14:8888/user/login',
method: 'POST',
data: {
phone: '17602900172',
password: '123456',
   },
header: {
'Content-Type': 'application/json',
   },
success: function (response) {
console.log(response);
   },
   });
</script>
</html>

缓存

localStorage:用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

使用 key="name" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。

检索键值为"name" 的值然后将数据插入 id="result"的元素中。

sessionStorage：用于临时保存同一窗口的数据，在关闭窗口或者标签页时会删除这些数据

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

// 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

typeof (Storage) !== "undefined"

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

重要面试题

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。