JSON基础+AJAX

1.JSON简介

JSON: JavaScript Object Notation（JavaScript 对象标记法）

JSON：独立于语言的轻量级的文本数据交换格式

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。

JSON 解析器和 JSON 库支持许多不同的编程语言

2.JSON的组成

2.1.json对象{ }

 对象{}中包含--名称/值对【键值对】/json数组/json对象

 json名称/值对【键值对】书写格式

 key: value-- --"name": "zhangsan"

键值对中的键要用双引号包围

json中键值对中的的值可以为：

1.数字(整数或浮点数)"age":20

2.字符串(在双引号中)"name":"wangxaio"

3.逻辑值(true/false)"flag":true

4.数组(在中括号中[])"array":[]

5.对象(在大括号中())"obj":()

6.null---"nu":null

        var stuobj = {
            "stuid": 10001, //数字
            "name": "王小", //字符串
            "sex": true, //逻辑值
            "address": ["宝鸡", "咸阳"], //数组
            "ciassinfo": {
                "classname": "前端",
                "classcode": "20210911"
            } //对象
        };
        alert(stuobj); //[object Object]

2.2json数组[ ]

json数组[ ]包含---具体的数据值/json对象

        var stuarr = ["王小", "王二小", {
            "id": 10002,
            "sex": true
        }, {
            "id": 10003,
            "sex": "false"
        }];
        alert(stuarr); //王小,王二小,[object Object],[object Object]

比较复杂的json数据都是对象中有数组，数组中有对象的嵌套结构

[{"stuid":1001,"stuname":"zhangsan","stuage":23,"stuaddress":"西安"},{"stuid":1002,"stuname":"lisisi","stuage":24,"stuaddress":"北京"},{"stuid":1003,"stuname":"wangwu","stuage":25,"stuaddress":"上海"}]

面对复杂的json数据，我们往往不能看清他的结构，这时我们可以借助工具来查看json的结构

JSON在线解析及格式化验证 - JSON.cn

 3.JSON数据的转换

我们得到的json数据有可能是json对象，也有可能是json字符串。因此我们就需要将json对象与json字符串进行转换

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

2.转换

3.1Json对象转换成Json字符串

使用JSON.stringify( )方法将javascrip对象转换为字符串

      var stuobj = {
            "stuid": 10001, //数字
            "name": "王小", //字符串
            "sex": true, //逻辑值
            "address": ["宝鸡", "咸阳"], //数组
            "ciassinfo": {
                "classname": "前端",
                "classcode": "20210911"
            } //对象
        };
        //判断判断得到的是json对象还是字符串
        alert(stuobj); //[object Object]
        //使用JSON.stringify()方法将javascrip对象转换为字符串
        var str = JSON.stringify(stuobj);
        alert(str);
        //{"stuid":10001,"name":"王小","sex":true,"address":["宝鸡","咸阳"],"ciassinfo":{"classname":"前端","classcode":"20210911"}}
       

 

3.2.json字符串转换为json对象

方法一

使用json.parse()方法将字符串转换为javascript对象

准备一个字符串

// \"==="---转义字符
var stri = "{\"stuid\":10001,\"name\":\"王小\",\"sex\":true,\"address\":[\"宝鸡\",\"咸阳\"],\"classinfo\":{\"classname\":\"前端\",\"classcode\":\"20210911\"}}";
       

判断

    alert(stri); 

转换

        var obj = JSON.parse(stri);
        alert(obj); //[object Object]
        alert(obj.name); //王小
        alert(obj.address[1]) //咸阳
            // 遍历address数组
        var addarr = obj.address;
        for (var i = 0; i < addarr.length; i++) {
            alert(addarr[i]); //宝鸡  咸阳
        }
        // 得到20210911

方法二

使用eval("(" + 字符串 + ")")将字符串转换为javascript对象

        // \"==="---转义字符
        var stri = "{\"stuid\":10001,\"name\":\"王小\",\"sex\":true,\"address\":[\"宝鸡\",\"咸阳\"],\"classinfo\":{\"classname\":\"前端\",\"classcode\":\"20210911\"}}";
        //方法一
        // 使用json.parse()方法将字符串转换为javascript对象
        var obj = JSON.parse(stri);
        alert(obj); //[object Object]
        alert(obj.name); //王小
        alert(obj.address[1]) //咸阳
            // 遍历address数组
        var addarr = obj.address;
        for (var i = 0; i < addarr.length; i++) {
            alert(addarr[i]); //宝鸡  咸阳
        }
        // 得到20210911
        alert(obj.classinfo.classcode); //20210911
        // 方法二
        // eval("(" + 字符串 + ")")
        var jsonobj = (eval("(" + stri + ")"));
        alert(jsonobj); //[object Object]
        alert(jsonobj.sex); //true
        alert(jsonobj.classinfo.classname); //前端

4.AJAX

AJAX 是开发者的梦想，因为您能够：

不刷新页面更新网页

在页面加载后从服务器请求数据

在页面加载后从服务器接收数据

在后台向服务器发送数据

AJAX = Asynchronous JavaScript And XML.

4.1AJAX 如何工作

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

 Ajax 的核心是 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

XMLHttpRequest 对象方法

<!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>Javascript的ajax请求的处理</title>
    <script>
        window.onload = function() {
            // 1.创建请求对象
            var xmlhttp = null;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.打开链接
            var url = "http://localhost:8080/test";
            //(请求类型，文件位置，异步)
            xmlhttp.open("GET", url, true);
            //(请求类型，文件位置，同步)
            // xmlhttp.open("POST,url,false");
            // 3.发送请求到服务器
            //GET请求类型用send()方法
            xmlhttp.send();
            //GET请求类型用send(string)方法
            // xmlhttp.send(string);
            // 4.接受处理结果
            //当 readyState 属性发生改变时所调用的函数
            xmlhttp.onreadystatechange = function() {
                // 请求已完成且响应已就绪==OK
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // 返回状态文本
                    var res = xmlhttp.responseText;
                    //alert(res);
                    // [{"stuid":1001,"stuname":"zhangsan","stuage":23,"stuaddress":"西安"},{"stuid":1002,"stuname":"lisisi","stuage":24,"stuaddress":"北京"},{"stuid":1003,"stuname":"wangwu","stuage":25,"stuaddress":"上海"}]
                    // 使用 JSON.parse() 方法将数据转换为 JavaScript 对象
                    var jsonObj = JSON.parse(res);
                    // alert(jsonObj);[object Object],[object Object],[object Object]
                    var tablehead = "<tr><td>学生编号</td><td>学生姓名</td><td>学生年龄</td><td>学生地址</td></tr>";
                    for (var i = 0; i < jsonObj.length; i++) {
                        var stuobj = jsonObj[i];
                        var stuinfo = "<tr><td>" + stuobj.stuid + "</td><td>" + stuobj.stuname + "</td><td>" + stuobj.stuage + "</td><td>" + stuobj.stuaddress + "</td></tr>";
                        tablehead = tablehead + stuinfo;
                    }
                    document.getElementById("maintable").innerHTML = tablehead;

                }
            }
        }
    </script>
</head>

<body>
    <table id="maintable" border="1px" width="500px"></table>

</body>

</html>

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对