Ajax、同步异步解释、JSON初步解释

Ended
164 阅读3分钟

同步和异步

同步和异步的区别

同步交互：

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

异步交互：

异步是指进程不需要一直等下去， 而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效 率。

通俗来说：

同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。

异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。

所以，要我请你吃饭就用同步的方法，要请我吃饭就用异步的方法，这样你可以省钱

例如：

    <script>
    setTimeout(function(){
        console.log(1);
    },1000)
    console.log(2);
    //先打印2是因为setTimeout是一个异步操作
    //setTimeout的延迟时间是0 同样先打印2
</script>

Ajax的请求状态

请求状态0-4
0：请求未初始化（还没有调用到open方法）
1：服务器连接已建立
2.请求已接收（send方法完成，已经收到全部响应内容）
3.请求处理中（解析响应内容）
4.请求已完成，且响应已就绪
例如下面的代码：

 <script>
let xhr = new XMLHttpRequest();
console.log('请求未初始化',xhr.readyState);
xhr.open('get','abc.text',true)
xhr.send();
console.log('服务器连接已建立',xhr.readyState);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 2){
        console.log('请求已接收',xhr.readyState)
    }
    if(xhr.readyState == 3){
        console.log('请求处理中',xhr.readyState)
    }
    if(xhr.readyState == 4){
        console.log('请求已完成',xhr.readyState)
    }
}
   
</script>

控制台输出如下图：

ZTSXK)@(HF0SHOQVRGG(35P.png

XMLHttpRequest、open、send等看上一章节

练习

使用xhr请求text内容 并显示到页面上，代码如下：

<script>
    let xhr =  new XMLHttpRequest();
    xhr.open('get','abc.text',true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            document.write(xhr.responseText); 
        }
        
    }
    </script>

JSON

我们先来看一个JSON的组成：

{
  "propertyName": "propertyValue"
}
复制代码
  1. property(属性/键值对)
  2. propertyName(属性名/键)
  3. propertyValue(属性值)

JSON可以表示四种基本类型（string(字符串)、number(数字）、booleans(布尔值)、null（空））和两个结构化类型（Object(对象)、Arrarys（数组））

书写

逗号

最后一个属性后不能有逗号

双引号

在标准中都使用了双引号。因为所有的属性必须在双引号内。但是布尔值或者数字可以不用引号。

结构层次

在设计JSON 的时候，我们都能看见可扩展和不可扩展的JSON结构。其中最主要的就2种，一种为扁平化数据，还有结构层次。

先讲讲我在知乎上看见的问题：

正常情况有一个JSON应为：

[  {     "name": "Javascript权威指南"，    "chapters:": 500,  },  {    "name": "Javascript高级程序设计",    "chapters": 500,  },  {...},  {...}]
复制代码

这样看是很完美，但是有些人会这样设计？

[  {    "Javascript权威指南"： 500  },  {    "Javascript高级程序设计": 500  }]
复制代码

那么我们就可以看出2种设计的问题，第二种无法扩展有木有！！而且。。他们为啥要把数据内容带入属性名！！

ok！我们知道了一点，不要把数据内容带入属性名。

接下来扁平化数据：

{
  "Image": {
    "width": 800,
    "Height": 600,
    "Title":  "View from 15th Floor",
    "ThumbnailUrl": "http://www.example.com/image/481989943",
    "ThumbnailHeight": 125,
    "ThumbnailWidth": 100
  }
}
复制代码

结构层次：

{
  "Image": {
    "Width":  800,
    "Height": 600,
    "Title":  "View from 15th Floor",
    "Thumbnail": {
      "Url":    "http://www.example.com/image/481989943",
      "Height": 125,
      "Width":  "100"
    },
  }
}
复制代码

JSON中本应该以数据元素扁平化方式呈现。

但是结构层次对我们开发人员更加的友好有意义。

具体情况看自己的选择。

下面讲点细的

属性名规范

  • 属性名应该一看就知道啥用
  • 属性名必须是驼峰，ASCII码字符串
  • 首字符必须是字母，_ （下划线），$(美元符号)
  • 避免使用js中的保留字
  • 数组类型应该是复数，其他属性名都为单数

属性值规范

  • 属性值应该为四种基本类型（string(字符串)、number(数字）、booleans(布尔值)、null（空））和两个结构化类型（Object(对象)、Arrarys（数组））
  • 其他的具体可以看我下面给出的参考资料链接

方法

  • JSON.parse()

    • 解析一个JSON将他转换成JavaScript值或对象

  • JSON.stringify()

    • 把一个对象或者值转换成JSON字符串
avatar
文章
阅读
粉丝