get方式和post方式的区别

使用get方式和post方式都可以向服务器发送请求，只是发送的机制不同，主要体现在以下几点。

  1. 参数传递。
    1. get请求会将参数添加到请求URL的后面，没有请求主体，调用send()函数时，传递的参数为null，即xhr.send()；post请求的数据会放请求体中，用户是无法通过URL直接看到的，调用send()函数时，传递的参数为data，即xhr.send(data)。
  2. 服务端参数获取。
    1. 使用Express作为服务端框架，get请求通过Request.query来获取参数；而使用post请求时需要添加中间件，同时通过Request.body来获取参数。
  3. 传递的数据量。
    1. get请求传输的数据量小，对于不同的浏览器有所差异，Chrome浏览器限制为8K，IE限制为2K；post请求传递的数据量大，一般默认不受限制，但实际上服务器会规定post请求传递的数据量大小。
  4. 安全性。
    1. get请求安全性较低，因为其请求的参数会出现在URL上，而且采用明文进行数据传输，通过浏览器缓存或者历史记录可以很容易获取到某些隐私请求的参数；
    2. post请求通过请求体进行数据传输，数据不会出现在URL上，隐藏了请求数据的信息，安全性较高。
  5. 处理form表单的差异性
    1. get
      1. form表单元素添加了method=”get”，表示使用get方式进行提交，在不指定method属性时，默认采用get请求。
      2. action属性为请求的url，在url后携带了请求的参数”param=面试厅”。
      3. form表单采用get请求时，action指定的url中的请求参数会被丢弃，提交时只会将form表单内的元素值进行拼接并向服务端传递。
    2. post
      1. 将form表单的method属性值改为post，并将请求的url换为saveUser，同样在url中携带请求参数”param=面试厅”。
      2. 可以发现form表单内的元素和请求url中携带的参数都被服务端接收到了，其中form表单内的元素通过Request.body请求体被服务端接收到，而url中携带的参数通过Request.query被服务端接收到。

使用get方式和post方式需要注意的点

在使用get方式和post方式发送Ajax请求时，由于请求方式本身的特性，所以有一些需要注意的点。

  1. 使用get方式请求时，如果请求的url不发生改变，可能会存在缓存的问题，因此在请求的url后一般会拼接上一个时间戳，以避免出现缓存。
  2. 使用get方式请求时，请求的参数会拼接在url后，如果浏览器编码、服务器编码、数据库编码格式不一致，可能会导致乱码的问题。通常的做法是对请求的参数经过encodeURIComponent()函数处理。
  3. xhr.open('get','/getUser?usernae='+encodeURIComponent(username),true)
  4. 使用post方式请求时，需要设置请求头中的content-type属性，表示数据在发送至服务器时的编码类型。默认情况下，使用post方式提交form表单时，content-type值为application/x-www-form-unlencoded，另外还可以支持multipart/formdata、application/json等格式。
  5. xhr.setRequestHeader('content-type','application/x-ww-form-urlencoded')

get方式和post方式的使用场景

在了解了get方式和post方式的区别及使用注意事项后，接下来讲解Ajax请求分别使用get方式和post方式的场景吧。

  1. Ajax使用get方式的场景
    1. 请求是为了检索资源，form表单的数据仅用于帮助搜索。
    2. 传递的数据量小，适合于url中传递参数。
    3. 数据安全性低，适合明文传输。
  2. Ajax使用post方式的场景
    1. 请求会修改数据库中的资源，例如新增、修改、删除等操作。
    2. 传递的数据量大，超出url中携带参数长度的限制。
    3. 用于用户名、密码及身份证号等类似敏感信息的数据传输。

JSON序列化和反序列化

JSON序列化即将JSON对象处理为JSON字符串的过程，以方便数据的传输。JSON序列化可以通过两种方式来实现，一种是调用JSON对象内置的stringify()函数，一种是为对象自定义toJSON()函数

  1. JSON.stringify()
    1. 函数JSON.stringify()函数是将一个JavaScript对象或者数组转换为JSON字符串
    2. JSON.stringify(value, replacer, space )
    3. 其中各个参数含义如下。
      1. value参数表示待处理成JSON字符串的JavaScript值，通常为对象或者数组。
      2. replacer参数是一个可选参数。如果其值为一个函数，则表示在序列化过程中，被序列化值的每个属性都会经过该函数的处理；如果其值为一个数组，则表示只有包含在这个数组中的属性名才会被序列化到最终的JSON字符串中；如果该值为null或者未传递，则value参数对应值的所有属性都会被序列化。
      3. space是一个可选参数，用于指定缩进用的空白字符串，美化输出。如果参数是个数字，则代表有多少个空格，上限值为10；如果该参数的值小于1，则意味着没有空格；如果参数为字符串，则取字符串的前十个字符作为空格；如果没有传入参数或者传入的值为null，将没有空格。
    4. 关于JSON序列化，有以下一些注意事项。
      1. 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
      2. 布尔值、字符串、数字的包装对象在序列化过程中会被转换为对应的原始值。
      3. 在非数组对象中，undefined、任意的函数及Symbol值，在序列化时会被忽略；在数组对象中，它们会被序列化为null。
      4. 对包含循环引用对象进行序列化时会抛出异常。
      5. 所有以symbol为属性键的属性都会被完全忽略掉。
      6. 不可枚举的属性值会被忽略。
  2. 自定义toJSON()函数
    1. 如果一个被序列化的对象拥有toJSON()函数，那么toJSON()函数就会覆盖默认的序列化行为，被序列化的值将不再是原来的属性值，而是toJSON()函数的返回值。
    2. toJSON()函数用于更精确的控制序列化，可以看作是对stringify()函数的补充。

  3. JSON反序列化

    JSON反序列化即将JSON字符串转换为JSON对象的过程，得到的结果用于在JavaScript中做逻辑处理。JSON反序列化的实现方式有两种，一种是使用JSON对象内置的parse()函数，一种是使用eval()函数。

    1. JSON.parse()函数JSON.parse()函数用来解析JSON字符串，构造由字符串描述的JavaScript值或对象，它的语法如下所示。JSON.parse(text, reviver)
      1. 其中各个参数的含义如下。
        1. text表示待解析的JSON字符串。
        2. reviver是一个可选参数。如果是一个函数，则规定了原始值在返回之前如何被解析改造。如果被解析的JSON字符串是非法的，则会抛出异常。
    2. 当使用JSON.parse()函数解析JSON字符串时，需要注意两点。
      1. SON字符串中的属性名必须用双引号括起来，否则会解析错误。
      2. JSON字符串不能以逗号结尾，否则会解析异常。
  4. eval()函数
    1. eval()函数用于计算JavaScript字符串，并把它作为脚本来执行。
    2. 在使用eval()函数进行JSON反序列化时，其语法如下所示。
    3. eval("(" + str + ")")
    4. 其中，str表示待处理的字符串。这里为什么要使用括号将拼接出来的字符串括起来呢？因为JSON字符串是以“{}”开始和结束的，在JavaScript中它会被当作一个语句块来处理，所以必须强制将它处理成一个表达式，所以采用括号。