JavaScript异步Ajax与json总结

文献种类：专题技术总结文献；
开发工具与关键技术：VS与 JavaScript
作者： 熊江宇 ；年级： 2019 ；撰写时间： 2020 年 4 月 28 日

JavaScript对象总结

开发工具与关键技术：Visual Studio 2015 与 JavaScript
作者：熊江宇
撰写时间：2020年4月20日

JSON:
JavaScript对象表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法：
1.JSON是轻量级的文本数据交换格式
2.JSON独立于语言和平台
3.JSON具有自我描述性，更容易理解。
类似于xml,比XML更小、更快、更易解析
(XML:指可扩展标记语言。XML被设计用来传输和存储数据。)
/
//1-1 JSON语法
/
JSON语法是JavaScript对象表示语法的子集
1.数据在名称/值对中(数据在键值对中)
2.数据由逗号分隔
3.花括号保存对象({})
4.方括号保存数组([])
JSON值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null
*/

JSON创建的对象，对象中包含对象
        "name": "周名",
        "age": 23,
        "school": {
            "name": "gxrjxy",
             "address":"兴业路8号"
        }
    }
    */ //注意：与JS不同，JSON中对象的属性名任何
    //时候都必须加双引号

    //1-3JSON数组（在方括号中书写，数组可包含多个对象）
    var book = [23, "hello", true];//JS中的数组
    //在JSON中，可以采用同样的语法表示一个数组
    //[23, "hello", true]
    //同样注意：JSON数组中没有变量和分号。

    //把数组和对象结合起来，可以构成更加复杂的数据集合，例如：
    /* json数组和对象结合的数据集合

        Ajax 简介
    //（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）） [eɪˈsɪŋkrənəs] 
    /*
       1-1 什么是 AJAX ？
        Ajax不是某种编程语言
            AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

            传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
            有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等

        1-2 同步与异步：
        同步就是指一个进程在执行某个请求的时候，
        若该请求需要一段时间才能返回信息，
        那么这个进程将会一直等待下去，
        直到收到返回信息才继续执行下去；

        异步是指进程不需要一直等下去，
        而是继续执行下面的操作，不管其他进程的状态。
        当有消息返回时系统会通知进程进行处理，
        这样可以提高执行的效率。
        
        异步实现：
            1、运用HTML与CSS来实现页面，表达信息
            2、运用XMLHttpRequest和web服务器进行数据的异步交换
            3、运用JavaScript操作DOM，实现动态局部刷新

        1-3 AJAX - 创建 XMLHttpRequest 对象
            什么是 XMLHttpRequest 对象？
                XMLHttpRequest 对象用于在后台与服务器交换数据（具体介绍可见w3c）
            创建 XMLHttpRequest 对象
                所有现代浏览器（IE7+、Firefox、Chrome、Safari 
                以及 Opera）均内建 XMLHttpRequest 对象。
            创建 XMLHttpRequest 对象的语法：
                var xhr=new XMLHttpRequest();
            老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject 对象：
                var xhr=new ActiveXObject("Microsoft.XMLHTTP");
            为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
          例如：  var xhr;
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xhr = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        1-4 AJAX - 向服务器发送请求
            向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
            open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
                参数说明：
                method：请求的类型；GET 或 POST 
                url：文件在服务器上的位置 
                async：true（异步）或 false（同步）Asynchronous 
            send(string)：将请求发送到服务器。
                参数说明：
                string：仅用于 POST 请求 
            一个简单的 GET 请求：
                xhr.open("GET","/jQueryAjax/getPersonInfor",true);
                xhr.send();
            一个简单 POST 请求：
                xhr.open("POST","/jQueryAjax/getPersonInfor",true);
                xhr.send();
            如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
                xhr.open("POST","/jQueryAjax/postPersonInfor",true);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send(data);//data表单中需要提交的数据（字符串） 
            setRequestHeader语法：
            setRequestHeader(header,value)：向请求添加 HTTP 头。
                参数说明：
                header: 规定头的名称 
                value: 规定头的值 
        1-5 AJAX - 服务器响应
            使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获取来自服务器的响应
            responseText：获得字符串形式的响应数据。
            responseXML：获得 XML 形式的响应数据。
            document.getElementById("myDiv").innerHTML=xhr.responseText;
        1-6 AJAX - onreadystatechange 事件
            onreadystatechange 事件
                每当 readyState 改变时，就会触发 onreadystatechange 事件。
                readyState 属性存有 XMLHttpRequest 的状态信息
            下面是 XMLHttpRequest 对象的三个重要的属性：
            onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
            readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                0: 请求未初始化 
                1: 服务器连接已建立 
                2: 请求已接收 
                3: 请求处理中 
                4: 请求已完成，且响应已就绪 
            status:  200: "OK"  404: 未找到页面
            在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
            当 readyState 等于 4 且状态为 200 时，表示响应已就绪：