JS异步Ajax与json

Json简介:{
在互联网软件前端与后台进行消息交互的过程中，需要有一种标准的数据交换格式供前后端采用。在众多的数据交换格式中，JSON(JavaScript Object Notation，JS 对象标记)是应用得比较广泛的，它采用完全独立于编程语言的文本格式来存储和表示数据。JSON的层次结构简洁、清晰，易于阅读和编写，同时也易于机器解析和生成，这有效地提升了网络传输效率。
（不同语言之间的交流，需要经过转换成为各语言都能识别的数据类型，于是Json与Xml就承担这个任务）
Json是JavaScript对象表示法（javascript object Notation）

  Json是存储和交换文本信息的语法：

1、 Json是轻量级的文本数据交换格式
2、 Json是独立于语言和平台
3、 Json具有自我描述性，更容易理解
类似于Xml，但比Xml更小、更快、更易解析
（Xml：指可扩展标记语言。Xml被设计用来传输和存储数据）

  Json语法是JavaScript对象表示语法的子集

1、 数据在名称/值对中（数据在键值对中）
2、 数据由逗号分隔
3、 花括号保存对象（{}）
4、 方括号保存数组（[]）
Json值可以是：
1、数字（整数或浮点数）
2、字符串（在双引号中）
3、布尔值（true或false）
4、数组（在方括号中）
5、对象（在花括号中（自定义对象））
6、Null（不一定包含undefined）

  Json与JavaScript写法的区别：

以下是json的赋值：

{
  "code": 0,
  "msg": "",
  "count": 4,
  //数组里存放对象
  "data": [
    {
      "ticketID": 1,
      "startTicketNo": "E781-0000000000",
      "endTicketNo": "E781-0000009999",
      "currentTicketNo": "E781-0000000031",
      "ticketDate": "2019/12/19 10:29:00",
      "userGroup": "Administrator",
      "userNumber": "admin",
      "isEnable": true
    },{
      "ticketID": 2,
      "startTicketNo": "E781-0000000001",
      "endTicketNo": "E781-0000000010",
      "currentTicketNo": "E781-0000000010",
      "ticketDate": "2019/12/19 10:29:00",
      "userGroup": "Administrator",
      "userNumber": "admin",
      "isEnable": true
    }]
   }

1、 json不用把一个对象赋值给一个变量（没有声明变量，Json没有变量概念）
2、 json末尾没有分号，而js末尾有分号表示结束
3、 json的键需要有双引号，而js的键可有可无
以下是js的赋值

        var code = 0;
        var msg = "";
        var data = [
            {
                id:0,
                name: one
            },
            {
                id: 1,
                name: two
            },
        ]

Json对象有两个方法：
Stringify（）：将JS对象序列化为Json字符串
Parse（）：将json字符串解析为原生的JS对象

 var obj = [
            { name: "小李", age: 20 },
            { name: "小智", age: 20 },
            { name: "小白", age: 20 },
        ]
        //将js数组嵌套对象转换为json字符串
        var str = JSON.stringify(obj);
        console.log(typeof (str));  //检测为string数据类型

        //将json字符串转换为js对象
        var str2 = JSON.parse('[{ "name": "小李", "age": "20" },{"name": "小智", "age": "20" },{ "name": "小白", "age": "20" }]');
        console.log(typeof (str2)); //检测为object数据类型

AJAX简介：
（Asynchronous Javascript and Xml(异步的JavaScript 和 Xml)
{
Ajax是一种用于创建快速动态网页的技术
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个页面的情况下，对网页的某部分进行更新

 使用ajax的应用程序案例：

（1） 在百度地图里当拖到某个地方，网站就开始动态加载那个城市。这就用到了ajax局部刷新的功能（地图并不会一下子把所有加载进来）,这样提高了用户体验
（传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面）

 Ajax同步与异步：
   同步：是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才会继续执行下一个请求
   异步：是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
   异步实现：

1、 运用HTML与CSS来实现页面，表达信息
2、 运用XMLHttpRequest和web服务器进行数据的异步交换
3、 运用Javascript操作DOM，实现动态局部刷新

运用AJAX创建XMLHttpRequest对象来实现和Web服务器进行数据交互：
1、创建XMLHttpRequest
XMLHttpRequest对象用于在后台与服务器交换数据
XMLHttprequest除了IE老版本浏览器、其他浏览器基本可以适应
ActiveXObject可以适应IE老版本浏览器

        //浏览器兼容
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest;
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

2、向服务器发送请求
XMLHttprequest对象的open（）与send（）方法
1、 open（method，url，asyns）
method：请求的类型 Get或post
url: 请求文件在服务器上的位置
async：true(异步)或false（同步）
2、 send（string）：将请求发送到服务器
send只能用于在POST的请求上，应为get请求的数据需要拼接到http路径上
发送请求的方式有两种：
（1） 使用setRequestHeader(header（规定头的名称）,value（规定头的值）)来添加HTTP头然后在send()方法中规定您希望发送的数据

        xhr.open("Post", "@Url.Content("~/info/Table/Classdata2")", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(data); //上传的数据

(2) 使用js提供的FormData接口，该接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用XMLHttpRequest。Spend（）方式送出

  //获取数据
                var academeName = document.getElementById("academeName").value;
                var academeCode = document.getElementById("academeCode").value;
                var academeID = document.getElementById("academeID").value;
                 //apennd给Formdata对象
                var form = new FormData();
                form.append("academeName", academeName);
                form.append("academeCode", academeCode);
                form.append("academeID", academeID);
                //请求发送数据
                xhr.send(form);

3、 AJAX服务器响应
使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应
responseText：获取字符串形式的响应数据
responseXML:获取XML形式的响应数据

  AJAX的onreadystatechange事件
   在XMLHttpRequest对象中，ReadyState属性存有XMLHttpRequest的状态信息，每当ReadyState改变时，就会触发onreadystatechange事件
   XMLHttpRequest对象的三个重要属性：
     Onreadystatechange：存储函数（或函数名），每当ReadyState属性
     改变时，就会触发这个事件
     ReadyState：存有XMLHttpRequest的转态。从0到4发生变化
         0：请求未初始化
         1：服务器连接已建立
         2：请求已接收
         3：请求处理中
         4：请求已完成，且响应已就绪
（1）从服务器中获取数据进行回填时需要用到responseText或responseXML

            //判断是否请求成功
            xhr.onreadystatechange=function(){
                //请求成功
                if(xhr.readyState==4 && xhr.status==200){
                    //将从控制器获取的数据以json字符串返回再转换为js对象
                    var jsondata = JSON.parse(xhr.responseText);
                    if (jsondata != null) {
                        ///回填
                        document.getElementById("academeID").value = jsondata.academeID;
                        document.getElementById("academeName").value = jsondata.academeName;
                        document.getElementById("academeCode").value = jsondata.academeCode;

                        $("#Changemodal").modal("show");
                    }
                }
              }

或者使用onload来进行判断，onload代表请求成功时触发

                     xhr.onload = function () {
                    //将从控制器获取的数据以json字符串返回再转换为js对象
                    var jsondata = JSON.parse(xhr.responseText);
                    if (jsondata != null) {
                        ///回填
                        document.getElementById("academeID").value = jsondata.academeID;
                        document.getElementById("academeName").value = jsondata.academeName;
                        document.getElementById("academeCode").value = jsondata.academeCode;

                        $("#Changemodal").modal("show");
                    }
                }